Линия из 3х блоков

[snekaaa]

Как можно сделать линию средствами css ну или div-ов высотой в 1px чтоб вот слева был градиент и справа. Этой линией будет отделяться текст. Она должна растягиваться по ширине. Вот примерно что сделал:

<div id="1" style=" width:200px; height:3px; background:url(main_left.gif) #000 left no-repeat">
<div id="2" style=" width:100px; height:3px; background:url(main_right.gif) #000 right no-repeat"></div></div>

Помогите, мож есть простой способ решить проблемку) Почемуто не делает высоту в 1px;

[Aykroyd]

Не в IE ли, случайно, высоту в 1px не делает?

[snekaaa]

Путем шаманства добился отображения лини след способом:

<div style="background-color:#000000; width:100%; height:1px; overflow:hidden">
<div style="float:left; background:url(img/main_left.gif) left top no-repeat; overflow:hidden; width:100px;"></div>
<div style="float:right; background:url(img/main_right.gif) right top no-repeat; overflow:hidden; width:100px;"></div></div>

Возникает вопрос, как мне эту линию сделать чтоб справа сначало был отступ в 150 пикселов. Делаю маргины и педдинги, получается флоат отъезжает влево, а вот фон от первго дива остается

[Aykroyd]

[Только зарегистрированные пользователи могут видеть ссылки. ]

[snekaaa]

Так ну это я читал, а вот разобраться так и не могу. По сути надо ограничить float например блоком с position:relative это сработает? Или флоаты нельзя положить в стакан?

выход не лучший, но покачто слева и справа регулирую ширину, разными картинками

[Aykroyd]

Originally posted by snekaaa@Mar 5 2007, 16:33
Возникает вопрос, как мне эту линию сделать чтоб справа сначало был отступ в 150 пикселов. Делаю маргины и педдинги, получается флоат отъезжает влево, а вот фон от первго дива остается
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Эх...
"Справа сначало" – это откуда?
"Делаю маргины и педдинги" – для какого элемента?
"Флоат отъезжает влево" – какой именно флоат отъезжает?
"Первый див" – это который из трех?

Originally posted by snekaaa@Mar 6 2007, 09:49
По сути надо ограничить float например блоком с position:relative это сработает?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Конкретно для float-а это ничего не даст.

Originally posted by snekaaa@Mar 6 2007, 09:49
Или флоаты нельзя положить в стакан?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В стакан можно положить всё, что угодно.

Originally posted by snekaaa@Mar 6 2007, 09:49
выход не лучший, но покачто слева и справа регулирую ширину, разными картинками
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если я все-таки правильно понимаю ситуацию (в чем я сильно сомневаюсь) – это выход самый оптимальный.

[snekaaa]

Попробую... =)

<div id="line1"><div id="line2"></div><div id="line3"></div></div>

и стиль:

#line1 {background-color:#000; width:100%; height:1px; overflow:hidden}
#line2 {float:left; background:url(img/main_left.gif) left top no-repeat; overflow:hidden; width:100px;}
#line3 {float:right; background:url(img/main_right.gif) right top no-repeat; overflow:hidden; width:100px;}

В данный момент линия идет через всю ширину страницы. Делаю:

#line1 {background-color:#000; width:100%; height:1px; overflow:hidden; margin-right:150px;}
#line2 {float:left; background:url(img/main_left.gif) left top no-repeat; overflow:hidden; width:100px;}
#line3 {float:right; background:url(img/main_right.gif) right top no-repeat; overflow:hidden; width:100px; padding-right:150px;}

И справа появляеться скрол. Вопрос: Как его убрать или другие способы. Для наглядного просмотра: new.rang56.ru

[snekaaa]

И еще вопрос. В опере эти линии отображаются без градиента вообще ( только черные полоски((

[Aykroyd]

Ну теперь вот более-менее все ясно. Итак, по порядку:

Originally posted by snekaaa@Mar 7 2007, 09:43
И справа появляеться скрол.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Только не справа, а снизу (скролл этот – горизонтальный).
И он должен появляться. Видимо, Вы плохо читали предложенную мной статью.
Нельзя задавать для блочного элемента в прямом потоке правые и (или) левые отступы, рамки или поля, если для этого элемента задана ширина в 100%. Потому как в таком случае полная ширина такого элемента будет равна 100%+paddings+borders+margins.
Уберите width: 100% для <div id="line1">. Если этот блок находится в прямом потоке, Вам это свойство совсем ни к чему. Потому как блоки в прямом потоке и так занимают по ширине все доступное им пространство.

Originally posted by snekaaa@Mar 7 2007, 13:29
И еще вопрос. В опере эти линии отображаются без градиента вообще ( только черные полоски((
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
И не только в Опере. В Firefox-е тоже.
И причина этого заключается в том, что дивы с флоатами у Вас – пустые, и как следствие этого – схлопываются по высоте в нуль. Чтобы их фон отображался, необходимо им явно задать высоту. В данном случае – height: 1px;. И никаких overflow: hidden; для них не надо. Это свойство необходимо в данном контексте только для внешнего контейнера.

Вот так все должно быть:

<style type="text/css">
#line1 {background: #000000; height: 1px; margin-right: 150px; overflow: hidden;}
#line2 {background: url(img/main_left.gif) left top no-repeat; width: 100px; height: 1px; float: left;}
#line3 {background: url(img/main_right.gif) right top no-repeat; width: 100px; height: 1px; float: right;}
</style>

<div id="line1">
****<div id="line2"></div>
****<div id="line3"></div>
</div>

[snekaaa]

а вы и вправвду духовный гнаставник) =) курим книжки