Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-01-03 16:52:24
- Joey
- Member
- From: Netherlands
- Registered: 2005-01-19
- Posts: 257
100% width navbar with padding
I have a navbar (just a ul list) on top of the page which should be 100% width. Now, that’s working fine when no padding is applied to the ul. But since I’m using absolute positioning I would like to move the entire navbar a few pixels to the left. So I thought, let’s use a padding-left for that. However, when I apply that padding-left, the width of the navbar increases in 100% + padding-left value. That is causing a horizontal scrollbar. How can I prevent this?
Regards,
Joey
Offline
Offline
Re: 100% width navbar with padding
Isn’t padding meant primarily to create white space on the interior of the margin, rather than for positioning?
Adjusting your margin, or reducing the ul indent might better accomplish what you want. This is what zero’s example is doing, I believe.
Mike
Offline
Re: 100% width navbar with padding
#nav li:first-child {
margin: 0 0 0 10px;
}Last edited by jm (2008-01-03 19:25:45)
Offline
Offline
#6 2008-01-03 23:25:51
- Joey
- Member
- From: Netherlands
- Registered: 2005-01-19
- Posts: 257
Re: 100% width navbar with padding
Yes, pseudo classes works.
maverick: a margin on the ul doesn’t solve the problem because I want the bar over 100% of the width. Then I should add an extra div (like zero said) to generate the red background. And that’s markup for presentational purpose — something I’d like to avoid.
I think I’ll go for the pseudo classes.
Last edited by Joey (2008-01-03 23:26:15)
Regards,
Joey
Offline
Re: 100% width navbar with padding
Is there any URL where we can see this and play a little with Firebug?
Offline
#8 2008-01-06 11:51:42
- Joey
- Member
- From: Netherlands
- Registered: 2005-01-19
- Posts: 257
Re: 100% width navbar with padding
Hmm I can’t get the pseudo class working either.
Here is the test file. I applied a padding-left: 150px; to the ul and that is causing the horizontal scrollbar. If somebody has a solution, please let me know ;-)
Last edited by Joey (2008-01-06 11:52:11)
Regards,
Joey
Offline
Re: 100% width navbar with padding
Hmm I can’t get the pseudo class working either.
Using some pseudo selectors like first-child ain’t so smart as IE, nor other older browsers won’t support it.
Some ways:
Number one: Container element
<div>
<ul>
<li><a href="en">Hey</a></li>
<li><a href="fi">Hei</a></li>
<li><a href="se">Hej</a></li>
<li><a href="jp">You</a></li>
</ul>
</div>div {
position: absolute;
top: 0;
left: 0;
background: #333;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
div ul {
padding: 0 0 0 150px;
}
div ul li {
display: inline;
}Number two: Percents
<ul>
<li><a href="en">Hey</a></li>
<li><a href="fi">Hei</a></li>
<li><a href="se">Hej</a></li>
<li><a href="jp">You</a></li>
</ul>ul {
position: absolute;
top: 0;
left: 0;
background: #333;
list-style: none;
margin: 0;
padding: 0 10% 0 10%;
width: 80%;
}
ul li {
display: inline;
}Number three: First class
<ul>
<li class="first"><a href="en">Hey</a></li>
<li><a href="fi">Hei</a></li>
<li><a href="se">Hej</a></li>
<li><a href="jp">You</a></li>
</ul>ul {
position: absolute;
top: 0;
left: 0;
background: #333;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul li {
display: inline;
}
ul li.first {
margin: 0 0 0 150px;
}Cheers!
Offline
Offline
Re: 100% width navbar with padding
IE requires a doctype for first:child to work
Do you mean :first-child? ;) And double check it with IE6. Wasn’t it that pseudos work only with links… could be… Oh yes, that it was. If I’m not completely unrestimating the power of Mighty Micky Mouse Internet Explorer 6. And IE7 also has it own faults with pseudos.
Cheers!
Offline
Re: 100% width navbar with padding
You’re right again, Jukka. This webpage is misleading. I just checked their live demo too, and it doesn’t work!
Sorry for passing on false information. Joey already has a doctype anyway so my comment was total rubbish.
Offline