1. svetkin

    17.01.2010

    0 ↑
    1 ↓
    Добрый день!!!!!

    есть такой макет сайтаЮ к слову, основанный на одной из раскладок, описанной на этом блоге:

    сама страница:
    <body> 
    <div class="header"></div>
    <div class="wrap">
    <div class="top_row">
      <div class="logo"><img src="/templates/spiren/images/logo.png" alt="РусХимСеть" /></div>
      <div class="menu">
        <jdoc:include type="modules" name="menu" style="xhtml" />
      </div>
    </div>
    <div class="main">
    <div class="content">
      <jdoc:include type="component" />
    </div>
    </div>
    <div class="empty_inner"> </div>
    <div class="content_footer">
      <div><img src="/templates/spiren/images/chemical.png" /></div>
    </div>
    </div>
    </div>
    <div class="footer"></div>
    </body>
    css к ней:
     {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }

    body {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12pt;
    	font-style: normal;
    	line-height: normal;
    	color: #000000;
    	background: url(/templates/spiren/images/bg_main.png) top repeat-x;
    	height: 100%;
    }
    .top_row {
    	height: 580px;
    	position: relative;
    }
    .header {
    	background-image: url(/templates/spiren/images/header.jpg);
    	position: absolute;
    	width: 100%;
    	margin: 0px auto;
    	height: 580px;
    	background-position: center;
    	background-repeat: no-repeat;
    	top: 0px;
    	left: 0px;
    }

    .menu {
    	position: relative;
    	top: 250px;
    	left: 80px;
    	width: 300px;
    }
    .wrap {
    	position: relative;
    	width: 990px;
    	margin: 0px auto;
    	height:auto !important;
    	height:100%;
    	min-height:100%;
    	top: 0px;
    	z-index: 1;
    }

    .logo {
    	top: 50px;
    	left: 0px;
    	position: absolute;
    }
    .footer {
    	height: 222px;
    	width: 100%;
    	background-image: url(/templates/spiren/images/bg_bottom.png);
    	background-repeat: repeat-x;
    	position: relative;
    	margin-top: -222px;
    }
    .empty_inner {
    	height: 20px;
    }
    .content_footer {
    	background-image: url(/templates/spiren/images/bg_footer.png);
    	background-repeat: repeat-x;
    }

    .main {
    	padding: 20px;
    }

    .menu-nav {
    	list-style-type: none;
    }

    .menu-nav li{
    	display: block;
    	height: 65px;
    	margin-bottom: 5px;
    }
    к слову так же скажу, что это шаблон для широко известной cms - Joomla.

    в элементе <div class="menu"> выводится соответсвенно меню, оно сделано при помощи списка, так вот если я хоче раздвинуть пункты меню и пишу 
    .menu-nav li{
    	margin-top: 5px;
    }
    то тогда, неожиданно сдвигаетс сверху элемент <div class="wrap">.

    пока сдела что сдвигаю через margin-bottom, но поведение для меня очень неожиданное, подскажите в чем дело????

Внимание! Это довольно старый топик, посты в него не попадут в новые, и их никто не увидит. Пишите пост, если хотите просто дополнить топик, а чтобы задать новый вопрос — начните новый.