Witam, pół nocy szukam sposobu jak wyśrodkowac menu i nigdzie nie moge znaleźć odpowiedzi na mój problem. Kombinowałem z margin 0 praktycznie w każdym miejscu. Połowiczny efekt uzyskałem dodając nowego diva który wszystko trzymał i nadając mu odpowiednie atrybuty ustawiłem menu na środku, jednak tło menu (czarny pasek) był tylko na szerokości zadanej divowi, a chcę żeby czarny pasek menu przebiegał przez całą stronę od lewej do prawej tak jak jest teraz.
Oto mój html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Black CSS Navigation with glowing texts</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<style type="text/css">
* { margin:0;
padding:0;
}
body { background:rgb(74,81,85); }
div#menu { margin:5px auto; }
div#copyright {
font:11px 'Trebuchet MS';
color:#222;
text-indent:30px;
padding:40px 0 0 0;
}
#n{margin:10px auto; background:#FFF; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
</style>
<div id="menu">
<ul class="menu">
<li><a href="index.html" class="parent"><span>Aktualności</span></a></li>
<li><a href="onas.html" class="parent"><span>O nas</span></a></li>
<li><a href="zasady.html" class="parent"><span>Zasady gry w darta</span></a></li>
<li><a href="jld.html" class="parent"><span>Jarocińska Liga Darta</span></a>
<ul>
<li><a href="#" class="parent"><span>Sezon 1</span></a>
<ul>
<li><a href="#"><span>Turniej 1</span></a></li>
<li><a href="#"><span>Turniej 2</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Sezon 2</span></a>
<ul>
<li><a href="#"><span>Turniej 1</span></a></li>
<li><a href="#"><span>Turniej 2</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Sezon 3</span></a>
<ul>
<li><a href="#"><span>Turniej 1</span></a></li>
<li><a href="#"><span>Turniej 2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Superliga</span></a></li>
<li class="last"><a href="#"><span>Kontakt</span></a></li>
</ul>
</div>
</body>
</html>
Tak wygląda css
/**
´úÂëŐűŔíŁş DIVCSS5
*/
/* menu::base */
div#menu {
height:41px;
background:url(../images/main-bg.png) repeat-x;
text-align:center;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
position:relative;
}
div#menu ul.menu {
padding-left: 30px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
text-align:center;
float:left;
}
div#menu li:hover>ul {
left: -2px;
}
div#menu a {
position: relative;
z-index: 10;
height: 41px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 14px Trebuchet MS;
margin-left:15px;
margin-right:15px;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu li.current a {}
div#menu span {
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
background-image: url(../images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
background-image: url(../images/item-pointer-mover.gif);
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color: #e5e5e5;
}
div#menu span {
margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(../images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
position: absolute;
top: 38px;
left: -999em;
width: 163px;
padding: 5px 0 0 0;
background: rgb(45,45,45);
margin-top:1px;
}
div#menu ul ul a {
padding: 0 0 0 15px;
height: auto;
float: none;
display: block;
line-height: 24px;
color: rgb(169,169,169);
}
div#menu ul ul span {
margin-top: 0;
padding-right: 15px;
_padding-right: 20px;
color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
}
/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }
/* lava lamp */
div#menu li.back {
background: url(../images/lava.png) no-repeat right -44px !important;
background-image: url(../images/lava.gif);
width: 13px;
height: 44px;
z-index: 8;
position: absolute;
margin: -1px 0 0 -5px;
}
div#menu li.back .left {
background: url(../images/lava.png) no-repeat top left !important;
background-image: url(../images/lava.gif);
height: 44px;
margin-right: 8px;
}
Z góry bardzo Wam dziękuję za pomoc
