iTecHMeaT
Сообщение
13/03/2008 08:10
Копия темы
Вертикальное выравнивание в меню на списках .
Подскажите плиз: как выровнять ссылки по вертикали?
Табличкой сделать это можно без проблем. А как быть, если нужно сделать на списках?
Если бы ссылки были в одну строчку, проблем бы не возникло.
Рабочая версия: webfishki.ru/menu/
PS: приведу код:
li{float:left; width:100px; height:80px;}
a{display:block; width:100px; height:80px;}
Вертикальное выравнивание в меню на списках .
Подскажите плиз: как выровнять ссылки по вертикали?
Табличкой сделать это можно без проблем. А как быть, если нужно сделать на списках?
Если бы ссылки были в одну строчку, проблем бы не возникло.
Рабочая версия: webfishki.ru/menu/
PS: приведу код:
li{float:left; width:100px; height:80px;}
a{display:block; width:100px; height:80px;}
GTG
Сообщение
13/03/2008 08:16
Копия темы
.
div valign='middle'
или через style='vertical-align:middle'
.
div valign='middle'
или через style='vertical-align:middle'
alekciy
Сообщение
13/03/2008 17:29
Копия темы
.
Можно и так:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/..;>
<html xmlns="www.w3.org/1999/xhtml&quo..;>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
li{float:left; width:200px; height:80px;border: 1px solid red;text-align:center;list-style-type:none;}
a{display:block; width:100%; height:100%;font: 12px Arial;line-height:80px;}
a:hover{background:#000;color:#fff;}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Длинное название</a></li>
<li><a href="#">Тоже длинное название</li>
<li><a href="#">Пункт</a></li>
</ul>
</body>
</html>
[/code]
Плюсы: кроссбраузерно, логика дерева не нарушена (т.е. нет ячейки таблицы когда самой таблицы просто нет)
Минусы: текст должен быть однострочным.
.
Можно и так:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/..;>
<html xmlns="www.w3.org/1999/xhtml&quo..;>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style type="text/css">
li{float:left; width:200px; height:80px;border: 1px solid red;text-align:center;list-style-type:none;}
a{display:block; width:100%; height:100%;font: 12px Arial;line-height:80px;}
a:hover{background:#000;color:#fff;}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Длинное название</a></li>
<li><a href="#">Тоже длинное название</li>
<li><a href="#">Пункт</a></li>
</ul>
</body>
</html>
[/code]
Плюсы: кроссбраузерно, логика дерева не нарушена (т.е. нет ячейки таблицы когда самой таблицы просто нет)
Минусы: текст должен быть однострочным.
iTecHMeaT
Сообщение
13/03/2008 17:35
Копия темы
.
При этом мы потеряем вторую и третью строчки. Я не просто так сделал ширину блоков 100 пикселей, а чтобы было именно разное количество срок.
.
При этом мы потеряем вторую и третью строчки. Я не просто так сделал ширину блоков 100 пикселей, а чтобы было именно разное количество срок.
alekciy
Сообщение
13/03/2008 17:39
Копия темы
.
При таких советах складывается впечатление, что вы либо не заглядывали в спецификацию, либо ни когда в практике данное свойство не использовали.
.
При таких советах складывается впечатление, что вы либо не заглядывали в спецификацию, либо ни когда в практике данное свойство не использовали.
alekciy
Сообщение
13/03/2008 18:10
Копия темы
.
Безусловно. Именно поэтому я и указал этот минус. Но для главного меню (которое обычно однострочно) метод подходит как нельзя более кстати. По крайней мере я его часто использую.
.
Безусловно. Именно поэтому я и указал этот минус. Но для главного меню (которое обычно однострочно) метод подходит как нельзя более кстати. По крайней мере я его часто использую.
iTecHMeaT
Сообщение
13/03/2008 18:20
Копия темы
.
Я тоже часто использую, но однажды возникла необходимость сделать менб с разным количеством строк. Выкрутился разными паддингами, но это не лучший вариант.
.
Я тоже часто использую, но однажды возникла необходимость сделать менб с разным количеством строк. Выкрутился разными паддингами, но это не лучший вариант.
iTecHMeaT
Сообщение
17/03/2008 13:36
Копия темы
.
Эх, ну а куда же денутся при этом 2 и 3 строчки? :)
0
.
Эх, ну а куда же денутся при этом 2 и 3 строчки? :)