/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Center A Menu? Impossible?

[url]http://www.dynamicdrive.com/style/csslibrary/item/cf-navigation-menu-ii/P10/[/url]

Above, is the link to the website that I found this menu. The menu looks great on the page, but it’s off to the side and need s to be centered.

The HTML

[code=html]<div id=”cfnavbar”>
<ul>
<li><span><a href=”http://www.dynamicdrive.com” id=”leftcorner”>Home</a></span></li>
<li><a href=”http://www.dynamicdrive.com/new.htm”>DHTML</a></li>
<li><a href=”http://www.dynamicdrive.com/style/”>CSS</a></li>
<li><a href=”http://www.dynamicdrive.com/forums/”>Forums</a></li>
<li><a href=”http://tools.dynamicdrive.com/imageoptimizer/”>Gif Optimizer</a></li>
<li><a href=”http://tools.dynamicdrive.com/button/”>Button Maker</a></li>
<li><a href=”http://www.dynamicdrive.com/contact.htm” id=”rightcorner”>Contact</a></li>
</ul>
</div>

<br style=”clear: left” />
[/code]

The CSS

[CODE]<style type=”text/css”>

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#cfnavbar{
margin: 0;
padding: 0;
}

#cfnavbar ul{
background: url(media/bgpink.gif) bottom center repeat-x;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}

#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/dividerpink.gif) bottom right no-repeat;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/leftcornerpink.gif) bottom left no-repeat;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/rightcornerpink.gif) bottom right no-repeat;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
}

</style>
[/CODE]

I have tried:

position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;

[I]This one worked, but it wasn’t completely centered.[/I]

text-align: center;

[I]This does not work.[/I]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@Declan1991Jul 10.2010 — Give it a suitable width, and then margin auto. For example:#cfnavbar{
width:500px; [B]/* Choose suitable width */[/B]
margin: 0 [B]auto[/B];
padding: 0;
}

Copy linkTweet thisAlerts:
@SMTSauthorJul 10.2010 — Thankyou multiplicity 3! I can't believe it was that easy.
Copy linkTweet thisAlerts:
@KorJul 13.2010 — in fact you are dealing with the [I]left and right[/I] margins, as the code:
<i>
</i>margin: 0 auto;

has the pattern:

[B]margin:[I]top_and_bottom[/I] [I]right_and_left[/I];[/B]

It is in fact the short notation for:
<i>
</i>margin:0 auto 0 auto;

on the pattern:

[B]margin: [I]top right bottom left[/I];[/B]
×

Success!

Help @SMTS spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...