Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Убрать отстут в меню на div


Автор: RobinHoodPHD 14.2.2011, 17:16
Доброго дня.

Сделал менюшку на div, обнаружился непонятный косяк: между дивом-контейнером и списком внутри него появляется отступ.
Вопрос: Как убрать отступ сверху?
Код

/*MENU LEFT*/
#left_menu {
    
}
ul.left_menu {
    padding : 0px;
    margin : 0;
    width : 20%;
    background-color: #F5F6F4;
}



ul.left_menu li {
    text-align : left;
    list-style-type : none;
    margin-top : 1px;
    width : auto;
}

ul.left_menu li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; 
}
/*DIVS*/
#mypage {
    width: 800px;
    margin: 0 auto;
}
/*


А это шаблон php генерящий менюшку:
Код

<div id="left_menu">
<?
if (isset($data["menu"])) { 
$mydata = $data["menu"];
}
else {
$mydata = $data;
}
    echo "<ul class=\"left_menu\"><li><a href=\"index.php?p=categories/all\"";
    echo "title=\"Каталог\">Каталог</a></li>";
    foreach ($mydata as $str) {
        echo "<li class=\"MenuCategories\"><a  href=\"index.php?p=category/".$str["IdClass"]."\"";
        echo "title=\"".$str["Title"]."\">".$str["Title"]."</a></li>";
    }
    echo "<li><a  href=\"index.php?p=contacts\"";
    echo "title=\"Как заказать?\">Как заказать?</a></li>";
    echo "<li><a  href=\"index.php?p=stock\"";
    echo "title=\"Готовые работы\">Готовые работы</a></li>";
    echo "<li><a  href=\"index.php?p=articles\"";
    echo "title=\"Статьи\">Статьи</a></li></ul>";
?>
</div>



Вот html который получается в результате:
Код

<body>
<div id="mypage">

<div id="header">
<img id="headerImage" src="../images/Main/Hydrangeas.jpg">
</div>
<div id="MainMenu">
<ul id="navigation">
<li><a href="index.php?p=categories/all">Каталог</a></li>
<li><a href="index.php?p=articles">Статьи</a></li>
<li><a href="index.php?p=articles/ready">Фотоотчеты</a></li>
<li><a href="index.php?p=contacts">Как заказать?</a></li>
<li><a href="index.php?p=basket">Корзина</a></li>
</ul>
</div><div id="left_menu">

<ul class="left_menu"><li><a href="index.php?p=categories/all"title="Каталог">Каталог</a></li><li class="MenuCategories"><a  href="index.php?p=category/1"title="Имя класса 1">Имя класса 1</a></li><li class="MenuCategories"><a  href="index.php?p=category/2"title="Имя класса 2">Имя класса 2</a></li><li class="MenuCategories"><a  href="index.php?p=category/3"title="Имя класса 3">Имя класса 3</a></li><li class="MenuCategories"><a  href="index.php?p=category/4"title="Имя класса 4">Имя класса 4</a></li><li><a  href="index.php?p=contacts"title="Как заказать?">Как заказать?</a></li><li><a  href="index.php?p=stock"title="Готовые работы">Готовые работы</a></li><li><a  href="index.php?p=articles"title="Статьи">Статьи</a></li></ul></div><div id="primary">
<ul class="listings clear">
        <li class="listing-card"> 
    <a class="listing-thumb" href="index.php?p=category/1" title="Имя класса 1">                
    <img src="/images/original//images/small/none.jpg" alt=""> </a> 
    <div class="listing-detail "> <p class="listing-title"> 
    <a href="index.php?p=category/1" title="Имя класса 1"> 
    Имя класса 1</a> </p> 
    </div> 
    </li> 
        <li class="listing-card"> 
    <a class="listing-thumb" href="index.php?p=category/2" title="Имя класса 2">                
    <img src="/images/original//images/small/P1020654.JPG" alt=""> </a> 
    <div class="listing-detail "> <p class="listing-title"> 
    <a href="index.php?p=category/2" title="Имя класса 2"> 
    Имя класса 2</a> </p> 
    </div> 
    </li> 
        <li class="listing-card"> 
    <a class="listing-thumb" href="index.php?p=category/3" title="Имя класса 3">                
    <img src="/images/original//images/small/?????????" alt=""> </a> 
    <div class="listing-detail "> <p class="listing-title"> 
    <a href="index.php?p=category/3" title="Имя класса 3"> 
    Имя класса 3</a> </p> 
    </div> 
    </li> 
        <li class="listing-card"> 
    <a class="listing-thumb" href="index.php?p=category/4" title="Имя класса 4">                
    <img src="/images/original//images/small/---" alt=""> </a> 
    <div class="listing-detail "> <p class="listing-title"> 
    <a href="index.php?p=category/4" title="Имя класса 4"> 
    Имя класса 4</a> </p> 
    </div> 
    </li> 
    </ul>

</div>





Спасибо за Ваши ответы.

Автор: kovalenko123 14.2.2011, 18:17
firebug mozilla

Автор: ayax2005 14.2.2011, 19:25
Вот дейльный совет даёт kovalenko123.
Вполне возможно, отсуп у вас наследуется.
Порпобуйте magrin:0, padding:0 для html,body и собственно для контейнера.

Автор: masterweek 17.2.2011, 10:23
как то всё сложно. зачем пхп для вывода меню списка ссылок.

Автор: LeD4eG 21.2.2011, 21:47
первое, что бросилось в глаза: название для метки и класса left_menu.....как-то так не хорошо совсем делать. да, допускается, но не хорошо.
зачем для ссылок, вложенных в <li> класса .left_menu, указывать display: block?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)