У меня возникла проблема с настройкой меню для веб-сайта. Весь веб-сайт центрирован с полями: auto. По какой-то причине меню не центрируется, потому что это div, содержащий ссылки, кнопки. Каждая ссылка на кнопку имеет фоновое изображение. Это связано с тем, что изображения для кнопок имеют ширину 315 пикселей и включают накладываемые изображения. Например, когда пользователь удерживает это изображение, оно перемещается на 105 пикселей влево и показывает параметр наведения мыши. (Просмотреть код)
Это .html: (не обращайте внимания на идентификаторы кнопок, не хотелось менять: D, и да, я швед)
<body>
<!--Banner-->
<img src="/header/picture.png" />
<img src="/header/banner.png" />
<!--Pre-loads the images for menu-->
<img src="/header/start.png" style="display: none;" />
<img src="/header/bestall.png" style="display: none;" />
<img src="/header/priser.png" style="display: none;" />
<img src="/header/omoss.png" style="display: none;" />
<img src="/header/support.png" style="display: none;" />
<img src="/header/filarkiv.png" style="display: none;" />
<!--Menu-->
<div id="menu">
<a href="index.php" id="startknapp"></a>
<a href="index.php" id="priserknapp"></a>
<a href="index.php" id="bestallknapp"></a>
<a href="index.php" id="omossknapp"></a>
<a href="index.php" id="supportknapp"></a>
<a href="index.php" id="filarkivknapp"></a>
<img src="/header/box.png" id="box" />
</div>
<div id="content">
<p>Hi!</p>
<p>This is one paragraph</p>
<p>And this is another.</p>
</div>
</body>
И вот как я настроил кнопки в css для меню:
/*Startknappen*/
#startknapp
{
position: absolute;
left: 0px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(start.png);
}
#startknapp:hover
{
background-position: -105px 0;
}
#startknapp:active
{
text-decoration: none;
}
/*Priserknappen*/
#priserknapp
{
position: absolute;
left: 105px;
width: 105px;
height: 35px;
text-decoration: none;
background-image:url(priser.png);
}
#priserknapp:hover
{
background-position: -105px 0;
}
#priserknapp:active
{
text-decoration: none;
}
... and so on for the other buttons...
Вот некоторые из .css:
#html, body
{
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 800px;
height: 800px;
margin: auto;
}
#menu
{
height: 35px;
width: 800px;
}
#content
{
position: absolute;
width: 800px;
background-color: ;
}
Проблема теперь в том, что, как написано выше, меню не будет центрироваться. Однако, когда я делаю position: absolute; для #menu он центрируется. Единственная проблема в том, что содержимое затем перекрывает меню, а я этого не хочу. Я хочу, чтобы содержимое начиналось с 0 пикселей после нижней части меню. Вот несколько изображений того, как это выглядит:
Не центрируется: http://imageshack.us/photo/my-images/15/leftra.png
Позиция: Абсолютная: http://imageshack.us/photo/my-images/443/centerh.png
Надеюсь, кто-то может помочь мне сделать это правильно. Заранее спасибо :)
