Форум Сайтостроение Веб-строительство

Шаблоны с блочной версткой

1 23
Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#21
dRiveR.dLL:
Периодически пытаюсь перейти на блочную верстку или хотя бы включить ее в свой арсенал, но все время не хватает времени на изучение стандартов и всех тонкостей CSS-верстки. А порой кажется, что блочная модель некоторых браузеров просто еще не доросла до совершенства.

К защитникам блоков просьба ответить на 2 вопроса-ситуации из-за которых я вобщем-то уже неоднократно отказывался от блоков и верстал в таблицах.

1) Как избежать подобного эффекта?

[ATTACH]8223[/ATTACH]

2) Представим стандартный дизайн из 3-х колонок. Как, например, левую колонку закрасить до самого футера, даже если у нее меньше контента, чем у центральной части ?

[ATTACH]8222[/ATTACH]

можно просто маржином и пэддингом отбить каждый блок, к примеру если Вы задаете 

float: left; width: 200px;

то

в правом блоке соответсвенно 

margin-left: 200px;

внутри этого можно поставить уже 

width: 100%; overflow: hidden;

по второму вопросу Вам ответил Ayavryk

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
dRiveR.dLL
На сайте с 25.09.2006
Offline
79
dRiveR.dLL
#22
Ayavryk:

min-with - ограничит сжатие колонки.
overflow:hidden - не даст части текста выползти за пределы ячейки

Принимается, спасибо!

А вот со вторым вопросом все равно недопонимаю. Вот как я понял то, о чем Вы сказали и эффекта не достиг: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

	<title>Example</title>

	<style>

		body {

			margin:0;

			padding:0;

		}

		#one {

			height:100%;

			min-height:100%;

			width:100px;

			background:red;

			float:left;

		}

		#two {

			width:100px;

			background:blue;

			float:left;

		}

	</style>

</head>



<body>



	<div id="one"></div>

	<div id="two">



		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

		много-много текста

	</div>



</body>

</html>

Хочется, чтобы блок #one тянулся по высоте вместе с #two, а он занимает только 100% видимой области браузера. Таблица же занимает 100% выделенной ей области на странице, а не на экране.

a.fatman
На сайте с 15.01.2006
Offline
127
a.fatman
#23

Можно сделать так: http://www.alistapart.com/articles/fauxcolumns/

dRiveR.dLL
На сайте с 25.09.2006
Offline
79
dRiveR.dLL
#24
a.fatman:
Можно сделать так: http://www.alistapart.com/articles/fauxcolumns/

Интересный прием

UA
На сайте с 19.06.2006
Offline
100
Ugnich Anton
#25

Вот, в качестве примера правильной верстки: http://finds.ws/

Это сайт в разработке, смотрите только на левую колонку, правую я ещё не заполнил :)

Сначала смотрим просто так, потом отключаем CSS и наслаждаемся правильной структурой документа - ничего лишнего, всё на своих местах.

К мелочам не придирайтесь, повторяю ещё раз: сайт в разработке.

Я уже выбрал сайт для конкурса ("как выбирал" - ближе к вечеру), сегодня буду начинать делать видео, в котором страшненький сайт, использующий TABLE, приведу в нормальный вид. Ждите через пару дней.

1 23

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий