...

View Full Version : CSS - Anchor Background Image



Tyrial101
12-25-2006, 06:56 AM
Hello,

I want to make buttons for my side nav bar using background images in css.

I used to use javascript and make individual images for each button, but I would much rather tile a small image (background-repeat: repeat-x;) and lay text over top of it.

I did this using the following code



#mainNav a {
background-image: url('images/nav1.gif');
background-repeat: repeat-x;
color: #004080;
font-family: sans-serif;
font-weight: 500;
text-decoration: none;
height: 25px !important;
width: 125px !important;
padding-left: 10px;
}

#mainNav a:hover {
background-image: url('images/nav2.gif');
background-repeat: repeat-x;
height: 25px !important;
width: 125px !important;
color: #004080;
font-family: sans-serif;
font-weight: 500;
text-decoration: none;

padding-left: 15px;
}

#mainNav a:active {
background-image: url('images/nav2.gif');
background-repeat: repeat-x;
height: 25px !important;
width: 125px !important;
color: #004080;
font-family: sans-serif;
font-weight: 500;
text-decoration: none;
padding-left: 15px;
}


Now, this does exactly what I want (that is making a 25x125px image with text on top, that when active or hovered over changes images) when using the browser IE. All of the other browsers I have used have done the same with a small difference. The background image is only the size of the space that the text is filling. So, basically, it looks like highlighted text.

I know there is a way to do this, but I am not sure if I can do it usign strictly CSS or if I have to add in another web developing language into the mix.

How could I pull this off without making individual images for each link?

Tyrial101
12-25-2006, 06:58 AM
Also, all of the above code has to validate with w3.org

I am making the site for a web design competition, so everything has to validate :)

Excavator
12-25-2006, 07:49 AM
Hello Tyrial101
Here are some rollover and menu examples I have made.
All pure CSS (no js) and they all validate.

Have a look at
rollover (http://www.nopeople.com/CSS/CSS_rollover/)
horizontal buttons (http://www.nopeople.com/CSS/menu_buttons_horizontal/)
vertical buttons (http://www.nopeople.com/CSS/menu_buttons_vertical/)

In your browser, click View/Source to see how they are done - the CSS in the <head> of each one.

Excavator
12-25-2006, 07:52 AM
And I have this example (http://www.nopeople.com/CSS/ulmenu/) that does it with no images.

Tyrial101
12-25-2006, 08:18 AM
Alright, thanks.

I was missing the Display: block; attribute



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum