Jump to content
  • 0

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

Storm

Asked by Storm,

 Share

Question

Storm Explorer

Storm

Posted
Posted

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

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

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

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>

Link to comment
Share on other sites

29 answers to this question

Recommended Posts

  • 0
Storm Explorer

Storm

Posted
  • Author
Posted 

попробуй использовать флоат=лефт, тогда дивы будут в одной строке находиться и помести их в общий див, который будет по середине страницы...

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

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
  • Author
Posted

Чтобы контейнер с пунктами меню выровнялся по центру - ему нужно выставить ширину, иначе он растянется на вс? доступное пространство.

Посмотри код табличного решения. В н?м:

- div - вс? доступное пространство под меню;

- table - контейнер с пунктами меню, который всегда должен быть по центру;

- td - контейнеры пунктов меню. Ширина каждого не зада?тся, расширяется по контенту + можно добавить отступы внутри этого контейнера.

Загвоздка именно в том, что таблица может растягиваться по контенту, если ей не задать ширину, а div этого не умеет. Можно написать display:table, но в ИЕ6 работать не будет.

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
  • Author
Posted

Имею в виду, что если мы не выставим таблице ширину, то е? ширина будет минимальной и определяемой содержимым этой таблицы. Если в div мы не выставим ширину, то его ширина будет занимать всю доступную ширину - вот этого мне как раз и не надо.

Как заставить div растягиваться по содержимому(а не на вс? доступное пространство), и чтобы при этом он был по центру родительского блока?

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
  • Author
Posted

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

Если с помощью таблицы вс? настолько просто решается, я спрашивал знает ли кто-нибудь можно ли так же просто решить это без таблицы. А усложнять код скриптами только для того, чтобы не использовать таблицу, бессмысленно.

Link to comment
Share on other sites
  • 0
Storm Explorer

Storm

Posted
  • Author
Posted
надо комбинировать: где-то дивами, а там где сложно дивами - таблицей...

Я тоже придерживаюсь этого мнения.

Но вс?-таки интересно есть ли решение данной задачи, потому что такая структура меню встречается часто, а таблицами рекомендуют пользоваться только для представления табличных данных.

Может знатоки данного форума подбросят полезную идею?

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

на:

<!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">
body {
 margin: 0;
 padding: 0;
 text-align: center;
}
.holder {
 position: absolute;
 left: 50%;
}
.holder2 {
 margin-left: -50%;
 width: 100%;
 height: 100%;
}
.punkt {
 float: left;
 padding: 0px 20px;
 background-color: #777;
}
</style>
</head>

<body>
<div class ='holder'>
 <div class ='holder2'>
 <div class='punkt'>menu item 1</div>
 <div class='punkt'>menu item 2</div>
 <div class='punkt'>menu item 3</div>
 </div>
</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
ZoNT Explorer

ZoNT

Posted
Posted

вот так работает везде (ФФ, Опера, Сафари, ИЕ):

<!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">
body {
 margin: 0;
 padding: 0;
 text-align: center;
}
.holder {
 position: absolute;
 left: 50%;
}
.holder2 {
 position: relative;
 left: -50%;
 width: 100%;
 height: 100%;
}
.punkt {
 float: left;
 padding: 0px 20px;
 background-color: #777;
}
</style>
</head>

<body>
<div class ='holder'>
 <div class ='holder2'>
 <div class='punkt'>menu item 1</div>
 <div class='punkt'>menu item 2</div>
 <div class='punkt'>menu item 3</div>
 </div>
</div>
</body>
</html>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept