Как сверстать этот момент слоями?

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

29.09.2005, 22:30
BNF

Столкнулся с проблемой, есть:

Код:

Код:

<div id="ddd"> * * * </div>

Как мне сделать так, чтобы размер "aaa" и "ccc" был фиксированно равный 20 пикселям, а "bbb" приняла бы автоматический ОСТАВШИЙСЯ размер?

вся эта строка во вложенном слое. Это по-моему только усложняет задачу.

Я ВСЁ ПЕРЕБРАЛ!!! Дошел до того, что в Опере такой момент начал работать, а в ИЕ никак...
Здесь профы верстальщики есть? подскажите че-нить...

Очень важно, чтобы при назначении на средний слой фонового цвета, он бы не наезжал на третий слой, у которого не будет фонового цвета.
30.09.2005, 00:49
Maler

Код:

<div id="ddd"> </div>

может так?!

Цитата:

Как мне сделать так, чтобы размер "aaa" и "ccc" был фиксированно равный 20 пикселям, а "bbb" приняла бы автоматический ОСТАВШИЙСЯ размер?

не понятен вопрос
30.09.2005, 01:00
BNF

нет так не подходит.. поясню.

имеется такая дизайнерская "строчка":

<слой: полупрозрачная картинка> | слой: некоторый текст (фоновое изображение в этом слое) | <ещё полупрозрачная картинка>

так вот боковые картинки фиксированного размера 20px. Они должны стоять по бокам. Они частично ПРОЗРАЧНЫ! Поэтому если сделать фоновое изображение среднего под 100%, то испрортится вид третьей картинки, т.к. фон идущий со второго (до конца окна браузера) будет виден под прозрачной третьей картинкой...

А хочется чтобы по бокам были картинки фиксированного 20пх, а в середине некоторый текст с фоновым изображением, КОТОРОЕ протягивается от первой картинки до второй (третья колонка), но никак не продолжается после последней колонки..
30.09.2005, 02:07
BNF

т.е. вся фигня упирается в то, чтобы создать трехблочный дизайн, где по бокам блоки фиксированной ширины, а середина динамического размера, но если ширина среднего: 100%, то это мешает тексту правого блока, т.к. у среднего есть ФОНовое изображение, которое и займет пространство под текстом правого блока
30.09.2005, 02:15
Woody-Creative

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>New Page 1</title> <style> body{ ****padding: 0px; ****margin: 0px; } #column1{ ****display: block; ****width: 20px; ****background-color: #FF0000; ****position: absolute; ****left: 0px; ****top: 0px; ****z-index: 2; } #column2{ ****display: block; ****float: left; ****background-color: #00FF00; ****width: 100%; ****position: absolute; ****z-index: 1; ****left: 0px; ****top: 0px; } #column3{ ****display: block; ****width: 20px; ****background-color: #0000FF; ****position: absolute; ****right: 0px; ****top: 0px; ****z-index: 3; } #text{ ****display: block; ****margin-left: 20px; ****margin-right: 20px; ****padding-left: 20px; ****padding-right: 20px; } </style> </head> <body> <div id="bodier"> ****<div id="column1">1-я колонка</div> ****<div id="column2"> *<div id="text">Текст во 2-ой колонке</div> ****</div> ****<div id="column3">3-я колонка</div> </div> </body> </html>

Могу порекомендовать только так [Only registered and activated users can see links. Click Here To Register...]
30.09.2005, 03:11
BNF

Хм, спасибо! Очень похоже на истину. По крайней мере уже ближе.
Если поставить в column2 стиль:
left: 20px;

то появляется горизонтальная полоса прокрутки... неужели его просто нереально заставить встать четко от конца первой колонки до начала третьей? и чтобы средняя при этом была динамического размера?

выполнял некоторые примеры с сайта w3c.org, не знаю пургу они какую-то несут:) Хотя в Опере и работает. А вот в ИЕ 6.0 никак не могу достичь подобного эффекта... и почему в ИЕ не воспринимается:
right: 10px;
как отступ от правой границы (экрана) ??
вот и проблема.....
30.09.2005, 04:27
2GoDoom

мда...

<div>
<div style="display: inline; background-color: #000000;">[img]/images/spacer.gif[/img]</div>
<div style="display: inline; width: 100%; background-color: #CCCCCC;">some text</div>
<div style="display: inline; background-color: #000000;">[img]/images/spacer.gif[/img]</</div>
</div>

Поидеи так должно работать =)
30.09.2005, 16:32
Maler

Код:

<table> <td width="20" style="background-color: #000000;"></div> <td width=" 100%" style="background-color: #CCCCCC;">some text</div> <td width="20" style="background-color: #000000;"></div> </table>

вот это тебе нужно
..и не одевай "трусы через голову"
30.09.2005, 20:48
BNF

Цитата:

Originally posted by Maler@Sep 30 2005, 11:32

Код:

<table> <td width="20" style="background-color: #000000;"></div> <td width=" 100%" style="background-color: #CCCCCC;">some text</div> <td width="20" style="background-color: #000000;"></div> </table>

вот это тебе нужно
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

через таблицы у меня уже сделано, они мне не нужны.
Читай вопрос внимательнее.
30.09.2005, 21:49
Maler

Цитата:

Originally posted by BNF@Sep 30 2005, 16:48
через таблицы у меня уже сделано, они мне не нужны.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
а что не устраивает в таблицах?
30.09.2005, 21:50
BNF

да и вообще не понял что за чудеса открывающиеся тэги td, а закрывают их div
30.09.2005, 21:51
BNF

Цитата:

Originally posted by Maler@Sep 30 2005, 11:32

Код:

<table> <td width="20" style="background-color: #000000;"></div> <td width=" 100%" style="background-color: #CCCCCC;">some text</div> <td width="20" style="background-color: #000000;"></div> </table>

вот это тебе нужно
..и не одевай "трусы через голову"
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>

Цитата:

Originally posted by Maler@Sep 30 2005, 16:49
а что не устраивает в таблицах?
<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...]
01.10.2005, 11:48
BNF

Цитата:

Originally posted by 2GoDoom@Sep 29 2005, 23:27
мда...

<div>
<div style="display: inline; background-color: #000000;">[img]/images/spacer.gif[/img]

<div style="display: inline; width: 100%; background-color: #CCCCCC;">some text</div>
<div style="display: inline; background-color: #000000;">[img]/images/spacer.gif[/img]</</div>
</div>

Поидеи так должно работать =)
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>[/quote]
так то оно так только на теории. В ИЕ 6.0 (хр сп2) 3 слоя стоят друг под другом, а не по горизонтали
01.10.2005, 22:23
Maler

Код:

<table> <td width="20" style="background-color: #000000;"></td> <td width=" 100%" style="background-color: #CCCCCC;">some text</td> <td width="20" style="background-color: #000000;"></td> </table>

так понятней?!

На кой тебе это нужно (слоями)? В твоем коде, все слои внутри одного дива, если ты думаешь что это будет грузится быстрее чем таблица, то тут ты ошибаешься. Если ты считаешь что это "круче", то удачи тебе.