Кажется, что он не работает в последней версии Chrome, но здесь мой код.
HTML
<div id="whole">
<div id="top">
<div id="logo">
<center><a href="http://www.starworldhair.com"><img src="/images/starworldhair_logo.png" alt="Star World Hair Logo" width="350" /></a>
</center>
</div>
</div>
<br />
<br />
<div id="topMenuContainer">
<ul id="topNav">
<li class='nav_whatsnew'><a href="http://www.starworldhair.com">Home</a>
</li>
<li class="nav_whatsnew"><a href="/our-products/">Our Products</a>
</li>
<li class="remihair"><a href="/brazilian-hair/">Brazilian</a>
<!-- <ul><li class='text'><a href='/Catalog/catproduct/details?brandid=35'>ALEXANDER</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=48'>RARE</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=49'>BARE & NATURAL</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=5'>GODDESS</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=4'>GODDESS SELECT</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=13'>GODDESS BUMP</a></li>
</ul> -->
</li>
<li class="weaves"><a href="/indian-hair/">Indian</a>
</li>
<li class="wigs"><a href="/peruvian-hair/">Peruvian</a>
</li>
<li class="allbrands"><a href="/chinese-yaki-hair/">Chinese Yaki</a>
</li>
<li class='nav_whatsnew'><a href="/about">About</a>
</li>
<li class='nav_whatsnew'><a href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
Все это в коде <div id="whole">
.
CSS:
#topMenuContainer {
/*position: absolute;*/
/*top: 152px;*/
/*left: 330px;*/
/*text-align: center;*/
/*width: 1005px;*/
/*height: 250px;*/
border: 0px dotted rgb(255, 0, 0);
display:block;
z-index:200;
/*-moz-box-shadow: 0px 4px 8px 0px #ccc;
-webkit-box-shadow: 0px 4px 8px 0px #ccc;
box-shadow: 0px 4px 8px 0px #ccc;*/
}
#topNav {
/*list-style: none;*/
/*padding: 0px;*/
/*margin: 0;*/
/*float: left;*/
width: 100%;
height:30px;
margin-bottom: -30px;
/*background: transparent;*/
}
#topNav li {
float: left;
display:block;
height:28px;
margin: 0;
border:0px #FF0000 solid;
padding: 0 0 0 0;
position: relative;
/*--Declare X and Y axis base for sub navigation--*/
list-style:none;
margin-left: 5px;
margin-right: 5px;
}
#topNav li a {
/*padding: 0px 0px;*/
height:30px;
width:100%;
/*line-height:100%;*/
display: block;
text-decoration: none;
/*text-indent: -3000px;*/
}
JS Fiddle воспроизводит сказанное выше.
Если вы хотите увидеть сайт, он находится по адресу http://starworldhair.com/. Попытка центрировать верхнее меню с логотипом.
Добавь это:
#topNav { text-align:center }
#topNav li { float:none; display:inline-block }
<center>
давно устарел (цитата: developer.mozilla.org/en-US/docs/Web/HTML/Element/center ), пожалуйста, используйте соответствующий элемент HTML (обычно<div>
), а затем используйте CSS для центр этого элемента,width: 50%; margin-left: auto; margin-right: auto;
обычно делает свое дело).<center>
?? В самом деле?