резиновая верстка страницы

@n0rma1 · Регистрация: 15.04.2010

Author24 — интернет-сервис помощи студентам

Доброго времени суток всем!

Помогите пожалуйста, уже который день сижу - всё никак не могу понять:то ли я тупой (что вероятнее), то ли лыжи не едут ... такая проблема --- делаю сайт, на основной странице присутствуют 5 картинок
1) логотип, находится вверху
2) две картинки по бокам (лево-право)
3) две картинки под предыдущими, тоже лево-право
4) и внизу текст (не имеет сути какого содержания)
ДАК ВОТ, пытаюсь сделать так, чтобы при различных разрешениях это выглядело на всю страницу и не вылазило за пределы. Картинки взял достаточной ширины чтобы на больших экранах небыло пикселизации ( порядка 800px каждая в ширину). Пытаюсь следующим образом

HTML5

<body>
 
<style>
#container {width: 100%; position:relative;}
#centerside {width:100%; margin-left:100px; margin-right:100px;}
</style>
 
<div id="containet">
<div id="centerside">
 
<img src="logo1.jpg" align="justify">
</div>
<div id="centerside">
<img align="left"  src="den.jpg">
<img align="right" src="vecher.jpg">
</div>
<div id="centerside">
<img src="daycb.jpg" align="left" onmouseover="this.src='day.jpg'" onmouseout="this.src='daycb.jpg'" >
<img src="nightcb.jpg" align="right" onmouseover="this.src='night.jpg'" onmouseout="this.src='nightcb.jpg'">
</div>
 
</div>
 
 
 </body>

из всего этого ничего не выходит. В браузере ставлю масштаб на 100% и не всё влазит на экран, явно ставиться родительский размер картинки, ничего не сжимается. Подскажите пожалуйста, как сделать резиново? Чтобы выглядело примерно вот так (во вложении)

@vadimgrig · 15.02.2012, 23:43

Суть в том что при резиновой верстке, использовать тег img не рекомендуется, так как средствами css его заставить расширятся или с ужаться, будет сложно.
Рекомендую для этих картинок, использовать тег div, а к нему использовать свойство

CSS

div {
width: 20%;
background: url(путь к картинке) no-repeat;
background-size: contain;/*Только css3*/
}

В общем, для размышлений...

@n0rma1 · 17.02.2012, 21:01 **[ТС]**

Сообщение от vadimgrig

Суть в том что при резиновой верстке, использовать тег img не рекомендуется, так как средствами css его заставить расширятся или с ужаться, будет сложно.
Рекомендую для этих картинок, использовать тег div, а к нему использовать свойство

CSS

div {
width: 20%;
background: url(путь к картинке) no-repeat;
background-size: contain;/*Только css3*/
}

В общем, для размышлений...

Спасибо за идею! Но как тогда допустим сделать ссылки? Допустим необходимо чтобы при нажатии на картинку переходило на другую страницу.

@acupation · 17.02.2012, 21:28

n0rma1,

HTML5

1	<a href="#"><div><img src="logo1.jpg" align="justify"></div></a>

или

HTML5

1	<div><a href="#"><img src="logo1.jpg" align="justify"></a></div>

@vadimgrig · 18.02.2012, 05:23

В нутрь блока вставь ссылку:
пример:

HTML5

1	<div id=img><a href=link></a></div>

В css дай ссылке display:block;
И поставь размеры на всю шырину блока див и все
а точнен 100% шыринв и высоты

@n0rma1 · 18.02.2012, 22:16 **[ТС]**

Спасибо за советы

Решил проблему следующим образом ... может кому пригодится.

HTML5

<style type="text/css">
table {
  width: 100%; 
  border-collapse: collapse; 
  table-layout: fixed;
}
table td {
  padding: 0 10px;
}
table img {
  width: 100%;
}
</style>

	18.02.2012, 22:16