Пример резиновой верстки

  1. Weblancer
  2. Форум фрілансерів
  3. Програмування
Марат А.
245 повідомлень
#16 років тому
Всем здравствуйте! =)
Пожалуйста дайте критику следующему макету. Резиновый 3-колонный макет, боковые колонки имеют фиксированную ширину, средняя тянется. У мне по крайней мере работает данная верстка в следующих браузерах: IE5.5, 6, 7, 8.2. FF 3.0.1, Opera 9.63, Apple Safari 3.04.
Просто интересно знать ваше мнение, коллеги! спасибо.

Для IE <= 6 еще необходимо добавить width:100% для mainbody.



<html>

<head></head>


<body> 


<div id="container" style="float: left;	width: 100%; min-width: 800px;">    	

	<div id="leftcol" style="float: left;  width: 190 px; background: olive;">

		левая колонка левая колонка

	</div>

	<div id="rightcol" style="float: right; width: 190 px; background: orange; ">

		правая колонка правая колонка

	</div>

	<div id="mainbody" style = "margin: 0 200px; background: yellow;">

		контентная часть

	</div>      

</div>   


</body>


</html>
Виктор Г.
113 повідомлень
#16 років тому
По высоте они елкой будут, вытянутся на высоту заполнения внутри... Так что резиновая она только по ширине...
Марат А.
245 повідомлень
#16 років тому
Цитата ("xwande"):
По высоте они елкой будут, вытянутся на высоту заполнения внутри... Так что резиновая она только по ширине...

да, это правильно. Забыл дописать это. Помимо этого есть еще минусы?
Виктор Г.
113 повідомлень
#16 років тому
Ну если не нужен футер, то пойдет.. только с min-wight.... я бы еще распорку кинул на всяк про всяк , паддинги и маргины для боди в 0, если не нужны отступы по периметру...
Сергеевич А.
791 повідомлення
#16 років тому
Верстка - баян)
правая и левая колонка - ручки баяна


убого смотрится на большом разрешении
Марат А.
245 повідомлень
#16 років тому
Цитата ("h4mpy"):
Верстка - баян)
правая и левая колонка - ручки баяна


убого смотрится на большом разрешении


Ну на самом деле, любой 3-хколонный макет, содержащий центральную резиновую часть - есть баян
Да, на большом разрешении смотрится не очень =) опять же, как и любой другой макет такого типа. Это же тип макета такой, а не его реализация
Сергеевич А.
791 повідомлення
#16 років тому
Поэтому не надо делать макеты такого типа
Марат А.
245 повідомлень
#16 років тому
Цитата ("h4mpy"):
Поэтому не надо делать макеты такого типа

Вы хотите сказать, что макет, в которых колонки имеют фиксированную ширину, это абсурд? =))))) Ну ладно, останемся при своем =)
Сергеевич А.
791 повідомлення
#16 років тому
Я не знаю...с этим макетом ничего не сделаешь, поэтому это абсурд выкладывать его
напишите в гугле Макет 3 колонки, мало макетов чтоли? зачем еще сюда постить?
макет как макет, ни достоинств ни недостатков

только сеошники могут сказать, хрен ле контент не вначале?
Михаил В.
2195 повідомлень
#16 років тому
IE5.5 можно не поддерживать в виду практического исчезновения (хотя знание особой блочной модели не помешает).

Если задается min-width, то нужно задавать и max-width, чтобы не смотрелось убого на большом разрешении. Например, 1300px - более чем разумное решение. min-width же в 800 как-то сомнительно маловато.
min-width/max-width для IE6 эмулируется через expression, в conditional comments. Ничего страшного в таком использовании expressions нет.

Я не сеошник, но h4mpy прав в том, что колонка контента в html должна быть первой.

А xwande правильно заметил, что нет "резиновой" высоты - если какой-либо колонке нужно задать фоновый цвет или фон, то он протяется только до высоты колонки.

Вариантов же верстки "трех колонок" несколько десятков, а то и за сотню.
Константин Д.
390 повідомлень
#16 років тому
Гы.. Как я понял, при разрешении 800, контент будет в ширину 20px! и в id="container" можно было обойтись без float: left и max-width не хватает.