homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Horizontal CSS Menus, Centering "Heading" Text
Senmar50

10+ Year Member



 
Msg#: 5081 posted 3:01 am on Nov 23, 2004 (gmt 0)

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

 

SuzyUK

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



 
Msg#: 5081 posted 4:22 pm on Nov 23, 2004 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved