SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One div mimicing another - don't know why

    I am starting a re-design of a website based on the client's mock-up they have provided. It's going to be a very simple design. But, evidently, simple can be the most aggravating! LOL

    Here is the CSS: http://www.benefitsus.com/sitestyle.css
    Here is the page: http://www.benefitsus.com/index-build.php

    I have no idea why the #top-nav div is wanting to mimic the #left-nav div.
    The #top-nav div has a different background image (a long bar that I still need to resize) and no <li>. The 3 links for that div will be straight across, using a | as a divider. This you can see in the HTML.

    What am I missing that, surely must be plainly obvious, would be causing the #top-nav to mimic the #left-nav?
    Barbara E.

    Will add my site links when I'm more established here.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Instead of

    Code CSS:
    #left-nav ul li a, a:visited, a:hover {
    background: #FFFFFF url('/pix/nav-btn.png') no-repeat center top;
    height: 50px;
    text-decoration: none;
    display: block;
    padding: 16px 4px 0px 50px;
    color: #000000;
    }

    you should use

    Code CSS:
    #left-nav ul li a, #left-nav ul li a:visited, #left-nav ul li a:hover {
    background: #FFFFFF url('/pix/nav-btn.png') no-repeat center top;
    height: 50px;
    text-decoration: none;
    display: block;
    padding: 16px 4px 0px 50px;
    color: #000000;
    }

    you can remove the "ul li" part btw since you don't really need it (there are no links that are not in an li, and there are no li's that are not in an ul)

    Code CSS:
    #left-nav a, #left-nav a:visited, #left-nav a:hover {
    background: #FFFFFF url('/pix/nav-btn.png') no-repeat center top;
    height: 50px;
    text-decoration: none;
    display: block;
    padding: 16px 4px 0px 50px;
    color: #000000;
    }
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much - that solved the problem
    I knew it had to be something obvious.
    Hopefully, that will be my only issue with this site (fingers and toes crossed).
    Now to go fix the background bar in the #top-nav.
    Barbara E.

    Will add my site links when I'm more established here.


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
  •