Welcome to WebmasterWorld Guest from 54.144.48.252

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal CSS Menus, Centering "Heading" Text

     
3:01 am on Nov 23, 2004 (gmt 0)

10+ Year Member



Hi Everyone,

I can't seen to center the "headings" of my horizontal css dropdown menu. I am using Suckerfish's script. The headings are:

HOME ABOUT US JOIN NEWS EMAIL

The CSS..

body {
margin: 0px;
background-color: #eda;

}

#navbar { width: 90%;
font: 78%/1.5 arial, helvetica, serif;
background-color: #ffffec;
text-align: center;
padding: 0;
margin: .1em;
background: #eda;
text-align: left;
border: 1px solid #eda;
margin: 0 auto;
}

#nav, #nav ul {
list-style: none;
line-height: .9;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 0 0;
width: 61em;

}

#nav a {
display: block;
width: 10em;
color: #800000;
text-decoration: none;
padding: 0.5em 2em;

}

#nav a.daddy {
background-color: #;
}

#nav li {
float: left;
padding: 0;
width: 5em;
}

#nav li ul {
position: absolute;
left: -999em;
height: 0;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {
padding-right: 1em;
width: 10em
}
#nav li ul a {
width: 13em;
width: 13em;
}

#nav li ul ul {
margin: -1.75em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #eda;
}


<HTML>

<div id="navbar">
<ul id="nav">

<li><a href="#">HOME</a></li>
<li><a href="#" class="daddy">ABOUT US</a>
<ul>
<li><a href="#" class="daddy">OUR VISION</a></li>
<li><a href="#" class="daddy">LEADERSHIP</a></li>
<li><a href="#" class="daddy">ADVISORY BOARD</a></li>
<li><a href="#" class="daddy">BYLAWS</a></li>
<li><a href="#" class="daddy">DONATE</a></li>
<li><a href="#" class="daddy">PORTSIDE</a></li>
</ul></li>

<li><a href="#" class="daddy">JOIN US</a>
<ul>
<li><a href="#">MEMBERSHIP FORM</a></li>
<ul>
<li><a href="#">Mail-in printable Form</a></li>
</ul></li>
<li><a href="#">MEMBERSHIP GOODIES</a></li>
<li><a href="#">PUBLICATIONS</a></li>
<ul>
<li><a href="#">CORRESPONDER</a></li>
<ul><a href="#">Archives_Corresponder</a></li>
</ul></li>
<li><a href="#">DIALOGUE & INITIATIVE</a></li>
<ul>
<li> <a href="#">Archives_Dialogue</a></li>
</ul></li>
</ul></li>
<li><a href="#">CCDS STATEMENTS</a></li>
<li><a href="#">MEMBER STORIES</a></li>

</ul></li>
<li><a href="#" class="daddy">NEWS</a></li>
<ul>
<li><a href="#">CALENDAR</a></li>
<li><a href="#">NEWS ARTICLES</a></li>
<li><a href="#">ACTION ALERTS</a></li>
<li><a href="#">CCDS STATEMENTS</a></li>
<li><a href="#">EXTRA LINK</a></li>
</ul></li>
<li><a href="mailto:" class="daddy">EMAIL</a></li>
</ul>

Thanks,
Senmar

4:22 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Senmar50

>>centering headings

#nav li {
float: left;
padding: 0;
width: 5em;
}

#nav a {
display: block;
width: 10em;
color: #800000;
text-decoration: none;
padding: 0.5em 2em;
}

The #nav li items are the ones dictating the width of each individual heading, and at the minute the <a> anchor elements nested inside them are specified to be wider than them: this below will not fix all your code as I'm not sure exactly what other effects you want, but try changing this

#nav a {
display: block;
text-align: center;
width: 100%;
color: #800000;
text-decoration: none;
padding: 0.5em 0;
}

that is now saying you want the link to be 100% of the width of the parent <li> and then set text-align: center; on it, then also remove the left and right side padding which may cause you width error depending on text width, the center alignment should take care of it..

If that's not wide enough you should then try adjusting the width of the <li> and <ul> elements accordingly

Suzy

 

Featured Threads

Hot Threads This Week

Hot Threads This Month