1. Включите браузеры в стандартный режим рендеринга.
2. Не используйте элемент hr, поскольку аспектам представления не место в структурной разметке.
3. Сделайте разметку синтаксически корректной.
Потом можно будет поговорить об отступах...
1. Даже не знаю что это
2. Что в таком случе использовать? Картинки?
3. Не пойму что значит синтаксически корректно. Со всеми отступами эксперементировал, значит откажусь от hr по вашему совету.
Может быть Вы все-таки соизволите !DOCTYPE указать, а?
Указал, хотя прочитав статью еще не совсем понял, для чего это нужно.
Исправил ошибки, меня даже поздравили, с тем, что прошел валидацию
[/quote]
Замечательно! Примите по этому поводу и мои искренние поздравления.
Вы сумели добиться синтаксической корректности Вашего документа, теперь настало время позаботиться о семантической корректности. Давайте подправим еще два последних нюанса и после этого сразу займемся Вашими отступами.
В частности:
1. Уберем [Только зарегистрированные пользователи могут видеть ссылки. ] оттуда, где ей быть не положено.
2. Избавимся от некоторых [Только зарегистрированные пользователи могут видеть ссылки. ] и [Только зарегистрированные пользователи могут видеть ссылки. ] HTML, которые хоть и не являются официально нерекомендуемыми, но, тем не менее, предназначаются не для структурной разметки, а для визуального форматирования.
Экстаз...
Не думал, что у меня получится, но пришлось повозиться
В итоге вообще нет таблиц, даже не верится
Теперь в IE отображается так как надо, в опере же не видны линии. Если пытаюсь поставить пробел в списке, то линия показывается, но появляются большие отступы сверху и снизу.
А вот так вот не покороче будет?
[attachment=7350:attachment]Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} body {font-family: Tahoma; font-size: 62.5%;} #menu {background: url(bg1.gif) no-repeat left bottom; width: 172px; margin: 0px auto; padding-bottom: 11px;} #menu h3 {font-size: 1.8em; color: #FFFFFF; text-align: center; background: url(bg2.gif) no-repeat; height: 38px;} #menu ul {width: 170px; border-left: 1px #FF0000 solid; border-right: 1px #FF0000 solid; list-style: none; overflow: hidden;} #menu ul li {font-size: 1.1em; font-weight: bold; background: url(line.gif) repeat-x; width: 170px; margin-top: -1px;} #menu ul li a {color: #333333; text-decoration: none; display: block; padding: 5px; zoom: 1;} #menu ul li a:hover {color: #F10005; background: #E7E7E7; padding-left: 7px;} </style> </head> <body> <div id="menu"> ****<h3>Ссылки</h3> ****</div> </body> </html>
- *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] ****
[attachment=7351:attachment]
[attachment=7352:attachment]
Сказать спасибо - это ничего не сказать
А можно еще маленькую поправку подсказать.
По той же ссылке поправленый под мои нужды блок меню. Но отступ у линии сверху и снизу хочется сделать 1px, что-бы пунктир не примыкал вплотную к блоку (в аттаче попытался показать увеличенным)
Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} body {font-family: Tahoma; font-size: 62.5%;} #menu {background: url(bg1.gif) no-repeat left bottom; width: 172px; margin: 0px auto; padding-bottom: 11px;} #menu h3 {font-size: 1.8em; color: #FFFFFF; text-align: center; background: url(bg2.gif) no-repeat; height: 38px;} #menu ul {width: 170px; border-left: 1px #FF0000 solid; border-right: 1px #FF0000 solid; list-style: none; overflow: hidden;} #menu ul li {font-size: 1.1em; font-weight: bold; background: url(line.gif) repeat-x; width: 170px; margin: -1px 0px 2px 0px; padding-top: 1px;} #menu ul li a {color: #333333; text-decoration: none; display: block; padding: 5px; margin-top: 1px;} * html #menu ul li a {height: 1%; margin-top: 2px;} *+html #menu ul li a {height: 1%; margin-top: 2px;} #menu ul li a:hover {color: #F10005; background: #E7E7E7; padding-left: 7px;} </style> </head> <body> <div id="menu"> ****<h3>Ссылки</h3> ****</div> </body> </html>
- *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] *
- [Только зарегистрированные пользователи могут видеть ссылки. ] ****
Ваши права
