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.

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 }

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.