В?рстка меню слоями

Storm · April 4, 2008

Всем доброго времени суток.

С использованием таблицы эта задача решается очень просто, интересно можно ли е? решить также просто без использования таблиц.

Задача состоит в создании меню со следующими условиями:

1. ширина пунктов в явном виде не зада?тся;

2. меню должно плавать по центру родительского контейнера;

3. каждый пункт меню должен заключаться в отдельный контейнер, в котором можно будет задать отступы текста от его кра?в.

Если изложил не понятно, прилагаю код решения с применением таблицы:

<!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[*/
body {margin:0;padding:0;}
table {margin:0 auto;}
td {background:gray;padding:0 10px;}
/*]]>*/
</style>
</head>

<body>
<div>
 <table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td>menu item 1</td>
 <td>menu item 2</td>
 <td>menu item 3</td>
 </tr>
 </table>
</div>
</body>
</html>

ZoNT · April 4, 2008

Надо хотя-бы попытаться!

Azadi · April 5, 2008

Может быть получится развить решение В. Токмакова?

Storm · April 7, 2008

Может быть получится развить решение В. Токмакова?

Развиваю это решение.

Вот что получается.

<!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[*/
body {margin:0;padding:0;}
.align_center {position:relative;z-index:1;width:800px;background:green;}
.align_center_to_left {position:relative;right:50%;float:right;}
.align_center_to_right {position:relative;right:-50%;z-index:2;background:gray;}
.align_center_to_right div {background:blue;}
/*]]>*/
</style>
</head>

<body>
<div class="align_center">
 <div class="align_center_to_left">
 <div class="align_center_to_right">
 <div>menu 1</div>
 <div>  </div>
 <div>menu 2</div>
 <div>  </div>
 <div>menu 3</div>
 <div>  </div>
 <div>menu 4</div>
 <div style="clear:both;"></div>
 </div>
 </div>
 <div style="clear:both;"></div>
</div>
</body>
</html>

Теперь проблема в следующем: элементы меню (.align_center_to_right div) нужно выстроить по горизонтали.

Если пишу элементам float:left, то в ИЕ6 весь блок меню съезжает левее так, что его правый край совпадает с центральной линией .align_center.

Можно бы было задавать элементам меню display:inline, но тогда (что логично) нельзя будет задавать высоту самого блока с пунктом меню.

Наверное нет простого решения этой задачи. Если наращивать этот код, то табличный вариант останется оптимальнее.

kkthx · April 17, 2008

в ие6 все и будет съезжать, двигать вправо или влево надо тебе блок

.align_center_to_left

а в .align_center_to_right {position:relative;right:-50%;z-index:2;background:gray;} right: -50% вообще убрать

либо юзай хаки для ие6

Sign In

В?рстка меню слоями

Question

Storm

Link to comment

Share on other sites

29 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

kkthx

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information