[SOLVED] Header Image Rollover

[busyb]

Hi, My name is Brandi and i am very new to CSS. I am not sure if this outside of the scope of this forum. Please forgive me if it is I am trying to create a header for my website. I would like a circle on the left side of my header to move up when the mouse hovers over it, and the right side of the head( which would be text) to not move. I have no clue how to go about doing this. Would i need to use CSS or do i need to use JQuery. Any suggestions or instructions on where to find this info would be greatly appreciated! Thanks so much!

[meesa]

That all depends how to want it to work. When does the circle return? How far will the circle move? Considering you know what you want, a before and after shot might help as well.

[busyb]

These are the two images i was going to use.




I basically want the circle to move up when they hover over the circle. Then they can click on the word home and they would go back to the home page.Does that help any?

[meesa]

CSS will do, your images, will both need to be the same size as the :hover one, the difference being that the default one will have extra space up top, then you'd use something like this:

#logo a {display:block;width:100px;height:150px;background:url('images/logo.png') no-repeat;}
#logo a:hover{background:url('images/logo-hover.png') no-repeat;}

Of course dimensions, image paths, and the correct ID (Or however you plan to target the image) will need to be modified to reflect your code.

[busyb]

Awesome! You rock. One more question- where would i place this? does it need to go in the style.css and if so where. Sorry for all the ignorant questions. I am a real noob

[meesa]

Place it with the rest of your CSS.

And here's something that gets new guys: If your CSS is in it's own folder, and your images are in their own folder, such as that your tree works like /root/css/ and /root/images/, then to access your images from your CSS files, you will either need to make the path ../images or /images in the CSS.

[busyb]

I am sorry but i still can't get it to work. This is what my css looks like with the code you have given me-

/************************************************
* Header *
************************************************/

#header {
background: transparent
width: 855px;
height: 250px;
margin: 50px auto 0px;
padding: 0px;
}
#logo a {display:block;width:100px;height:150px;background :url('https://lh6.googleusercontent.com/-CAaNHR2yRc0/TzB4RDl5bgI/AAAAAAAAASw/isvFOd2mmT4/w500-h266-k/Forum.png') no-repeat;
}
#logo a:hover{background:url('https://lh6.googleusercontent.com/-kosSdwSw-2Y/TzB4RPiB09I/AAAAAAAAASs/IGySNRsWzdA/w818-h435-k/Forum%25232.png') no-repeat;
}
#header h1 {
color: #000000;
font-size: 36px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
margin: 0px;
padding: 0px;
text-decoration: none;
}
#header h1 a:hover {
background: url('');
text-decoration: none;
}
#header #title {
padding: 0px;
margin: 0px;
}
#header #title a {
background: url('') no-repeat;
float: left;
display: block;
width: 855px;
height: 250px;
margin: 0; padding: 0;
text-indent: -9999px;
overflow: hidden;
}


Any suggestions?

[meesa]

And what does your HTML look like?

[busyb]

ummm... would that be the header.php?

[meesa]

No, if it's written in PHP, then open the page in your browser, view the source code, and give me only the HTML that relates to this issue. (I don't need the entire page)