• Locked
1 reply [Last post]
Fri, 2012-01-20 18:46
proffesoricon
Offline
Last seen: 1 year 21 weeks ago
newbie
Timezone: GMT-5
Joined: 2012-01-20
Posts: 1
Points: 2

Hello, having trouble centering the list inside the menu, any help would be greatly appreciated.
This is what the code looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css";>
* 	{
	margin: 0;
  	padding: 0;
}
body  {
	background: #fff; 
	margin: 0;
	padding: 0;
	text-align: center;
}
#wrapper {
	width: 1000px;
	background: #bbb;
	margin: 0 auto;
	text-align: left;
}
#header {
	margin: 0px;
	padding: 0px;
	height: 150px;
	background: #999; 
	position: relative;
}
#mainContent {
	background: #00f;
	margin: 0px;
	padding: 0px;
	height: 400px;
	width: 780px;
	position: absolute;
}
#sidebar {
	background: #000;
	margin: 0px;
	padding: 0px;
	width: 300;
	height: 400px;
	float: right;
}
#footer {
	background: #000;
	margin: 0px;
	padding: 0px;
	height: 50px;
	Clear: both;
	font-color: fff; 
}
 
/* --------------------------------Menu -----------------------------------*/
 
#menu
{	position: absolute;
	right: 174px;
	width: 1000px;
	bottom: 0px;
	text-align:center;
	margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111; /* Black Background */
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444,  #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c; 
}
#menu li
{
        float: left;
        padding: 0 0 10px 0;
	display: inline;
        position: relative;
	margin:0 auto;
}
#menu a
{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
        color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
        color: #fafafa;
}
#menu li:hover > ul
{
        display: block;
}
/* -------------------------Sub-menu------------------------------ */
 
#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    text-align: center;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#menu ul li
{
    float: none;
    margin: 0;
    display: inline;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#menu ul a
{
    padding: 10px;
        height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
        text-transform: none;
}
*html #menu ul a /* IE6 */
{
        height: 10px;
        width: 150px;
}
 
*:first-child+html #menu ul a /* IE7 */
{
        height: 10px;
        width: 150px;
}
#menu ul a:hover /* Sub Menu Hover Blue */
{
    background: #009;
        background: -moz-linear-gradient(#04acec,  #009);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#009));
        background: -webkit-linear-gradient(#04acec,  #009);
        background: -o-linear-gradient(#04acec,  #009);
        background: -ms-linear-gradient(#04acec,  #009);
        background: linear-gradient(#04acec,  #009);
}
#menu ul li:first-child a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after /* Hover Blue Arrow On Hover Over */
{
    border-bottom-color: #04acec;
}
#menu ul li:last-child a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 
 
/* Clear floated elements */
#menu:after
{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}
 
 
 
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
	<h1>Problem: Unable to successfully center the LIST in the Nav Menu.</h1>
 
 
<ul id="menu"> 
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a>
                <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Hello 1</a></li>
                        <li><a href="#">Development tools</a></li>
                        <li><a href="#">Web design</a></li>
                </ul>
        </li>
        <li><a href="#">Work</a>
        		<ul>
                        <li><a href="#">Hello 1</a></li>
                        <li><a href="#">Hello 2</a></li>
                        <li><a href="#">Graphic design</a></li>
                        <li><a href="#">Hello 4</a></li>
                        <li><a href="#">Hello 5</a></li>
                        <li><a href="#">Hello 6</a></li>
                </ul>
        </li>
        <li><a href="#">About</a>
        		<ul>
                        <li><a href="#">Hero</a></li>
                        <li><a href="#">Hello 1</a></li>
                        <li><a href="#">Hello 2</a></li>
                        <li><a href="#">Hello 3</a></li>
                        <li><a href="#">Hello 4</a></li>
                        <li><a href="#">Hello 5</a></li>
                        <li><a href="#">Hello 6</a></li>
                        <li><a href="#">Hello 7</a></li>
                </ul>
        </li>
        <li><a href="#">Contact</a></li> 
</ul> 
</div>
 
 
 
 
 
  <div id="mainContent">"mainContent"</div>
  <div id="sidebar">"sidebar"</div>
  <div id="footer">"footer"</div>
</div>
</body>
</html>

Top
Tags:
Mon, 2012-01-23 01:23
#1
gary.turner
gary.turner's picture
Online
Last seen: 1 min 32 sec ago
Moderator
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 8831
Points: 2784

Roughly 

#menu {
    background: -moz-linear-gradient(#444444, #111111) repeat scroll 0 0 transparent;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 0 2px 1px #9C9C9C;
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0 0;
    position: relative;
    text-align: center;
    width: 950px;
    }
 
#menu li {
    display: inline-block;
    padding: 0 0 10px;
    position: relative;
    }
 
#menu a {
    color: #999999;
    display: block;
    font: bold 12px/25px Arial,Helvetica;
    padding: 0 25px;
    text-decoration: none;
    text-shadow: 0 1px 0 #000000;
    text-transform: uppercase;
    }

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Top
  • Locked