Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
simple css question
Could someone please advise on the following.
If you look at my site you see the top menu consists of 8 links which take you to different sections (one of them rss).
I want another 8 links on a line below but can’t see how you do that. At the moment, if I add more links they scroll to the right and break the design.
The code is in a header form.
Thanks!
Offline
#2 2015-06-21 01:02:52
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: simple css question
Your HTML and CSS are:
<div id="header">
<ul id="nav-list">
<li class="current"><a href="/" title="">Home</a></li>
<li><a href="/photos/2015-06" title="">Archive</a></li>
<li><a href="/hills" title="">Hills</a></li>
<li><a href="/social" title="">Social</a></li>
<li><a href="/video" title="">Video</a></li>
<li><a href="/words" title="">Words</a></li>
<li><a href="/contact" title="">About</a></li>
<li><a href="/rss" title="">RSS</a></li>
</ul>
<div class="clear"> </div>
</div>ul#nav-list {
padding-top: 15px;
padding-left: 10px;
list-style: none;
font-size: 10px;
}
ul#nav-list li {
padding: 10px 5px;
display: inline;
letter-spacing: 0.2em;
text-transform: uppercase;
font-family: Georgia, Times, Times New Roman, serif;
font-size: 11px;
}
ul#nav-list li.current a {
border-bottom: 2px solid #f07832;
}
ul#nav-list li a {
padding: 4px 0px;
}I suggest:
<div id="header">
<ul id="nav-list">
<li class="current"><a href="/">Home</a></li>
<li><a href="/photos/2015-06">Archive</a></li>
<li><a href="/hills">Hills</a></li>
<li><a href="/social">Social</a></li>
<li><a href="/video">Video</a></li>
<li><a href="/words">Words</a></li>
<li><a href="/contact">About</a></li>
<li><a href="/rss">RSS</a></li>
</ul>
</div>#nav-list {
width: 540px;
padding: 0 0 0 20px;
list-style: none;
font-size: 10px;
}
#nav-list li {
width: auto;
float: left;
letter-spacing: .2em;
text-transform: uppercase;
font-family: Georgia, Times, Times New Roman, serif;
font-size: 11px;
}
#nav-list li a {
display: block;
padding: 10px 5px;
}
#nav-list li.current a {
border-bottom: 2px solid #f07832;
}
#nav-list:after {
content: "";
display: table;
clear: left;
}The <div class="clear"> </div> and the empty title="" you can remove. Define a fixed width for the #nav-list, for examle 540px. So you can add more lis and they will wrap to the next line.
Offline
Re: simple css question
Thanks :-)
I’ll try and do that
One question though: your code removes the ul before the nav-list in all cases.
Is that correct?
I don’t understand why the ul is there which means I understand even less, if that’s possible, why you would remove it.
Last edited by jameslomax (2015-06-21 19:12:06)
Offline
Re: simple css question
GugUser was just being tidy.
According the rules, the same class (.something) can appear multiple times in a page of source code, but an id (#something) only once. As such, it’s sufficient to reference it by its name #nav-list alone without saying that it is also a ul element as it can’t be confused with something else (if the site plays by the rules, that is). It doesn’t matter that it’s there either, it’s just overly specific. The only reason to include it, would be if somewhere else on another page in the homepage, #nav-list has been assigned to something else, and you want to address this particular case.
The important thing is that the ul has to be in the html code and GugUser has left it there :-) Most of the rest refers to clearing the float using alternative means that have become common practice after your site was originally coded.
Actually, it will already wrap onto the next line as soon as you add a fixed width to prevent it running into the logo. The padding needs adjusting a little to make it look good.
TXP Builders – finely-crafted code, design and txp
Offline
Re: simple css question
OK thanks. Think I worked that out and also found some code which keeps the two lines apart: line-height: 300%;
It’s always precarious for me because alterations may have implications I’m not aware of, but that seems to work.
More questions came up for me, however, which makes me think I could be wasting my time on that. Namely, I’m not sure its a good idea making links to categories which is what I had in mind, and since I really need more than eight extra links maybe I should consider something else along the lines of a nested menu.
Offline
Pages: 1