Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Changing BG Color Via CSS

    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.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    style the <a> with block-level display - apply all the styling to that and do without the <div>
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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) ..

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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.

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's a 150x50px box. What's inside? An image? In which case:
    Code:
    <a href="wherever.html" id="button">Text to sum up image</a>
    With some CSS:
    Code:
    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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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. .

  • #8
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    .. the background image. I think you answered that already.

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    #replaced { background-image: url(blah.gif); text-index: -2000em }
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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?

  • #11
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try padding-right?
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #12
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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 ..

  • #13
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want 50px padding, set the width to 300 - 50 = 250px.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #14
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •