text alignment - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

text alignment

nav menu text will not align

brdwlsh

9:31 am on Feb 10, 2004 (gmt 0)

10+ Year Member

ok-
i have a horizontal navigation bar with multiple links.
the links are seperated using the word-spacing property.
one of the links is more than one word and i would like to avoid applying the word-spacing property to it.
i have done this by using <span class="nospace"> to contain the multi-word link. the .nospace selector is in the code below.
IE shows the link in question at a few pixels too high.
Mozilla shows the same link at a few pixels too low.
css newbie, am i going about this the wrong way?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>please help me</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
background-color:#CCC;
margin:5px 0px 0px 20px;
padding:0px 0px 0px 0px;
}
p.nav{
font-family:arial;
font-size:14px;
font-weight:600;
word-spacing:30px;
text-align:center;
vertical-align:middle;
color:FFF;
background-color:616161;
margin:0px 0px 0px 0px;
padding:2px 0px 2px 0px;
width:740px;
}
.nospace{
word-spacing:-1px;
vertical-align:middle;
width:110px;
}
-->
</style>
</head>


<body>
<p class="nav">
link
link
link
link
<span class="nospace">multi-word link</span>
link
</p>
</body>
</html>

domokun

9:45 am on Feb 10, 2004 (gmt 0)

10+ Year Member

seems like a lot of hard work to me!
do a search for

max design list-a-matic

in google and check out the horizontal list nav bar.
that can do everything you need it to and more

grahamstewart

10:29 am on Feb 10, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Okay here is how I would tackle the same problem.

First of all, the HTML. A nav bar is a 'list of links' so the obvious markup to use would be an unordered list (ul).

So heres my version of the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <title>please help me</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
</head> 
<body> 
<ul class="nav"> 
    <li>link</li> 
    <li>link</li> 
    <li>link</li> 
    <li>multi-word link</li> 
    <li>link</li> 
    <li>link</li> 
    <li>link</li> 
</ul> 
</body> 
</html>

Okay, thats got the markup done. Now we need to style it.
I'm going to modify your original design a little because I like to work with fluid layouts and resizable text, but you can change it back to a fixed width easily enough if you prefer.

<style type="text/css"> 
body{ 
    background-color:#ccc; 
    margin:5px 20px; 
    padding:0; 
} 
.nav { 
    display: block; 
    color:#fff; 
    background-color:#616161; 
    font:600 85% Arial,sans-serif; 
    text-align:center; 
    padding:2px; 
    margin:0; 
} 
.nav li { 
    display: inline; 
    padding: 0 1em; 
    margin: 0; 
} 
</style>

This CSS displays the <ul> tag as the dark gray nav bar block and changes the list items to appear inline with a 1em padding between each one.

Things to Note

The navbar is now as wide as the page and adjusts itself when you resize the window, even becoming multi-line if required.

The font size is given as a percentage so the page now responds properly to the user changing the text size in IE (View->Text Size).

'Shorthand' CSS combines several properties together to keep things small and neat (e.g. just using

font

instead of

font-family,font-size

and

font-weight

and specifying

margin:0

instead of

margin: 0px 0px 0px 0px

)

The use of 'semantic' HTML means the page is now usable without any stylesheet and will make more sense to text browsers and PDAs.

Enjoy.
GrahamS

grahamstewart

10:35 am on Feb 10, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

(Just checked the max design site and they suggest an approach very similar to mine, but having it summarised here is no bad thing so I'll let my post stand as it is).

brdwlsh

6:00 pm on Feb 10, 2004 (gmt 0)

10+ Year Member

thanks G.S.

i wasn't aware of the 'design:inline' property:value.
that makes things much less complicated.

i may dive into a liquid site design for this project--hopefully i can get it to work.

p.s. the max design site will be very helpful in the future, i'm sure.