frD-проблема с версткой меню

shkuter · June 28, 2007

есть меню на сайте http://www.alpari.org/

пытаюсь переверстать его

html:

 <div id="new_menu">
 <ul class="main_menu">
 <li class="main_menu_1"><a href="#" class="menu_link">Menu item</a>
 </li>
 <li class="main_menu_2"><a href="#">Menu item</a>
 </li>
 </ul>
 <ul class="main_menu">
 <li class="main_menu_1 current_menu"><a href="#">Menu item</a>
 <ul class="sub1">
 <li> <a href="#">Subhead 1Subhead 1Subhead 1</a>
 <ul class="sub2">
 <li> Subhead2 Subhead2 Subhead2
 </li>
 </ul>
 </li>
 </ul>
 </li>
 <li class="main_menu_2"><a href="#">Menu item</a>
 </li>
 </ul>
 <ul class="main_menu">
 <li class="main_menu_1"><a href="#">Menu item</a>
 </li>
 <li class="main_menu_2"><a href="#">Menu item</a>
 </li>
 </ul>
 <ul class="main_menu">
 <li class="main_menu_1"><a href="#">Menu item</a>
 </li>
 <li class="main_menu_2 current_menu"><a href="#">Menu item</a>
 </li>
 </ul>
 <ul class="main_menu">
 <li class="main_menu_1"><a href="#">Menu item</a>
 </li>
 <li class="main_menu_2"><a href="#">Menu item</a>
 </li>
 </ul>
 </div>

css:

*{
 padding: 0;
 margin: 0;
}

#new_menu{
 padding: 30px;
}

* html .main_menu{
 width: 10px;
}

* html .main_menu a{
 float: right;
 padding-left: 20px;
}

#new_menu ul.main_menu{
 min-width: 10px;
 float: left;
 padding-right: 4em;
 text-transform: uppercase;
 font-size: 11px;
 letter-spacing: 0.1em;
 list-style: none;
}

#new_menu ul.main_menu li a{
 padding-left: 20px;
}

#new_menu ul.main_menu li ul li a{
 padding: 0;
}

.main_menu_1 ul.sub1{
 text-transform: none;
 font-size: 12px;
 padding-left: 20px;
 padding-top: 80px;
 width: 10px;
 list-style: none;
}

.main_menu_2 ul.sub1{
 text-transform: none;
 font-size: 12px;
 padding-left: 20px;
 padding-top: 57px;
 width: 10px;
 list-style: none;
}


.main_menu_1 ul.sub2,
.main_menu_2 ul.sub2{
 text-transform: none;
 font-size: 12px;
 padding-left: 30px;
 width: 10px;
 list-style: none; 
}

#new_menu li{
 white-space: nowrap;
 height: 23px;
}

так вот в ie5-6 получаеся лажа, а в ie7, opera, ff все так как надо. весь день долблюсь, не могу ничего сделать...

подскажите в чем проблема

Scrum · June 29, 2007

а двумя отдельными блоками не покатит ?

shkuter · June 29, 2007

ширина пунктов меню неизвестна, а они должны выравниваться по левому краю

Scrum · June 29, 2007

не понял при чем здесь ширина и выравнивание по левому.

как бы предложил идею разделить на два блока

первый блок menu item

второй Subhead

или как ?

yopopt · June 29, 2007

Нда... В коде много мусора. Вот попробовал по быстрому поправить. Вставленное мной без отступов.

*{
 padding: 0;
 margin: 0;
}
#new_menu{
 padding: 30px;
}
#new_menu ul.main_menu{
width:120px;
 float: left;
 padding-right: 4em;
 text-transform: uppercase;
 font-size: 11px;
 letter-spacing: 0.1em;
 list-style: none;
}

#new_menu ul.main_menu li a{
 padding-left: 20px;
}

#new_menu ul.main_menu li ul li a{
 padding: 0;
}

.main_menu_1 ul.sub1{
 text-transform: none;
 font-size: 12px;
 padding-left: 20px;
 padding-top: 80px;
 width: auto;
 height:auto;
 list-style: none;
position:absolute;

}

.main_menu_2 ul.sub1{
 text-transform: none;
 font-size: 12px;
 padding-left: 20px;
 padding-top: 57px;
 width: 10px;
 list-style: none;
}


.main_menu_1 ul.sub2,
.main_menu_2 ul.sub2{
 text-transform: none;
 font-size: 12px;
 padding-left: 30px;
 width: 10px;
 list-style: none; 
}

#new_menu li{
 white-space: nowrap;
 height: 23px;
}

Если не устраивает фиксированная ширина пунктов меню, можно указать в процентах. Но ширина должна быть. Хаки как у Вас мне не нравятся.

Пришлось в код страницы добавить доктайп. Без него паддинги меню по разному считаются.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

А так же в

[*] перен?с ссылку меню( Menu item ) в другое место. Опять таки иначе у разных браузеров top:0; в разных местах.

 <li class="main_menu_1 current_menu">
 <ul class="sub1">
 <li> <a href="#">Subhead 1Subhead 1Subhead 1</a>
 <ul class="sub2">
 <li> Subhead2 Subhead2 Subhead2
 </li>
 </ul>
 </li>
 </ul>
 <a href="#">Menu item</a>
 </li>

Код ещ? нужно доработать. Удачи!

Scrum · June 29, 2007

ну и мои наброски по поводу двух блоков

<!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" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 #menu {
 width: 800px;
 float: left;
 }

 .menu_top {
 width: 100%;
 float: left;
 }
 .menu_top ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }

 .menu_top li {
 white-space: nowrap;
 height: 23px;
 float: left;
 display: block;
 padding-left: 4em;
 text-transform: uppercase;
 font-size: 11px;
 }


 /*]]>*/
 </style>
</head>

<body>
<div id="menu">

<div class="menu_top">
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</div>

<div class="menu_top">
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</div>

<div id="menu_bottom">
<ul class="sub1">
 <li> <a href="#">Subhead 1Subhead 1Subhead 1</a>
 <ul class="sub2">
 <li> Subhead2 Subhead2 Subhead2
 </li>
 </ul>
</div>

</div>
</body>

</html>

Sign In

frD-проблема с версткой меню

Question

shkuter

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

shkuter

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Обсуждения

Forums

Important Information