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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    CSS: background image not behind all text

    wanting background image only on bottom menu section but i can not seem to get the image to show behind all of the menu items.

    Code:
    <div class="header">
    <ul>
          <li class="firstmenuitem"><a href="#">Welcome</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
          <li><a href="#">Menu 6</a></li>
          <li><a href="#">Menu 7</a></li>
          <li><a href="#">Menu 8</a></li>
    </ul>
    <br style="clear: both; line-height: 8px;">
    <ul class="RoundMenuBox">
          <li class="customerfirst"><a href="#">Menu 9</a></li>
          <li><a href="#">Menu 10</a></li>
    </ul>
    <br style="clear: both;">
    </div>
    CSS
    Code:
    .header { margin: 0 auto; text-align: center; padding: 10px 10px 5px 10px; position: relative; font-size: 12px; }
    .header ul { display: block; text-align: center; width: 100%; list-style: none; padding: 0; height :12px; }
    .header li { padding: 0 8px 0 10px; color: #000; display: inline; position: relative; top: 30%; border-left: 2px solid #319cfe; }
    li.firstmenuitem { border-left: 0px; }
    li.customerfirst { border-left: 0px; }
    
    .Round_MenuBox { background:url(../images/RoundMenuBox.gif) no-repeat center center; }
    I have attached both the image i am using and my original photoshop file.

    can anyone see why the image is not showing correctly ?
    Attached Thumbnails Attached Thumbnails CSS: background image not behind all text-roundmenubox.gif  
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your classes don't match:

    Code:
    <ul class="RoundMenuBox">
    
    .Round_MenuBox { background:url(../images/RoundMenuBox.gif) no-repeat center center; }

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    opps sorry i copied the code in my live script, i did not have the _ in the CSS when i tested it first off

    i get the image above center and the text below center. ? obviously wanting the text to be center center of the image

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Remove the height from .header ul.

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    Remove the height from .header ul.
    thank you.

    I have opted to use this method instead of images but now have different views in IE than what is correctly showing in Firefox.

    also i wish for the bottom menu to be in the centre like the top menu, but can not seem to get this right even using a centered div


    Code:
    .header { margin: 0 auto; text-align: center; padding: 10px 10px 5px 10px; position: relative; font-size: 12px; }
    .header ul { display: block; text-align: center; width: 100%; list-style: none; padding: 0; height :12px; }
    .header li { padding: 0 8px 0 10px; color: #000; display: inline; position: relative; top: 30%; border-left: 2px solid #319cfe; }
    li.firstmenuitem { border-left: 0px; }
    li.customerfirst { border-left: 0px; }
    
    .RoundMenuBox { position: relative; background: #4B8EC3; margin: 0px 5px; width: 400px; color: #ffffff; }
    .rtopcolour1, .rbottomcolour1{ display: block; background: #ffffff; }
    .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background: #4B8EC3; line-height: 1px;}
    Code:
    <div class="header">
    <ul>
          <li class="firstmenuitem"><a href="#">Welcome</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Vehicles</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Quote Me</a></li>
          <li><a href="#">Bookings</a></li>
          <li><a href="#">Accounts</a></li>
          <li><a href="#">Accounts LOG OUT</a></li>
    </ul>
    <br style="clear: both; line-height: 8px;">
    <ul><div class="RoundMenuBox"><div class="rtopcolour1"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div><li class="customerfirst"><a href="#">Change password or email address</a></li><li><a href="#">Manage Passengers Details</a></li><div class="rbottomcolour1"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div></div></ul>
    <br style="clear: both;">
    </div>
    i have attached images of IE and Firefox views

    this is what doctype i have set..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    ..
    ..
    Attached Thumbnails Attached Thumbnails CSS: background image not behind all text-ie-view.gif   CSS: background image not behind all text-firefox-view.gif  

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'm confused now, since both your images show the lower menu not centred.

    However, I'd suggest adding:

    Code:
    *{margin:0;padding:0)
    to the top of your css (always best to do this anyway). IE indents lists via margin, so while you are setting the ul to padding:0 which will take care of all the other browsers, that might be why IE is different.


  •  

    Posting Permissions

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