...

View Full Version : CSS Drop-Down Menu Help



number41baby
07-07-2011, 09: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, 10: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-07-2011, 11:36 PM
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, 06: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, 12: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, 03: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, 07: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, 08: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, 01: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum