как сделать резиновый двухколоночный макет с двумя разъезжающимся картинками по бокам

daggi · May 8, 2013

резиновый двухколоночный макет с двумя разьежающимся картинками по бокам для этого сайта. это я верстал макет, хочу переделать на резиновый но проблема в том что по бокам две картинки которые должны плавать при растяжении до краев экрана. вот сайт http://biotrof.ru/

вопрос как это реализовать?!

Edited May 8, 2013 by daggi

red4pony · May 8, 2013


.glavn{
width: 75%;
}

.lv,
.cnrlt,
.prv{
	 width:30%; /*от .glavn*/
	 margin-right: 5%;/*от .glavn*/
}

.prv{
	 margin-right: 0;
}

daggi · May 11, 2013


.glavn{
width: 75%;
}

.lv,
.cnrlt,
.prv{
	 width:30%; /*от .glavn*/
	 margin-right: 5%;/*от .glavn*/
}

.prv{
	 margin-right: 0;
}

проблема то в том чтобы к резиновому макету прикрепить две картинки по бокам. чтобы при растяжении контента эти кортинки гуляли по бокам одновременно! т.е. как на сайте(http://biotrof.ru/) я прикрепил их к тегу body! надеюсь правильно описал проблему...

Edited May 12, 2013 by daggi

red4pony · May 12, 2013

Ну если к <body> Вы прикрепили 2 картинки, значит использовали множественный фон.

Если выглядеть должно так:

То код следующий

HTML


<body>
<div class="wrap">
<div class="content">
<p>представляет собой размноженную чистую культуру полезнпредставляет собой размноженную чистую культуру полезнпредставляет собой размноженную чистую культуру полезнпредставляет собой размноженную чистую культуру полезнпредставляет собой размноженную чистую культуру полезнпредставляет собой размноженную</p>
</div>
</div>
</body>

CSS


body{
background: url(left.jpg) left top no-repeat,
			 url(right.jpg) right top no-repeat;
}

.wrap{
background-color: rgba(155,155,155, .7);
margin: 0 auto;
width:70%;
}

.content{
background-color: #fff;
margin: 0 auto;
padding: 20px;
width: 90%;
}

Для вытягивания во всю высоту либо контента больше, либо повторяющуюся картинку вставьте.

Множественный фон поддерживают не все браузеры.

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

На сайте (ссылку на который Вы дали), мой глаз не обнаружил ни резиновости, ни двух изображений у <body>. Или Вы говорили за серые повторяющиеся полоски?

P.S. Будьте внимательнее с боковыми изображениями, а именно с их шириной, чтобы не получилось что голое тело выглядывает на широких экранах.

red4pony · May 13, 2013

Топикстартет пишет мне в личку, а я тут излагаюсь.

У Вас получилось много свободного места справа, лучше для wrapper добавить width:80% и margin: 0 auto;(а другие margin убрать). Ну и придется подправить полупрозрачные полоски. В области контента справа много свободного места - уберите/распределите.

Еще раз повторюсь, множественные фоны поддерживают не все браузеры. Вместо полупрозрачных колонок задайте для контейнера цвет фона ввиде rgba(255, 255, 255 , 0.5) - браузеры которые не поддерживают данную модель цвета, проигнорируют эту запись(задайте выше фон для подстраховки) и никто из посетителей не поймет что тут что-то не так

Edited May 13, 2013 by red4pony

Sign In

как сделать резиновый двухколоночный макет с двумя разъезжающимся картинками по бокам

Question

daggi

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

red4pony

Link to comment

Share on other sites

daggi

Link to comment

Share on other sites

red4pony

Link to comment

Share on other sites

red4pony

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information