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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2010
    Location
    Maidenhead, Berkshire, UK
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML/CSS Drop Down Menu Bar

    Hi,

    I am creating my first drop down horizontal menu bar using html and css. The menu bar is located at www.devoteddomains.com.

    I have two questions:

    1. I am having difficulty with the thin white lines that appear to the left of each menu bar element, how can I get rid of these? Also what would be the best way to implement proper dividers between each menu element?

    2. I want to have a different background on the the menu element if I am in that section of the website, how would I go about implementing this?

    This is the CSS for the menu bar:

    body{ behavior:url("csshover2.htc"); }
    .new-menu-shell {
    float: left;
    height: 70px;
    width: 960px;
    }
    .main-menu-section {
    float: left;
    width: 924px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(web-design-services-images/main-menu-bg.jpg);
    }
    .new-menu-leftcorner {
    background-image: url(web-design-services-images/menu-left-corner.jpg);
    float: left;
    height: 40px;
    width: 18px;
    }
    .new-menu-rightcorner {
    height: 40px;
    width: 18px;
    background-image: url(web-design-services-images/menu-right-corner.jpg);
    float: left;
    }



    .pd_menu_01 {
    float:left;
    padding:0;
    margin:0;
    color: #FFFFFF;
    border:0px none #004080;
    clear:both;
    width: 924px;
    } /*Color navigation bar normal mode*/
    .pd_menu_01 a, .pd_menu_01 a:visited {
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    color: #FFFFFF;
    background-color: #000000;
    text-decoration: none;
    background-image: url(web-design-services-images/main-menu-bg.jpg);
    background-repeat: repeat-x;
    }
    .pd_menu_01 ul {
    list-style-type:none;
    padding:0;
    margin:0;
    }
    .pd_menu_01 ul li {
    float:left;
    z-index:auto;
    border: 0px none #000000;
    position: relative;
    }
    .pd_menu_01 ul li a {
    color: #FFCC00;
    float:none!important;
    float:left;
    display:block;
    height:40px;
    line-height:40px;
    text-decoration:none;
    padding-top: 0;
    padding-right: 14px;
    padding-bottom: 0;
    padding-left: 14px;
    background-color: #FFFFFF;
    }
    .pd_menu_01 ul li ul {
    display:none;
    border:none;
    color: #000000;
    background: #000000;
    width: 1px;
    }
    .pd_menu_01 ul li:hover a {background-color:#000000; text-decoration:none; color:#FFCC00;} /*Color main cells hovering mode*/
    .pd_menu_01 ul li:hover ul {
    display:block;
    position:absolute;
    z-index:999;
    top:39px;
    margin-top:1px;
    left:0;
    }
    .pd_menu_01 ul li:hover ul li a {
    display:block;
    width:16em;
    height:auto;
    line-height:1.3em;
    color:#000000;
    background-image: url(web-design-services-images/menu-drop-down-bg.jpg);
    font-size: 11px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-bottom-color: #000000;
    border-left-color: #000000;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    top: 20px;
    } /*Color subcells normal mode*/
    .pd_menu_01 ul li:hover ul li a:hover {background-color:#FFFFFF; text-decoration:none;color:#FFCC00;} /*Color subcells hovering mode*/
    .pd_menu_01 ul li a:hover {text-decoration:none;color:#FFCC00;} /*Color main cells hovering mode*/
    .pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
    .pd_menu_01 ul li ul li a:visited { background-color:#FFFFFF; color:#000000;} /*Color subcells normal mode*/
    .pd_menu_01 ul li a:hover ul li a {
    display:block;
    width:12em;
    height:1px;
    line-height:1.3em;
    padding:4px 16px 4px 16px;
    color:#000000;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-bottom-color: #004080;
    border-left-color: #004080;
    }
    .pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/

    Thanks in advance,
    Peter

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The nesting of tags in your drop down is not correct. Take a look at http://www.htmldog.com/articles/suckerfish/dropdowns/ to see the proper nesting.
    <link href="web-design-services.css" rel="stylesheet" type="text/css" />
    Also you've linked the same style sheet multiple times and they are not inside <head> of your page. (See http://validator.w3.org/check?uri=ht...eddomains.com/)

    Fixing the above may help you to fix your original issue.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Maidenhead, Berkshire, UK
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your help, I have corrected the validation issues and have corrected the issue with nesting(I think?).

    Unfortunately this has not got rid of the white borders, any other suggestions?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    and have corrected the issue with nesting(I think?).
    Not really! The easy and best way to nest list elements is like
    Code:
    <ul>
    	<li><a href="http://www.devoteddomains.com">HOME</a></li>
            <li><a href="http://www.devoteddomains.com/website-design-packages.asp">WEBSITE DESIGN</a>
              <ul>
                   <li>........</li>
                   <li>........</li>
              </ul>
           </li>
           .........
    </ul>
    Also remove the repeated links to the same style sheet, which makes debugging a little difficult.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Apr 2010
    Location
    Maidenhead, Berkshire, UK
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry I forgot to upload the new page!

    The page now validates with the additional references to the CSS file removed (they were in inlclude files).

    I have arranged the list as you describe above, unfortunately I still have the white border.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Ah.. that border is there in your background image (http://www.devoteddomains.com/web-de...in-menu-bg.jpg) itself.
    Last edited by abduraooft; 05-15-2010 at 12:11 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Apr 2010
    Location
    Maidenhead, Berkshire, UK
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, can't believe I didn't notice that!

    What is the best way to put dividers between each of the menu elements?


  •  

    Posting Permissions

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