PDA

View Full Version : CSS Drop-Down Menu Help



number41baby
07-07-2011, 10:02 PM
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

Sammy12
07-07-2011, 11:36 PM
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



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"

number41baby
07-08-2011, 12:36 AM
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

Sammy12
07-08-2011, 07:01 AM
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


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;
}




<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!

number41baby
07-08-2011, 01:43 PM
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

number41baby
07-09-2011, 04:06 PM
Sammi: read over your suggestions but still do not know what I am doing wrong. Frustrating as I think we are close.

Thanks.

DN

Sammy12
07-09-2011, 08:57 PM
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

number41baby
07-09-2011, 09:04 PM
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

number41baby
07-12-2011, 02:56 AM
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