Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Getting navigation links to align
Hi everyone,
I want my navigation bar to be aligned horizontally across my footer, but HOME appears above all the other links.
Any suggestions as to what I’m doing wrong ? The following coding is in the PRESENTATION > STYLE section …
#footnav
{
margin: -10px; 0px; 0px; -10px;
}
#footnav li
{
margin: 0px;
position: left;
float: none;
width: 18px;
background-color: #0099ff;
height: auto;
display: inline
}
#footnav ul li
{
display: inline;
}
#footnav a
{
display: inline;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #999;
text-transform: uppercase;
}
#footnav li ul
{
background-color: #CCC;
}
#footnav li ul li
{
display: inline;
width: 800px;
}
#footnav li ul li a
{
display: inline;
background-color: #24ff00;
}
Any guidance would be appreciated.
Graham
Offline
Re: Getting navigation links to align
er what does the html part look like?
Offline
Re: Getting navigation links to align
Hi thêta,
<!— BEGIN ph_closepage —>
</div> <!— close styled padding div from openpage —>
<div id=“footer”>
<div style=“width: 728px; height: 20px;”>
<ul>
<li><a href=“http://www.photohistories.com/About”>About</a></li>
<li><a href=“http://www.photohistories.com/Interviews”>Interviews</a></li>
<li><a href=“http://www.photohistories.com/Innovations”>Innovations</a></li>
<li><a href=“http://www.photohistories.com/Photo-Books”>Photo Books</a></li>
<li><a href=“http://www.photohistories.com/Photo-Histories”>Photo Histories</a></li>
<li><a href=“http://www.photohistories.com/events-competitions”>Events/Competitions/Grants</a></li>
</ul>
</li> <!— correct syntax: the full ul-li section lists belongs to the top level li —>
</ul>Best,
Graham
Offline
Re: Getting navigation links to align
ahh i see. looks like your “Home” link is in its own unordered list. any reason you need that?
without knowing the structure around your navigation, you can move the “Home” link:
<li><a href=“http://www.photohistories.com/”>Home</a>
into the unordered list of your other links like so:
<!— BEGIN ph_closepage —>
</div> <!— close styled padding div from openpage —> <div id="footer"> <div style="width: 728px; height: 20px;">
<div>
<ul id="footnav">
<li><a href="http://www.photohistories.com/">Home</a></li>
<li><a href="http://www.photohistories.com/About">About</a></li>
<li><a href="http://www.photohistories.com/Interviews">Interviews</a></li>
<li><a href="http://www.photohistories.com/Innovations">Innovations</a></li>
<li><a href="http://www.photohistories.com/Photo-Books">Photo Books</a></li>
<li><a href="http://www.photohistories.com/Photo-Histories">Photo Histories</a></li>
<li><a href="http://www.photohistories.com/events-competitions">Events/Competitions/Grants</a></li>
</ul>is this part of a theme/template? it looks like Home was purposely set to be in its own list for whatever reason. either way the above should work for you if thats what you want. if not, post again if it breaks the rest of your page.
Offline
Re: Getting navigation links to align
Yep. That is logical, but when I have tried it I get two HOMEs, one above the other.
Offline
Re: Getting navigation links to align
do you see “Home” twice in your html code? there should only be one now..
Offline
Re: Getting navigation links to align
Yes. Sorted. Help appreciated, although somehow I think I may need some more shortly.
Many thanks !
Offline
Re: Getting navigation links to align
not sure if i fixed anything but you’re welcome nonetheless!
Offline