Forum Moderators: not2easy

Message Too Old, No Replies

Two-Line Main Nav

"This & That" on Two Lines in CSS?

         

pab1953

11:18 am on Jan 20, 2009 (gmt 0)

10+ Year Member



In the example below, how do I put the list item "Extremely Unwieldy" on two lines -- within a horizontal nav -- with the words centered one top of the other?

<ul>
<li>Orange</li>
<li>Blue</li>
<li>Extremely Unwieldy</li>
<li>Purple</li>
<li>Green</li>
</ul>

Thanks.

dreamcatcher

1:30 pm on Jan 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As a rough guess:


<li><span class="first">Extremely</span><span class="second">Unwieldy</span></li>

li .first {
display: block;
text-align:center;
}
li .second {
display: block;
text-align:center;
}

dc

pab1953

2:45 pm on Jan 20, 2009 (gmt 0)

10+ Year Member



Well, DC, you've solved the "extremely unwieldy" part -- the two words do indeed sit above one other centered. And thank you for that. The challenge now becomes, how do you get Orange and Blue and Purple and Green to sit either side of "Extremely Unwieldy" in a horizontal nav -- inline -- and with those four items centered vertically?

simonuk

3:05 pm on Jan 20, 2009 (gmt 0)

10+ Year Member



How about:

ul { width: 580px; margin: 0px; padding: 0px; list-style-type: none; background-color: #FF9900; height: 50px; }
li { float: left; background-color: #66FFFF; display: block; width: 100px; text-align:center; margin-top: 17px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; }
li.special { margin-top:8px; }

With

<ul>
<li>Orange</li>
<li>Blue</li>
<li class="special">Extremely Unwieldy</li>
<li>Purple</li>
<li>Green</li>
</ul>

sectionq

2:14 am on Jan 21, 2009 (gmt 0)

10+ Year Member



That'll work, you could also do it with line-height and keep the margins the same...

li { float: left; background-color: #66FFFF; display: block; width: 100px; text-align:center; margin: 5px; line-height: 40px}
li.special { line-height: 20px }

simonuk

8:48 am on Jan 21, 2009 (gmt 0)

10+ Year Member



Even better :-)

pab1953

4:38 pm on Jan 21, 2009 (gmt 0)

10+ Year Member



Thank you - much appreciated!

pab1953

8:39 pm on Jan 21, 2009 (gmt 0)

10+ Year Member



One more question: How do I center the whole thing on the page?

sectionq

1:00 am on Jan 22, 2009 (gmt 0)

10+ Year Member



Best way's to put everything into a container and centre that, then everything else you add will automatically be centred too..

body {text-align:center} /* the text-align bits are needed for ie6 */
#container {text-align:left;width: 580px; margin: 0 auto}

<div id="container">
<ul>
<li>Orange</li>
<li>Blue</li>
<li class="special">Extremely Unwieldy</li>
<li>Purple</li>
<li>Green</li>
</ul>
<p>Some content</p>
</div>

pab1953

4:45 pm on Jan 22, 2009 (gmt 0)

10+ Year Member



One more question. Is there any way to adjust the space between the individual items? Specifically, using the sample given below, there is too much space between "Martins" and "Ride" and between "Ride" and "Sledds & Downhills." Is there any way of reducing this? Thanks.

#nav {font-size: 100%; color: #999; text-align: center; padding-top: 10px; padding-right: 10px; padding-bottom:10px;}
#nav ul {font-family: Tahoma, Geneva, sans-serif; width: 950px; margin: 0px; padding: 0px; list-style-type: none; background-color: #fff; height: 50px;}
#nav li {float: left; background-color: #fff; display: block; width: 100px; text-align:center; margin-top: 17px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;}
#nav li.special {margin-top:8px;}
#nav li a {text-decoration: none; color:#000;}
#nav li a:hover {color:#666;} #nav li a:visited {color:#000;}

<div id="nav">
<ul>
<li><a href="javascript:;">Regal</a></li>
<li class="special"><a href="javascript:;">Sevens Awilde</a></li>
<li class="special"><a href="javascript:;">Documents Delivered</a></li>
<li><a href="javascript:;">ABCD/AB/ABC</a></li>
<li><a href="javascript:;">Martins</a></li>
<li><a href="javascript:;">Ride</a></li>
<li class="special"><a href="javascript:;">Sledds & Downhills</a></li>
<li class="special"><a href="javascript:;">Reckles Motivees</a></li>
</ul>

sectionq

1:12 am on Jan 23, 2009 (gmt 0)

10+ Year Member



It's because you've got a set width of 100px in the #nav li so there's a bigger gap next to smaller words, you can take out the width and replace it with left/right padding for the gaps though this means you'll have to put a line break in for your double line menu items...like so...

#nav {font-size: 100%; color: #999; text-align: center; padding-top: 10px; padding-right: 10px; padding-bottom:10px;}
#nav ul {font-family: Tahoma, Geneva, sans-serif; width: 950px; margin: 0px; padding: 0px; list-style-type: none; background-color: #fff; height: 50px;}
#nav li {float: left; background-color: #fff; display: block; padding: 0 5px; text-align:center; margin-top: 17px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;}
#nav li.special {margin-top:8px;}
#nav li a {text-decoration: none; color:#000;}
#nav li a:hover {color:#666;} #nav li a:visited {color:#000;}

<div id="nav">
<ul>
<li><a href="javascript:;">Regal</a></li>
<li class="special"><a href="javascript:;">Sevens <br />Awilde</a></li>
<li class="special"><a href="javascript:;">Documents <br />Delivered</a></li>
<li><a href="javascript:;">ABCD/AB/ABC</a></li>
<li><a href="javascript:;">Martins</a></li>
<li><a href="javascript:;">Ride</a></li>
<li class="special"><a href="javascript:;">Sledds & <br />Downhills</a></li>
<li class="special"><a href="javascript:;">Reckles <br />Motivees</a></li>
</ul>

sQ

pab1953

1:40 pm on Feb 11, 2009 (gmt 0)

10+ Year Member



Belatedly but sincerely, thank you!