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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS Drop-Down Menu Help

    Hello,

    I have to issues (link below inside the xxx)

    xxxhttp://www.redtilldead.com/temp/index.phpxxx

    1 - The drop-down menu does not seem to be working

    2 - It does not seem to fit across the 780 pixels. If you look at the
    left side, it does not line up with a 780px jpg. I tried some things but, when I remove certain code, I lose the nice white spacers between the main navigation which obviously I need.

    If anyone can help me, I would apprecaite it.

    Struggling CSS guy.

    DN

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    ul li a {
    padding: 5px 28px 5px 28px;
    display: block;
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    background: #E10533;
    margin-left: 1px;
    white-space: nowrap;
    }
    You have a margin to the left. This is a common problem for all web developers! You can set the first li a to id="head" then set

    Code:
    ul li a#head {
     margin-left: 0;
    }
    You may have to increase the size of one of the li a's so that the width of the ul is equal to the width of the "archive"
    Last edited by Sammy12; 07-07-2011 at 10:41 PM.

  • Users who have thanked Sammy12 for this post:

    sohail_mubeen (07-07-2011)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    Thanks for the help.

    When I entered your code, I lost the colors (the main nav is red). I would like to keep the separations between the main navigation (the white lines).

    Also, the drop-down is not working.

    I think I am so close to getting this to work

    Suggestions?

    Thanks,

    DN

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    not just margin-left: 0; you have to keep the original code - just replace that one area

    let me type this all out for you:

    css
    Code:
    ul.nav { list-style: none; }
    ul.nav li { float: left; display: inline; }
    ul.nav li a { float: left; display: block; }
    ul.nav li a:hover { text-decoration: none; }
    
    ul#menu.nav {
     width: 780px;
     border-left: #FFF 1px solid;
     height: 25px; /* clears float */
    }
    ul#menu.nav li {
     height: 25px; /* clears float */
    }
    ul#menu.nav li a {
     width: 156px;
     height: 25px;
     line-height: 25px; /* when equal to the height, centers text vertically */
     text-align: center;
     background-color: red; /* you wanted the background red? */
     color: #222;
     border: #FFF 1px solid;
     border-left: 0;
    }
    Code:
    <ul id="menu" class="nav">
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
       <li><a href="#"></a></li>
    </ul>
    you are going to use a nav a lot throughout any website, so its best to create a class! therefore when you want to make another nav bar in the future, you have the basics (float: left;, etc) down already!
    Last edited by Sammy12; 07-08-2011 at 06:10 AM.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    I cannot tell you how much I appreciate the help.

    I tried to do what you said and it is not looking right

    This is my waterloo

    Hopefully last help.

    DN

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sammi: read over your suggestions but still do not know what I am doing wrong. Frustrating as I think we are close.

    Thanks.

    DN

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    can you upload the changes to the server, so I can see where the problem is. the code I posted above is the right code -thanks

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    xxxhttp://www.redtilldead.com/temp/index.phpxxx

    I cannot express how much I appreciate this.

    Been trying so many different examples but they just do not work.

    Thanks,

    DN

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    I tried a new source code I found. The drop-down works but it does not when I place it into a PHP code. Links within the xxx.

    Menu
    xxxhttp://www.redtilldead.com/temp-youtube/dropdownmenu.htmlxxx

    Page
    xxxhttp://www.redtilldead.com/temp-youtube/index.phpxxx

    Can anyone tell me why it is not working within the PHP page when it is working fine by itself?

    Thanks,

    DN


  •  

    Posting Permissions

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