...

View Full Version : Changing BG Color Via CSS



kraftomatic
01-19-2004, 09:08 PM
Hey All,

How would I change the background of a "box" via CSS? This would in effect, act like a rollover, but without any JS. This is what I have right now:

#teamBox {
height: 50px;
width: 150px;
margin: 0px;
padding: 0px;
background-color: #000000;
}

#teamBox a:hover {
height: 50px;
width: 150px;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}

<div id="teamBox">
<a href="#">text here</a>
</div>


This doesn't work. The "text here" link changes bg color, but I want the whole 150x50 pixel box to change color.

Any suggestions?

Thanks.

brothercake
01-19-2004, 09:33 PM
style the <a> with block-level display - apply all the styling to that and do without the <div>

kraftomatic
01-20-2004, 02:55 PM
Styling the "teamBox" <a> without the div? Won't this change all my <a> tags then? I only want this to happen in certain instances (one class for example) ..

me'
01-20-2004, 04:53 PM
If you want the div to change colour depending on whether it has a child in the :hover stage is impossible with CSS.

If you want a link to change colour on :hover, that's easy:
a { background-color: #000; display: block }
a:hover { background-color: #fff }display:block means it can take widths and heights, vertical margins etc. Block level elements are generally much easier to work with than inline elements.

kraftomatic
01-20-2004, 05:52 PM
I basically want a blue box to act as a button (ie rollover). So I make the 150 x 50 px box via CSS and then put <a> tags around it. I want the bg color of the box to change color.

So you're saying this isn't doable? I've seen it before somewhere .. Just can't get it to work.

Thanks.

me'
01-20-2004, 05:55 PM
It's a 150x50px box. What's inside? An image? In which case:
<a href="wherever.html" id="button">Text to sum up image</a>With some CSS:
a#button {
display: block;
width: 150px;
height: 50px;
background: #fff url(image.gif) no-repeat; }
a#button:hover { background-color: #f00 }If there's no image, just replace background: #fff url(image.gif) no-repeat; with background-color: #fff.

kraftomatic
01-20-2004, 07:26 PM
That's what I'm looking for. Thanks.

But what if I wanted to throw a thumbnail image within the "box"? Then it's more than just setting properties for the <a> tag. .

kraftomatic
01-20-2004, 07:34 PM
.. the background image. I think you answered that already. :)

me'
01-20-2004, 08:10 PM
Oh yeah, also, if you don't want the text to show up when using background-image, use one of the many image replacement techniques. My favourites is:
#replaced { background-image: url(blah.gif); text-index: -2000em }

kraftomatic
01-20-2004, 08:42 PM
I'm running into a slight snag .. Here's my code:

a#button {
display: block;
width: 300px;
height: 80px;
padding: 0 0 0 5px;
font-size: 12px;
color: #fff;
text-align: right;
text-decoration: none;
background: #A4493A url(images/header_teammates.gif) no-repeat;
}
a#button:hover { background-color: #CC3300; }


<a href="#" id="button"><br>eddie kraft<img src="images/spacer.gif" height="1" width="80" border="0" /></a>


So I have my box, with a thumbnail picture on the right side of it. I want to have text (2-3 rows) line up against the image. As you can see, I used a spacer gif (cringe) to move the text over, next to the thumbnail image.

However, if I want this to "work", I'll have to use the spacer gif on each row of text. There has to be a better way.

Any suggestions?

me'
01-20-2004, 08:44 PM
Try padding-right?

kraftomatic
01-20-2004, 08:51 PM
That extends the width of the whole box, and throws off the alignment of the image, so the box is now 300px + the padding.

Hmm ..

me'
01-20-2004, 08:51 PM
If you want 50px padding, set the width to 300 - 50 = 250px.

kraftomatic
01-20-2004, 08:56 PM
Through trial and error, I appeared to get it working via:

<a href="#" id="button"><br>row1 text<br>row2 text</a>

a#button {
display: block;
width: 230px;
height: 80px;
padding: 0 70px 0 0;
font-size: 12px;
color: #fff;
text-align: right;
text-decoration: none;
background: #A4493A url(images/header_teammates_eddie.gif) no-repeat;
}
a#button:hover { background-color: #CC3300; }

I guess that'll work. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum