Sleek Pointer Menu 2

**Kratlusker** · 01-24-2007, 03:46 AM

http://www.dynamicdrive.com/style/cs...ointer-menu-2/

I have used this menu at my hp, but I want to center the menu. I might be a noob, but I cannot find the way to do that

. Could someone plz help me...

Thx in advance

**ddadmin** · 02-08-2007, 11:11 AM

Centering the menu is tricky in this case, since the menu items are floated (float: left). You may want to just manually specify a larger left margin to get the menu to display more towards the center of the page horizonally. The two lines to change are:

Code:

margin-left: 450px; /*menu offset from left edge of window*/

and

Code:

margin-left: 443px; /*menu offset from left edge of window in IE*/

The two values have been changed above.

**Kratlusker** · 02-09-2007, 05:07 AM

That one I did know, but if the visitors use a different screen resolution than me, then the menu will be misplaced.. is there anyway to tell it to have the same distance to both left and right side? or is it just bad luck?

but thanks for the help, I really appreciate it

**jscheuer1** · 02-09-2007, 05:54 AM

I would think that you would need to determine the width of the menu and set it to that. Then you could use:

margin:0 auto;

to center it at all resolutions.

**Kratlusker** · 02-09-2007, 08:47 AM

But how do I write it? lets say the menu is 500 px long, then I don't know where to put it and where to put the margin:0 auto;

**jscheuer1** · 02-09-2007, 02:09 PM

Code:

#pointermenu2{
margin: 0 auto;
padding: 0;
width:500px;
}

This requires that your page have a DOCTYPE like, at least (highlight green):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

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

#pointermenu2{
margin: 0 auto;
padding: 0;
width:480px;
}

#pointermenu2 ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background: #c00000 url(leftround2.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu2 ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu2 ul li{
display: inline;
}


#pointermenu2 ul li a{
float: left;
color: white;
font-weight: bold;
padding: 7px 9px 7px 5px;
text-decoration: none;
}

#pointermenu2 ul li a:visited{
color: white;
}


#pointermenu2 ul li a:hover, #pointermenu2 ul li a#selected{ /*hover and selected link*/
color: lightyellow;
background: transparent url(pointer.gif) bottom center no-repeat;
}

#pointermenu2 ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(rightround2.gif) bottom right no-repeat; /*optional right round corner*/
}

</style>
<!--[if IE]>
<style type="text/css">
#pointermenu2{
width:490px;
}
</style>
<![endif]-->
</head>
<body>
<div id="pointermenu2">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" id="selected">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="#" id="rightcorner">&nbsp;</a></li>
</ul>
<br style="clear: left">

</body>
</html>

Notice also the IE specific style, IE gets widths differently than other browsers. Scroll the code block down to see them highlighted dark red.

Thread: Sleek Pointer Menu 2

Thread Tools

Search Thread

Sleek Pointer Menu 2

Bookmarks

Bookmarks

Posting Permissions