Урезание картинок на определённой ширине.

bio · February 23, 2012

Здравствуйте! Помогите решить проблему. Нужно что бы на резиновом сайте две картинки(одна с левой стороны сайта, другая с правой ) на расширении 980px обрезались и при увеличении расширения постепенно появлялись, и когда полностью появятся то были прилеплены к левой и правой стороне сайта. Всегда решал эту задачу таблицами. Теперь вот ищу способ на дивах

Switch74 · February 23, 2012


<html>
<head>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
.left{position:absolute;top:0px;left:0px;width:50%;height:100%;background:#555 url('/img/') left no-repeat;}
.right{position:absolute;top:0px;right:0px;width:50%;height:100%;background:#999 url('/img/') right no-repeat;}
.content{position:relative;margin:0px auto;width:1000px;min-height:100%;background:#fff;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>

bio · February 23, 2012

Switch74, нужен вот такой же эффект только для резинового сайта.

Edited February 23, 2012 by bio

Switch74 · February 23, 2012

так сделай вместо ограничения 1000px для .content 100%

да и я тебе дал идею, тебе только .left и .right перенести в качестве фона в свой макет нужно и все

bio · February 23, 2012

так сделай вместо ограничения 1000px для .content 100%
да и я тебе дал идею, тебе только .left и .right перенести в качестве фона в свой макет нужно и все

Если я правильно понял то нужно сделать так:


<html>
<head>
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;min-width:980px;}
.left{position:absolute;top:0px;left:0px;width:200px;height:100%;background:#555 url('/img/') left no-repeat;}
.right{position:absolute;top:0px;right:0px;width:200px;height:100%;background:#999 url('/img/') right no-repeat;}
.content{position:relative;margin:0px auto;width:100%;min-height:100%;background:#fff; min-width:980px;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>

Если да то что-то не работает.

Edited February 23, 2012 by bio

Switch74 · February 23, 2012

а что именно не работает?

у вас сейчас .content с белым фоном закрывает эти обе картинки и их не видно

для html,body min-width:980px; не обязателен вроде

bio · February 23, 2012

а что именно не работает?
у вас сейчас .content с белым фоном закрывает эти обе картинки и их не видно
для html,body min-width:980px; не обязателен вроде

Да, сейчас просто белый фон.

Для того что бы Вы поняли что мне нужно приведу пример:


<html>
<head>
<style>
*{ vertical-align:top; margin:0; padding:0; border-collapse:collapse; border:none; border-spacing:0;}
table{	width:100%;	height:100%;}
.left, .right{ width:200px; background:#000}
.middle{ background:#666}
div{ width:980px;}
</style>
</head>
<body>
<table>
	<tr>
		<td class="left"></td>
		<td class="middle">
			<div></div>
		</td>
		<td class="right"></td>
	</tr>
</table>
</body>
</html>

Нужен тот же эффект только на дивах.

Edited February 23, 2012 by bio

Switch74 · February 23, 2012

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

и что-то я не заметил в вашем варианте резиновости, он ограничен 980px

Edited February 23, 2012 by Switch74

bio · February 24, 2012

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

Именно, первое решение делает тоже самое, для сайта с фиксированной шириной. А при выставлении ширины 100% боковых картинок не видно.

Он ограничен на минимальной ширине, при большем расширении сайт резиновый.

Edited February 24, 2012 by bio

Switch74 · February 24, 2012

естесно их и не будет видно если вы вставите 100%. вы сами определитесь что вам нужно:

для резинового сайта не нужны дополнительные боковые фоны для больших экранов это требуется только для сайтов ограниченных по ширине

Oldpepper · February 25, 2012

Не хотелось бы начинать новую тему, мне показалось, что я сейчас в теме, которая близка к моему вопросу, но если нет - сори за офтоп.

Вопрос вот в чем:

Пояснения:

Вот пример сайта - http://www.stroi-kom.ru/

Центральная колонка - башенный кран и строящийся дом. При переходе на страницу, к примеру, "Наши объекты" (http://www.stroi-kom.ru/razdel/5/), центральная колонка увеличилась,

дом и кран ушли вниз, свободное место заняла картинка с небом, нарезанная и размноженная с помощью repeat-y

Код в этом месте такой (взял через исходный код в браузере):


<td background="/images/px2.gif" height="100%" style="background-repeat: repeat-y;">
</td></tr>
<tr>
<td><img src="/images/c1.jpg"/></td>
</tr>
<tr>
<td><img src="/images/c2.jpg"/></td>
</tr>
<tr>
<td><img src="/images/c3.jpg"/></td>
</tr>
<tr>
<td><img src="/images/c4.jpg"/></td>
</tr>
</tbody>

Вопрос: как реализовать привязку картинки к подвалу. Я вижу, что в этом коде ничего о позиционировании картинок нет. Пытаюсь перенести на CSS, но запутался.

Кто подскажет?

И второй вопрос касается картинки в заголовке. Там похожая схема, только основная картинка стоит слева, а нарезанная - справа.

Шаблон резиновый.

Заранее спасибо за подсказку или ссылку где искать ответ.

Switch74 · February 25, 2012

1. здесь нет привязки картинки к подвалу, дом и кран - 4 состыкованные картинки которые стоят на своем месте, перед ними есть ячейка растягивающаяся на 100% она и отталкивает их в самый низ.

2. там тоже все на таблицах с width:100% они тупо занимают все предоставленное им пространство

Oldpepper · February 25, 2012

1. здесь нет привязки картинки к подвалу, дом и кран - 4 состыкованные картинки которые стоят на своем месте, перед ними есть ячейка растягивающаяся на 100% она и отталкивает их в самый низ.
2. там тоже все на таблицах с width:100% они тупо занимают все предоставленное им пространство

Ок, спасибо, буду думать

Sign In

Урезание картинок на определённой ширине.

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information