Log in

View Full Version : Sleek Pointer Menu 2


Kratlusker
01-24-2007, 03:46 AM
http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-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 :confused: . 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:


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

and


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; :confused:
jscheuer1
02-09-2007, 02:09 PM
#pointermenu2{
margin: 0 auto;
padding: 0;
width:500px;
}

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


<!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.