Вид для печати
Как можно сделать линию средствами css ну или div-ов высотой в 1px чтоб вот слева был градиент и справа. Этой линией будет отделяться текст. Она должна растягиваться по ширине. Вот примерно что сделал:
Помогите, мож есть простой способ решить проблемку) Почемуто не делает высоту в 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>
Не в IE ли, случайно, высоту в 1px не делает?
Путем шаманства добился отображения лини след способом:Возникает вопрос, как мне эту линию сделать чтоб справа сначало был отступ в 150 пикселов. Делаю маргины и педдинги, получается флоат отъезжает влево, а вот фон от первго дива остаетсяКод:<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>
[Only registered and activated users can see links. Click Here To Register...]
Так ну это я читал, а вот разобраться так и не могу. По сути надо ограничить float например блоком с position:relative это сработает? Или флоаты нельзя положить в стакан?
выход не лучший, но покачто слева и справа регулирую ширину, разными картинками
[/quote]Цитата:
Originally posted by snekaaa@Mar 5 2007, 16:33
Возникает вопрос, как мне эту линию сделать чтоб справа сначало был отступ в 150 пикселов. Делаю маргины и педдинги, получается флоат отъезжает влево, а вот фон от первго дива остается
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Эх...
"Справа сначало" – это откуда?
"Делаю маргины и педдинги" – для какого элемента?
"Флоат отъезжает влево" – какой именно флоат отъезжает?
"Первый див" – это который из трех?
[/quote]Цитата:
Originally posted by snekaaa@Mar 6 2007, 09:49
По сути надо ограничить float например блоком с position:relative это сработает?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Конкретно для float-а это ничего не даст.
[/quote]Цитата:
Originally posted by snekaaa@Mar 6 2007, 09:49
Или флоаты нельзя положить в стакан?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
В стакан можно положить всё, что угодно.
[/quote]Цитата:
Originally posted by snekaaa@Mar 6 2007, 09:49
выход не лучший, но покачто слева и справа регулирую ширину, разными картинками
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Если я все-таки правильно понимаю ситуацию (в чем я сильно сомневаюсь) – это выход самый оптимальный.
Попробую... =)
и стиль:Код:<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;}
И справа появляеться скрол. Вопрос: Как его убрать или другие способы. Для наглядного просмотра: new.rang56.ruКод:#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;}
И еще вопрос. В опере эти линии отображаются без градиента вообще ( только черные полоски((
Ну теперь вот более-менее все ясно. Итак, по порядку:
[/quote]Цитата:
Originally posted by snekaaa@Mar 7 2007, 09:43
И справа появляеться скрол.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Только не справа, а снизу (скролл этот – горизонтальный).
И он должен появляться. Видимо, Вы плохо читали предложенную мной статью.
Нельзя задавать для блочного элемента в прямом потоке правые и (или) левые отступы, рамки или поля, если для этого элемента задана ширина в 100%. Потому как в таком случае полная ширина такого элемента будет равна 100%+paddings+borders+margins.
Уберите width: 100% для <div id="line1">. Если этот блок находится в прямом потоке, Вам это свойство совсем ни к чему. Потому как блоки в прямом потоке и так занимают по ширине все доступное им пространство.
[/quote]Цитата:
Originally posted by snekaaa@Mar 7 2007, 13:29
И еще вопрос. В опере эти линии отображаются без градиента вообще ( только черные полоски((
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
И не только в Опере. В 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>
а вы и вправвду духовный гнаставник) =) курим книжки