VPF::Убрать отстут в меню на div - Форум программистов

RobinHoodPHD

Дата 14.2.2011, 17:16 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 78
Регистрация: 12.8.2007
Где: Русь

Репутация: нет
Всего: 2

Доброго дня.

Сделал менюшку на 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>

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

Присоединённый файл ( Кол-во скачиваний: 12 )

__________.png 360,78 Kb

kovalenko123

Дата 14.2.2011, 18:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 229
Регистрация: 12.5.2008

Репутация: нет
Всего: 1

firebug mozilla

ayax2005

Дата 14.2.2011, 19:25 (ссылка)

(нет голосов)

Загрузка ...

echo $smile

Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 3
Всего: 11

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

--------------------

все вопросы - из-за неверной формулировки задачи

masterweek

Дата 17.2.2011, 10:23 (ссылка)

(нет голосов)

Загрузка ...

freelancer

Профиль
Группа: Участник
Сообщений: 31
Регистрация: 10.11.2008
Где: Ukrainian

Репутация: нет
Всего: нет

как то всё сложно. зачем пхп для вывода меню списка ссылок.

LeD4eG

Дата 21.2.2011, 21:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 29.9.2009
Где: Волгоград

Репутация: нет
Всего: 1

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

--------------------

Ты не успел стать для кого-то главным, кому-то очень нужным.....

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »