VPF::Выподающее меню - Форум программистов

ShadeUFO

Дата 11.4.2008, 08:51 (ссылка)

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

Загрузка ...

Новичок

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

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

Есть вот такая проблема:
написал выподающее горизонтально меню на HTML и CSS, с помощью DIV'a
вот код:

Код



<style type="text/css">  
<!--  
body {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 color: #000000;  
}  
body {  
 background-color: #FFFFFF;  
 margin-left: 0px;  
 margin-top: 0px;  
 margin-right: 0px;  
 margin-bottom: 0px;  
}  
.menu {  
 display: block;  
 width: 98%;  
 position: absolute;  
 height: 3em;  
 left: 1%;  
 top: 5%;  
 font-size: 12px;  
 text-transform: uppercase;  
 padding: 0px;  
}  
 
.pmenu2 {  
 display: block;  
 float: left;  
 width: 20%;  
 height: 3em;  
 vertical-align: middle;  
 margin-right: 3px;  
}  
.pmenu2 .ulu {  
 display:none;  
}  
.pmenu2:hover .ulu {  
 display:block;  
 margin-bottom:0px;  
 padding-bottom:10px;  
 border: 1px solid #333333;  
 margin-top: -1px;  
 padding-top: 10px;  
 margin-right: -2px;  
}  
 
.pmenu1 {  
 background-color: #dfdfdf;  
 text-align: center;  
 display: block;  
 height: 3em;  
 width: 100%;  
 padding-bottom:2px;  
 padding-top:1px;  
 padding-right: 0px;  
 padding-left: 0px;   
 vertical-align: middle;  
 margin-right: 2px;  
 border: 1px solid #333333;  
}  
.pmenu0 {  
 text-align: center;  
 display: block;  
 height: 3em;  
 width: 90%;  
 border-style: none;  
 margin: 0px;  
 vertical-align: middle;    
}  
-->  
</style>

Код



<div class="menu">  
<div class="pmenu2"  > 
    <div class="pmenu1"> 
        <div class="pmenu0">раздел1</div> 
    </div>  
    <div class="ulu">  
    раздел1.1<br>  
    раздел1.2<br>  
    раздел1.3<br>  
    раздел1.4<br>  
    раздел1.5  
    </div>  
</div>  
 
<div class="pmenu2"> 
    <div class="pmenu1"> 
        <div class="pmenu0">раздел2</div> 
    </div>  
    <div class="ulu">  
    раздел2.1<br>  
    раздел2.2<br> 
    раздел2.3<br>  
    раздел2.4<br>  
    раздел2.5  
    </div>  
</div>  
</div>

А вот как сделать тоже самое но спомощью таблиц немогу сообразить.
помагите плиз.
Зарание благодарен!

NDenis

Дата 11.4.2008, 09:16 (ссылка)

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

Загрузка ...

Опытный

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

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

лучше уж с помощью списков

ShadeUFO

Дата 11.4.2008, 10:17 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(NDenis @ 11.4.2008, 09:16

)

лучше уж с помощью списков

Это понятно.
Но с помощью, table, его потом проще будет собирать, да и с разрешением меньше проблем smile

bars80080

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

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

байки, ничего проще списков нет

NDenis

Дата 11.4.2008, 10:34 (ссылка)

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

Загрузка ...

Опытный

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

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

ShadeUFO, ага и куча лишних буковок в коде для создания одного пункта меню.
сравните сами:

Код


списком:
<ul>
 <li>Item 1</li>
</ul>
таблицей:
<table>
 <tr>
  <td>Item 1</td>
 </tr>
</table>

Я не лентяй, но просто списки для построения меню удобнее, правильнее и логичнее использовать.
PS: а статейку все-таки прочитайте smile

Это сообщение отредактировал(а) NDenis - 11.4.2008, 10:39

ShadeUFO

Дата 11.4.2008, 10:59 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(NDenis @ 11.4.2008, 10:34

)

PS: а статейку все-таки прочитайте

За статью спасибо! smile

Itsys

Дата 12.4.2008, 07:37 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

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

Цитата(NDenis @ 11.4.2008, 10:34

)

а статейку все-таки прочитайте

Хм у меня прям в примере из статьи баг: берем последний пункт "Contact Us" переходим мышью в подменю, после опускания мыши ниже "United Kingdom" меню пропадает. smile

Вопрос: как выбрать пункт "USA"?

ЗЫ IE 7

Добавлено через 43 секунды
В FF все ОК

ShadeUFO

Дата 14.4.2008, 11:52 (ссылка)

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

Загрузка ...

Новичок

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

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

Возникла вот такая сложность:
- нужно чтобы span'ы бали по всей длине div'а;
- и чтобы соответствовали высоте div'а
- и как сделать чтобы при нажатии на span выподал список меню

Код



<html>
<head>
    <title></title>
    <style type="text/css"> 
<!-- 
div{
    width: 100%; 
    height: 23px; 
    text-align: center; 
    border: 1px solid Black;
}
.sp{
    border-right: 1px solid Black;
    height: 100%; 
    text-align: center; 
    vertical-align: baseline;
}
--> 
</style>
</head>
<body>
<div>
       <span class="sp"><a href="#">раздел 1</a></span>
       <span class="sp"><a href="#">раздел 2</a></span>
       <span class="sp"><a href="#">раздел 3</a></span>
       <span class="sp"><a href="#">раздел 4</a></span>
       <span class="sp"><a href="#">раздел 5</a></span>
       <span class="sp"><a href="#">раздел 6</a></span>
</div>
</body>
</html>

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