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

**BNF** · 29.09.2005, 22:30

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

Код:

Код:

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

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

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

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

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

**Maler** · 30.09.2005, 00:49

Код:

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

может так?!

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

не понятен вопрос

**BNF** · 30.09.2005, 01:00

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

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

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

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

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

**BNF** · 30.09.2005, 02:07

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

**Woody-Creative** · 30.09.2005, 02:15

Код:

<!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>

Могу порекомендовать только так

**BNF** · 30.09.2005, 03:11

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

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

выполнял некоторые примеры с сайта w3c.org, не знаю пургу они какую-то несут

Хотя в Опере и работает. А вот в ИЕ 6.0 никак не могу достичь подобного эффекта... и почему в ИЕ не воспринимается:
right: 10px;
как отступ от правой границы (экрана) ??
вот и проблема.....

**2GoDoom** · 30.09.2005, 04:27

мда...

<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>

Поидеи так должно работать =)

**Maler** · 30.09.2005, 16: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>

вот это тебе нужно
..и не одевай "трусы через голову"

**BNF** · 30.09.2005, 20:48

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'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

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

**Maler** · 30.09.2005, 21:49

Originally posted by BNF@Sep 30 2005, 16:48
через таблицы у меня уже сделано, они мне не нужны.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
а что не устраивает в таблицах?

**BNF** · 30.09.2005, 21:50

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

**BNF** · 30.09.2005, 21:51

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'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Originally posted by Maler@Sep 30 2005, 16:49
а что не устраивает в таблицах?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

**BNF** · 01.10.2005, 11:48

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'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>[/quote]
так то оно так только на теории. В ИЕ 6.0 (хр сп2) 3 слоя стоят друг под другом, а не по горизонтали

**Maler** · 01.10.2005, 22:23

Код:

<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>

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

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

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

Опции темы

Поиск по теме

Отображение

Похожие темы

Технический момент вёрстки.

Кто какую музыку в данный момент слушает?

верстка слоями = help!

помогите со слоями

Работа со слоями

Ваши права