Перейти к публикации

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


mumka

Рекомендованные сообщения

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

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 - верхний див в правой колонке.

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

Ссылка на сообщение
Поделиться на других сайтах

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) див в диве, тоесть див-имадж-див-имадж-/див-/див... тоесть совсем топорные методы пошли. больше вариантов не нашел пока :wacko: помогите пож-ста. короче перепсиховался весь, и в итоге плюнул и вставил таблицу, через таблицу получилось
	<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>

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах

2 Greeze

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

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

2 mumka

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

Ссылка на сообщение
Поделиться на других сайтах

2 EZS

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

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

Ссылка на сообщение
Поделиться на других сайтах
  • 2 недели спустя...

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

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

Ссылка на сообщение
Поделиться на других сайтах

Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

×
×
  • Создать...