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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 01: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
    •