Верстка дивами.

yHoMoMeHTo · March 19, 2012

Столкнулся с небольшой проблемой. Надеюсь не откажете в помощи.

для ясности картинка получающегося.

http://funkyimg.com/viewer.php?img=/2/1467/064/451035Untitled-2.jpg

Идут три блока по горизонтали.

1. слева тайлится левый фон. на картинке выделен зеленым.

2. по центру идет блок с контентом, на нем белый фон.

3. справа тайлится правый фон. точно также как левый только отзеркаленый.

так вот, если контент в 2 блоке растет, то левый и правый блоки не тайлятся, если в них нет контента, получается черный фон, выделил синим.

по моей задумке, левый и правый блоки должны просто растягиваться по вертикали вместе с центральной частью и заполняться тайлингом по вертикали.

пока не получается этого сделать.

что-нибудь подскажешь?

UPD: правый блок затайлил, добавлением в код класса "clear". а вот с левым блоком этого не выходит.

заметил, что clear не срабатвает и в среднем блоке. вобщем, там где есть параметр float.

CSS

body {
	background-color: black;
}

.wrapper {
	margin: 0 auto;
	width: 1024px;
}

.logo {
	width: 1024px;
	height: 114px;
	background: url('logos.png') no-repeat;
}

.content {
	background: #373737;
	width: 1024px;
}

.menubar_lt {
	float: left;
	width: 114px;
	height: 42px;
	background: url('links-lt.png');
}

.menu_links {
	float: left;
	width: 793px;
	height: 42px;
	background: url('links.png') repeat-x;
}

.menubar_rt {
	width: 117px;
	height: 42px;
	background: url('links-rt.png');
}

.left {
	float: left;
	width: 114px;
	background: url('left.png')
	overflow: visible;
}

.content {
	float: left;
	width: 790px;
	background-color: white;
}

.right {
	width: 117px;
	background: url('right.png');
}

.footer {
	width: 1024px;
	height: 59;
	background: url('footer.png') no-repeat;
}

.clear {
 clear: both;
}

HTML

<html>
	<head>
		<title>sitedescr</title>
		<link type="text/css" rel="stylesheet" href="style.css" />
	</head>

<body>

<div class="wrapper">
	<div class="logo"></div>
	<div class="menubar_lt"></div>
	<div class="menu_links"></div>
	<div class="menubar_rt"></div>
	<div class="left"> </div>
	<div class="content">блок инфы алевтоа левтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа инфы алевтоа</div>
	<div class="right"> <div class="clear"></div></div>
	<div class="footer">ывв</div>
</div>	

</body>

</html>

alexandr_v-vich · March 19, 2012

А что такое тайлинг?

Switch74 · March 19, 2012

можно сделать под menubar_lt и menubar_rt абсолютнопозиционированные блоки с фоном,

а можно для блоков content, menubar_lt и menubar_rt использовать display:table-cell; вместо float:left;, но с этим есть нюансы в старых браузерах

можно еще пару способов придумать, но у них свои нюансы и думаю первые два больше подходят для вашего сайта

yHoMoMeHTo · March 19, 2012

Здравствуйте и спасибо за участие.

Тайлинг - в моем понимании 3дшника это когда текстура повторяется и заполняет все пространство, думал в верстке, при работе с фонами, это понятие тоже применяется.

с display:table-cell; у меня вообще все блоки съехали кто куда.

решил проблему проще - избавился от дивов и воткнул таблицу из трех ячеек.

извините за беспокойство.

с уважением.

Sign In

Верстка дивами.

Question

yHoMoMeHTo

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

alexandr_v-vich

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

yHoMoMeHTo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information