Help with my Navigation Bar

[smonkcaptain]

Hey all,

 

I have a few querys with my Navigation bar i've made. Before i ask, here is the link to the navigation bar:

 

http://www.aviation-photographs.net/

 

The HTML code for the Nav Bar:

 

<ul>
<li style="border-right: 1px solid #333;"><a href="index.php">Home</a>
</li>
<li style="border-right: 1px solid #333;"><a href="#nogo">Photos  <font color="#FC3">↓</font></a>
<ul style="border: 1px solid black;">
<li style="width: 120px;"><a href="#nogo"><font color="#FC3">¤</font> Photo Search <font color="#FC3">¤</font></a></li>
<li style="width: 120px;"><a href="#nogo">Upload Your Photos!</a></li>
<li style="width: 120px;"><a href="#nogo">Top Shots <font color="#FC3">»</font></a></li>
</ul>
</li>
<li style="border-right: 1px solid #333;"><a href="#nogo">Members  <font color="#FC3">↓</font></a>
<ul style="border: 1px solid black;">
<li style="width: 120px;"><a href="#nogo"><font color="#FC3">¤</font> Userarea <font color="#FC3">¤</font></a></li>
<li style="width: 120px;"><a href="#nogo">User Profile</a></li>
<li style="width: 120px;"><a href="#nogo">Your Photos</a></li>
<li style="width: 120px;"><a href="#nogo">Queued Photos</a></li>
<li style="width: 120px;"><a href="#nogo">Update Profile</a></li>
<li style="width: 120px;"><a href="#nogo">Forgotten Password</a></li>
</ul>
</li>
<li style="border-right: 1px solid #333;"><a href="#nogo">A-P.net Prime</a>
<ul style="border: 1px solid black;">
<li style="width: 100px;"><a href="#nogo">What's it about?</a></li>
<li style="width: 100px;"><a href="#nogo"><font color="#FC3">¤</font> Join Now! <font color="#FC3">¤</font></a></li>
</ul>
</li>
<li style="border-right: 1px solid #333;"><a href="#nogo">Forums  <font color="#FC3">↓</font></a>
<ul style="border: 1px solid black;">
<li style="width: 100px;"><a href="#nogo">Aviation <font color="#FC3">»</font></a></li>
<li style="width: 100px;"><a href="#nogo">Photography <font color="#FC3">»</font></a></li>
</ul>
</li>
<li style="border-right: 1px solid #333;"><a href="#nogo">About Us  <font color="#FC3">↓</font></a>
<ul style="border: 1px solid black;">
<li style="width: 110px;"><a href="#nogo"><font color="#FC3">¤</font> Photo Use <font color="#FC3">¤</font></a></li>
<li style="width: 110px;"><a href="#nogo">How We Formed</a></li>
<li style="width: 110px;"><a href="#nogo">Terms & Conditions</a></li>
</ul>
</li>
<li style="border-right: 1px solid #333;"><a href="#nogo">Contact  <font color="#FC3">↓</font></a>
<ul style="border: 1px solid black;">
<li style="width: 100px;"><a href="#nogo">Our Team</a></li>
<li style="width: 100px;"><a href="#nogo">Photographer</a></li>
<li style="width: 100px;"><a href="#nogo"><font color="#FC3">¤</font> Contact Form <font color="#FC3">¤</font></a></li>
</ul>

 

The CSS:

 

#menu{
padding:0;
margin-left:0
}
#menu ul{
padding:0;
margin:0;

}
#menu li{
font-weight: bold;
position: relative;
float: left;
width:85px;
list-style: none;
margin: 0;
} 

#menu li a{
font-size: 10px;
height: 25px;
display:block;
text-decoration:none;
text-align: center;
line-height: 24px;
background-color: #505050;
color:#ababab;
} 

#menu li a:hover{
color: #FC3;
} 

#menu ul ul{
position: absolute;
top: 25px; 
visibility: hidden;
} 

#menu ul li:hover ul{
visibility:visible;
margin-left: -1px;
} 

 

I'd like some advice on how to text align the <li> text in the drop down box, while keeping the main 'Header' text centered like it is now.

 

I'd also like to know how to make a secondary drop down, from the <li> tag 'Top shots' and others....

 

Thankyou all for your help..

Jimmy Leaman

 

[linus72982]

If I read correctly what you were trying to do, just add a class to the LI portions you want to text-align and don't put the class on the portions you don't want to text align.

 

Add:

 

class="alignedText"

 

to each of the elements to be aligned and then add:

 

li.alignedText {text-align: center;}

 

(or whatever alignment you want) section to your CSS.

 

Is this what you meant?

[smonkcaptain]

Yeah,

 

Basically, when you hover over 'Photos', it will display a drop down menu. The text in the drop down menu i want to be aligned to the left while keeping the top 'Photos' text centered. This needs to apply to all the drop downs.

[linus72982]

Gotcha, yeah, the class attribute should work for what you need, it's a way to demarcate items that otherwise would be captured in the same style.  Another way you could do it, though frowned upon, is to add the alignment to the inline style of each element, but that's far more typing than you need and best practice is to separate content and layout to the maximum extent possible.

[smonkcaptain]

Thanks for your reply, however it's still not working.

 

I've added your CSS and then the class the the <li> tags that i want aligned however to no avail...

 

<li style="border-right: 1px solid #333;"><a href="#nogo">Photos  <font color="#FC3">↓</font></a>
<ul style="border: 1px solid black;">
<li style="width: 120px;" class="alignedText"><a href="#nogo"><font style="color: #FC3;">¤</font> Photo Search <font color="#FC3">¤</font></a></li>
<li style="width: 120px;" class="alignedText"><a href="#nogo">Upload Your Photos!</a></li>
<li style="width: 120px;" class="alignedText"><a href="#nogo">Top Shots <font color="#FC3">»</font></a></li>
</ul>
</li>

 

www.aviation-photographs.net

[linus72982]

Post the edited CSS if you could please.

[smonkcaptain]

#menu{
padding:0;
margin-left:0
}
#menu ul{
padding:0;
margin:0;

}
#menu li{
font-weight: bold;
position: relative;
float: left;
width:85px;
list-style: none;
margin: 0;
} 

#menu li a{
font-size: 10px;
height: 25px;
display:block;
text-decoration:none;
text-align: center;
line-height: 24px;
background-color: #505050;
color:#ababab;
} 

#menu li a:hover{
color: #FC3;
} 

#menu ul ul{
position: absolute;
top: 25px; 
visibility: hidden;
} 

#menu ul li:hover ul{
visibility:visible;
margin-left: -1px;
} 

li.alignedText {text-align: left;}

[linus72982]

Well, as I'm still not a complete expert, I may just not be seeing the problem, but now that I read the code a bit more I think the problem is that you've made all the <a> elements blocks with display:block which makes them 100% width and therefore trying to text-align them won't do anything.  Here's what I would do: move the class attributes I gave you earlier from the <li> elements to the <a> elements that you'd like to align and then change the css to a.alignedText instead of li.alignedText.  See if that works.

 

Outside of that, we might need to wait for someone else to help out :S

[smonkcaptain]

Thanks for your help, but yeah not working

 

Would you be able to help me with my 2nd question being 'How can i make a the drop down extended with "more options" as seen in this example:

http://koivi.com/css-menus/

 

Thanks

[AtlasC1]

Try adding a definite width to the <a> elements; does that work?

[smonkcaptain]

Nope, as the text varies in length, so setting the width at 100px cuts off some text, however setting to full width so that all text is visible, just keep's it all centered.