Как сделать бэк такой?

[mumka 0]

двухколоночный макет на дивах, короче в правой колонке нада сделать чтобы фон был из трех секций (изображений):

1) правая фиксированная ширина

2) центральная растягивать под растягивание шаблона

3) левая фиксированная ширина

короче чтобы было вот так вот

вся ширина = 100px + Xpx + 100px

Xpx нада растягивать...

вот как это сделать на дивах у меня щас код такой:

		

<div class="right-1">

	<img src="{THEME}/images/head-l.jpg" alt="x"/><img src="{THEME}/images/head-m.jpg" alt="x" width="30%" height="202px" /><img src="{THEME}/images/head-r.jpg" alt="x" /> 

</div>

кусок CSS:

.right {float: right; width: 80%; background: #123; border: 1px solid #ccc; margin: 2px;}

.right-1 {margin: 2px;}

собственно right - див правой колонки, right-1 - верхний див в правой колонке.

как вариант подскажите, можно ли сделать центральную секцию на всю ширину этого дива, а сверху наляпать уже левую и правую, с центровкой по краям?

Изменено 18 июня 2008 пользователем mumka

[EzS 2]

Весь код в студию

Качай готовый

[mumka 0]

Gala у меня есть разметки... не хочу с них верстать, я привык руками с нуля.

короче, токо что переделал получилось, но немного не то:

кусок шаба

	<div class="right">

		<div class="right-1">

			<img src="{THEME}/images/head-l.jpg" alt="x"/><img src="{THEME}/images/head-r.jpg" alt="x" /> 

		</div>

		<div class="product">

			{speedbar}

			<h1>{include file="customers-name.tpl"}</h1>

			<hr>

			{info}{content}

		</div>

	</div>

кусок стиля

.right {float: right; width: 80%; background: #123; border: 1px solid #ccc; margin: 2px;}

.right-1 {margin: 2px; background-image: url("/img/head-m.jpg"); background-repeat: repeat-x;}

терь нада правую часть оттянуть, точнее правое изображение выровнять по правому краю... вопрос в том, что нада добавить чтобы ее к правом краю прилепить? через align="right" вставленный в правый имадж получается перенос всего изображения под фон с правой стороны что неужели, только у меня такой геморой был? пока ждал, было опробовано прижать к правому краю через: 1) position 2) align 3) padding 4) margin 5) див в диве, тоесть див-имадж-див-имадж-/див-/див... тоесть совсем топорные методы пошли. больше вариантов не нашел пока помогите пож-ста. короче перепсиховался весь, и в итоге плюнул и вставил таблицу, через таблицу получилось

	<div class="right">

		<div class="right-1">

<!--			<img src="{THEME}/images/head-l.jpg" alt="x"/>

			<img src="{THEME}/images/head-r.jpg" alt="x" />	-->

			<table width="100%" border="0">

			  <tr><td><img src="{THEME}/images/head-l.jpg" alt="x"/></td>

				  <td align="right"><img src="{THEME}/images/head-r.jpg" alt="x" /></td>

			  </tr>

			</table>				

		</div>

жаль что без нее никак.

Изменено 18 июня 2008 пользователем mumka

[Greeze 0]

пример с моей верстки.

#main { width: 100%; float: left; }

#content { margin: 0 100px; }

#left { float: left; width: 100px; margin-left: -100%; }

#right { float: left; width: 100px; margin-left: -100px; }

<div id="main">

<div id="content">

<!-- Middle column #Begin -->

<!-- Middle column #End -->

</div>

</div>

<div id="left">

<!-- Sidebar left #Begin -->

<!-- Sidebar left #End -->

</div>

<div id="right">

<!-- Sidebar right #Begin -->

<!-- Sidebar right #End -->

</div>

[EzS 2]

2 Greeze

Человек привык

не хочу с них верстать, я привык руками с нуля.

2 mumka

Здесь предоставлены два грамотных решения. Сложно воспользоваться?

Изменено 18 июня 2008 пользователем EzS

[mumka 0]

2 EZS

Воспользоваться то просто, только смысл какой в див с вложенным дивом, втыкать еще дивы для выравнивания 3х колоночного изображения?

Я бы не сказал что это граммотное решение... имхо должно быть проще... просто кто-то наверное знает но либо еще не прочел мое сообщение, либо не сказал.

[Greeze 0]

Я бы не сказал что это граммотное решение... имхо должно быть проще... просто кто-то наверное знает но либо еще не прочел мое сообщение, либо не сказал.

muwka, решения лучше этого скорее всего не существует..