SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image disappearing?

    I have this defined in my style.css file:
    Code:
    #navigation {
    	background-image: url('images/nav_bg.jpg');
    	margin: auto;
    	line-height: 43px;
    }
    I can call it successfully like this:
    Code:
    <div id="navigation">Left Right</div>
    But when I try to use float (left/right) the background image disappears and turns white.

    I want to float certain links to the left, and certain links to the right in this <div> tag. Is there a better way than to use float?

    Thank you.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's not quite clear what's going on here. Could you post more code, or create a page example where we could see this happening?

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I want to float certain links to the left, and certain links to the right in this <div> tag.
    Hi,
    If you are wanting to float child elements in that div then you will need to force the #navigation to enclose it's floats. Then your background image will become visible as the div extends.

    To do that the easiest way is to set overflow:hidden on the parent.

    Code:
    #navigation {
    overflow:hidden;
    }

  4. #4
    SitePoint Addict
    Join Date
    Oct 2005
    Location
    Home
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ray, that did the trick. Thank you!


Bookmarks

Posting Permissions

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