Форум Сайтостроение Веб-строительство

Проблема со смещением главного меню

S
На сайте с 14.05.2009
Offline
93
sportmaster
566

Проблема в заключается в следующем.

На сайте будет 3 пункта меню: "Главная", "Портфолио" и "Контакты". Вот сама страничка http://bezdeposita.com/portfolio.html. А в разделе "Портфолио" под баннером раскрывается еще 7 пунктов ("Студия" и т.д.). Так вот, после перехода в "Портфолио" из-за того, что там вверху добавляется дополнительное меню, главное меню смещается вниз. Я это урегулировал след. образом - прописал margin только для раздела "Портфолио".

Код - #portfpage #menu {

margin-top:72px;

}

Везде все работает, но в Mozila Firefox все равно присутствует небольшое смещение - где-то на 1-2 пиксела. В чем может быть дело?

Проблема появляется именно тогда когда вы переходите из раздела "Главная" или "Контакты" в "Портфолио". И двигается не все меню, а только какой-то из разделов - на разных размерах шрифта двигаются разные разделы...

css

body {

background:#000;

font-family:"Times New Roman", Times, serif;

}

html, body {

height:100%;

margin:0;

}

a:link {

text-decoration:none;

color:#CCCCCC;

}

a:visited {

text-decoration:none;

color:#CCCCCC;

}

a:hover {

text-decoration:none;

color:#FFF;

}

a:active {

text-decoration:none;

}

#wrapper {

width:800px;

margin:0 auto;

position:relative;

min-height: 100%;

height: auto !important;

height: 100%;

}

#banner {

background:url(../img/banner.gif) no-repeat;

width:800px;

height:218px;

}

#banner h1, h2, h3 {

display:none;

}

#editionalMenu li {

display:inline;

}

#editionalMenu li a {

float:left;

padding:0 18px 10px 18px;

font-size:1.1em;

font-weight:bold;

}

#editionalMenu li a:hover {

background:url(../img/underline.gif) no-repeat center bottom;

}

#menu {

width:200px;

float:left;

font-size:1.6em;

margin-top:100px;

margin-left:27px;

font-family:Arial, Helvetica, sans-serif;

}

#menu li {

margin-bottom:35px;

}

#menu a {

font-weight:bold;

}

#portfpage #menu {

margin-top:72px;

}

#mainPicture {

background:url(../img/girl_main.jpg) no-repeat;

width:384px;

height:381px;

float:right;

}

#portfPicture {

background:url(../img/girl_portf.gif) no-repeat;

width:257px;

height:356px;

float:right;

margin-top:30px;

margin-right:30px;

}

#contactPicture {

background:url(../img/girl_contacts.jpg) no-repeat;

width:310px;

height:345px;

float:right;

}

#footer {

width:800px;

height:40px;

clear:both;

text-align:center;

background:#000 url(../img/line.gif) no-repeat left bottom;

position: relative;

margin:-45px auto 0 auto;

color:#FFF;

}

address {

font-size:.8em;

font-family:Arial, Helvetica, sans-serif;

color:#FFFFCC;

}

html

<!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>Наталья Новак - Главная страница</title>

<style type="text/css">

@import url(css/base.css);

</style>

</head>

<body id="portfpage">

<div id="wrapper">

<div id="banner">

<h1>Наталья Новак</h1>

<h2>Фотограф и визажист</h2>

<h3>8 904 600 62 34</h3>

</div>

<ul id="editionalMenu">

<li><a href="#">Студия</a></li>

<li><a href="#">Пленер</a></li>

<li><a href="#">Эротика</a></li>

<li><a href="#">Свадьбы</a></li>

<li><a href="#">Музыканты</a></li>

<li><a href="#">Дети/семья</a></li>

<li><a href="#">Макияж</a></li>

</ul>

<ul id="menu">

<li><a href="index1.html">Главная</a></li>

<li><a href="portfolio.html">Портфолио</a></li>

<li><a href="contact.html">Контакты</a></li>

</ul>

<div id="portfPicture">

</div>

</div>

<div id="footer">

<address><a href="www.natalyanovak.ru">www.natalyanovak.ru</a> <br />Copyright © 2009 | All Rights Reserved

</address>

</div>

</body>

</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий