Отступ между DIV

Вид для печати

23.01.2008, 17:07
Sergeant

Не могу никак разобраться с отступами в меню
Таблица, вложеный див и в диве список:
текст
линия (hr)
текст
линия (hr)
....

В опере отображается нормально, IE же линии подставляет отступы сверху и снизу, никак не могу убрать. Пример тут:
[Only registered and activated users can see links. Click Here To Register...]
23.01.2008, 23:27
Aykroyd

1. Включите браузеры в стандартный режим рендеринга.
2. Не используйте элемент hr, поскольку аспектам представления не место в структурной разметке.
3. Сделайте разметку синтаксически корректной.

Потом можно будет поговорить об отступах...
23.01.2008, 23:46
Sergeant

1. Даже не знаю что это [Only registered and activated users can see links. Click Here To Register...]
2. Что в таком случе использовать? Картинки?
3. Не пойму что значит синтаксически корректно. Со всеми отступами эксперементировал, значит откажусь от hr по вашему совету.
24.01.2008, 03:05
Aykroyd

Цитата:

Originally posted by Sergeant@Jan 24 2008, 00:46
1. Даже не знаю что это [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
[Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by Sergeant@Jan 24 2008, 00:46
2. Что в таком случе использовать? Картинки?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
[Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by Sergeant@Jan 24 2008, 00:46
3. Не пойму что значит синтаксически корректно.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
[Only registered and activated users can see links. Click Here To Register...]
24.01.2008, 14:29
Sergeant

Спасибо, что наставили на путь истинный [Only registered and activated users can see links. Click Here To Register...]
Надо отвыкать и воспитать силу воли не пользоваться ненужными тегами.

Переделал,
получилось такое
[Only registered and activated users can see links. Click Here To Register...]

теперь опера сьедает эти самые линии а IE все показывает.
24.01.2008, 14:51
Aykroyd

Может быть Вы все-таки соизволите !DOCTYPE указать, а?
24.01.2008, 15:30
Sergeant

Указал, хотя прочитав статью еще не совсем понял, для чего это нужно.
24.01.2008, 17:14
Aykroyd

Цитата:

Originally posted by Sergeant@Jan 24 2008, 16:30
Указал, хотя прочитав статью еще не совсем понял, для чего это нужно.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

Отлично. Давайте тогда еще [Only registered and activated users can see links. Click Here To Register...] исправим.
24.01.2008, 18:22
Sergeant

Исправил ошибки, меня даже поздравили, с тем, что прошел валидацию [Only registered and activated users can see links. Click Here To Register...]
25.01.2008, 10:28
Aykroyd

Цитата:

Originally posted by Sergeant@Jan 24 2008, 19:22
Исправил ошибки, меня даже поздравили, с тем, что прошел валидацию [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Замечательно! Примите по этому поводу и мои искренние поздравления.
Вы сумели добиться синтаксической корректности Вашего документа, теперь настало время позаботиться о семантической корректности. Давайте подправим еще два последних нюанса и после этого сразу займемся Вашими отступами.

В частности:

1. Уберем [Only registered and activated users can see links. Click Here To Register...] оттуда, где ей быть не положено.

2. Избавимся от некоторых [Only registered and activated users can see links. Click Here To Register...] и [Only registered and activated users can see links. Click Here To Register...] HTML, которые хоть и не являются официально нерекомендуемыми, но, тем не менее, предназначаются не для структурной разметки, а для визуального форматирования.
25.01.2008, 16:02
Sergeant

Экстаз...

Не думал, что у меня получится, но пришлось повозиться [Only registered and activated users can see links. Click Here To Register...]
В итоге вообще нет таблиц, даже не верится :dance:

Теперь в IE отображается так как надо, в опере же не видны линии. Если пытаюсь поставить пробел в списке, то линия показывается, но появляются большие отступы сверху и снизу.
25.01.2008, 20:03
Aykroyd
А вот так вот не покороче будет?
Код:

<!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> ***** [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] **** </div> </body> </html>
[attachment=7350:attachment]
[attachment=7351:attachment]
[attachment=7352:attachment]
25.01.2008, 21:42
Sergeant

Сказать спасибо - это ничего не сказать [Only registered and activated users can see links. Click Here To Register...]

А можно еще маленькую поправку подсказать.
По той же ссылке поправленый под мои нужды блок меню. Но отступ у линии сверху и снизу хочется сделать 1px, что-бы пунктир не примыкал вплотную к блоку (в аттаче попытался показать увеличенным)
25.01.2008, 22:12
Aykroyd
Код:

<!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> ***** [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] * [Only registered and activated users can see links. Click Here To Register...] **** </div> </body> </html>