Jump to content
  • 0

Растягивающийся DIV и толкающий в низ следующий DIV

Guest Гость_Максим_*

Asked by Guest Гость_Максим_*,

 Share

Question

Guest Гость_Максим_*

Guest Гость_Максим_*

Posted
Posted

Уважаемые сослуживцы, совсем я впал в ступор. Прошу помощи.

Верстаю страницу где четыре основных блока #level1, #level2, #level3, #level4, #level2 - Это блок с меню и текстом, там будет находится разной длинны текст, вставляемый системой управление, при длинном тексте #level2 должен тянуться дублируя фон и окантовку по краям и #level3, #level4 толкать в низ. Я не могу ни как этого сделать. Все карежится то в Опере, то в Експлоере. Посмотрите пожалуйста.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FullWebService - Проектировка, дизайн, создание и продвижение сайтов.</title>
<style>
/* CSS Document */
@charset "windows-1251";
html, body {
	  height:100%; margin:0;
	}

	html>body {
	  min-height:100%;
	  height:auto;
	}
#level1{
	width: 100%;
}
#level1 .menu {
	height: 87px;
	width: 100%;
}
#level1 .menu .menulevel1 {
	background-repeat: repeat;
	height: 87px;
	width: 100%;
	float: left;
	background-color: #0033CC;
}
#level1 .menu .menulevel1 .menulevel2 {
	background-image: url(../images/img/centerfon2.png);
	height: 87px;
	width: 100%;
}
#level1 .menu .menulevel1 .menulevel2 .pravfonmen {
	float: right;
	height: 87px;
	width: 19px;
	background-color: #006600;
}
#level1 .menu .menulevel1 .menulevel2 .levfonmen {
	background-image: url(../images/img/levfonmen.png);
	height: 87px;
	width: 18px;
	float: left;
}
#level1 .menu .menulevel1 .menulevel2 .SS {
	height: 87px;
	width: 140px;
	font-family: Tahoma;
	font-size: 16px;
	float: left;
	text-decoration: none;
}
#level1 .menu .menulevel1 .menulevel2 .SS a { text-decoration:none}
#level1 .menu .menulevel1 .menulevel2 .SS1 {
	height: 87px;
	width: 20%;
	font-family: Tahoma;
	font-size: 16px;
	clear: none;
	float: left;
	background-color: #993300;	
}
#level1 .menu .menulevel1 .menulevel2 .SS .word1 {
	height: 25px;
	width: 150px;
	margin-top: 30px;
}
#level1 .menu .menulevel1 .menulevel2 .owermenu {
	width: 70%;
	height: 87px;
	float: left;
	clear: none;
	margin-left: 15px;
}
#level1 .menu .menulevel1 .menulevel2 .owermenu .SS1 .words {
	margin-top: 32px;
}
#level1 .menu .menulevel1 .menulevel2 .owermenu .SS1 .words a { color:#FFFFFF}
#level1 .menu .menulevel1 .menulevel2 .owermenu .SS1 .words a:hover { color:#000000}
#level1 .menu .menulevel1 .menulevel2 .owermenu .rz {
	height: 87px;
	width: 8px;
	float: left;
	background-color: #999999;
}
#level2 {
	width:100%;
	bottom:0;
	}
#level2 .owerpart1 {
	height: 344px;
	width: 100%;
	background-color: #009933;
}
#level2 .owerpart1 .levfonpart1 {
	float: left;
	height: 344px;
	width: 5px;
	background-color: #990000;
}
#level2 .owerpart1 .pravfonpart1 {
	float: right;
	height: 344px;
	width: 5px;
	background-color: #990000;
}
#level2 .owerpart1 .menudop {
	float: left;
	height: 336px;
	width: 240px;
	margin-top: 5px;
	background-color: #000099;
}
#level2 .owerpart1 .menudop .lvfonmenpart1 {
	float: left;
	height: 336px;
	width: 6px;
	background-image: url(../images/img/levfonmenpart1.png);
	background-repeat: no-repeat;
}
#level2 .owerpart1 .menudop .prfonmenpart1 {
	float: right;
	height: 336px;
	width: 6px;
	background-color: #990000;
}
#level2 .owerpart1 .menudop .lvfonmenpart1 .shap1 {
	background-image: url(../images/img/levfon1.png);
	height: 42px;
	width: 6px;
}
#level2 .owerpart1 .menudop .centershap {
	height: 250px;
	width: 228px;
	float: left;
	background-repeat: repeat-x;
	background-color: #CCCCCC;
}
#level2 .owerpart1 .menudop .prfonmenpart1 .shap2 {
	background-image: url(../images/img/pravfon1.png);
	height: 42px;
	width: 4px;
}
#level2 .owerpart1 .menudop .lvfonmenpart1 .shap1 .shap3 {
	background-image: url(../images/img/levfonpr1.png);
	height: 42px;
	width: 6px;
	float: left;
}
#level2 .owerpart1 .menudop .centershap .centershap2 {
	background-image: url(../images/img/centrfonpr1.png);
	height: 250px;
	width: 228px;
	background-repeat: repeat-x;
}
#level2 .owerpart1 .menudop .prfonmenpart1 .shap2 .shap4 {
	background-image: url(../images/img/pravfonpr1.png);
	height: 42px;
	width: 4px;
}
#level2 .owerpart1 .menudop .centershap .centershap2 .menuzag {
	height: 20px;
	width: 100px;
	font-family: Tahoma;
	color: #FFFFFF;
	padding-top: 12px;
	margin-left: 15px;
	background-color: #000000;
}
#level2 .owerpart1 .menudop .menuarea {
	height: 20px;
	width: 200px;
	margin-top: 15px;
}
#level2 .owerpart1 .menudop .menuarea a { color:#FFFFFF}
#level2 .owerpart1 .menudop .menuarea a:hover { color:#000000}
#level2 .owerpart1 .menudop .centershap .centershap2 .menuarea .li {
	height: 20px;
	width: 20px;
	float: left;
	background-image: url(../images/img/li.png);
	margin-left: 20px;
}
#level2 .owerpart1 .owertextpart1 {
	height: 336px;
	float: left;
	width: 65%;
	margin-top: 5px;
	background-color: #666666;
}
#level2 .owerpart1 .owertextpart1 .podzaglav {
	height: 42px;
	width: 238px;
	float: left;
	margin-left: 6px;
	margin-top: 2px;
	background-color: #0000CC;
}
#level2 .owerpart1 .owertextpart1 .podzaglav .textzg {
	height: 20px;
	width: 150px;
	margin-top: 10px;
	color: #FFFFFF;
	font-family: Tahoma;
	margin-left: 10px;
}
#level2 .owerpart1 .owertextpart1 .textpart1 {
}
#level2 .owerpart1 .owertextpart1 .textpart1 {
	width: 95%;
	height: 270px;
	float: left;
	font-size: 12px;
	font-family: Tahoma;
	margin-left: 10px;
	color: #000000;
	background-color: #CCCCCC;
}
#level3 {
	width:100%;
	bottom:0;
	}
#level3 .owerpart2 {
	height: 334px;
	width: 100%;
	background-color: #999999;
}
#level3 .owerpart2 .leftsuperarea {
	height: 334px;
	width: 241px;
	float: left;
	background-color: #CCCCCC;
}
#level3 .owerpart2 .centrfons {
	height: 250px;
	width: 73%;
	float: left;
	background-image: url(../images/img/centrsuperfon.png);
	background-repeat: no-repeat;
	background-color: #990000;
}
#level3 .owerpart2 .pravfonid {
	float: right;
	height: 334px;
	width: 6px;
	background-color: #009900;
}
#level3 .owerpart2 .centrfons .podzaglav2 {
	height: 40px;
	width: 241px;
	margin-top: 6px;
	margin-left: 6px;
	background-color: #999999;
}
#level3 .owerpart2 .centrfons .podzaglav2 .textzg2 {
	width: 200px;
	height: 20px;
	margin-left: 10px;
	font-family: Tahoma;
	color: #FF0000;
	padding-top: 10px;
}
#level3 .owerpart2 .leftsuperarea .fotopew {
	height: 175px;
	width: 231px;
	margin-top: 60px;
	margin-left: 8px;
	padding-top: 7px;
	background-repeat: no-repeat;
	background-color: #999999;
}
#level3 .owerpart2 .fotoprew2 {
	height: 175px;
	width: 231px;
	float: left;
	margin-top: 14px;
	margin-left: 6px;
	padding-top: 7px;
	background-repeat: no-repeat;
	background-color: #999999;
}
#level3 .owerpart2 .fotoprew2 a { color:}
#level3 .owerpart2 .fotoprew2 a:hover {}
#level3 .owerpart2 .leftsuperarea .fotopew .fotopr1 {
	height: 143px;
	width: 162px;
	margin-left: 31px;
	background-color: #000000;
}
#level3 .owerpart2 .leftsuperarea .fotopew .textarea1 {
	font-size: 12px;
	height: 20px;
	width: 70px;
	margin-left: 84px;
}
#level3 .owerpart2 .leftsuperarea .fotopew .textarea1 a { color:#000000}
#level3 .owerpart2 .leftsuperarea .fotopew .textarea1 a:hover { color:#666666}
#level3 .owerpart2 .centrfons .fotoprew2 .fotopr2 {
	height: 144px;
	width: 174px;
	background-repeat: no-repeat;
	margin-left: 27px;
	background-color: #000000;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea2 {
	width: 70px;
	font-size: 12px;
	height: 20px;
	margin-left: 85px;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea2 a { color:#000000}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea2 a:hover { color:#666666}
#level3 .owerpart2 .centrfons .fotoprew2 .fotopr3 {
	height: 144px;
	width: 170px;
	margin-left: 30px;
	background-color: #000000;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea3 {
	width: 70px;
	font-size: 12px;
	height: 20px;
	margin-left: 84px;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea3 a { color:#000000}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea3 a:hover { color:#666666}
#level3 .owerpart2 .centrfons .fotoprew2 .fotopr4 {
	height: 144px;
	width: 192px;
	margin-left: 19px;
	background-color: #000000;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea4 {
	font-size: 12px;
	width: 70px;
	height: 20px;
	margin-left: 85px;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea4 a { color:#000000}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea4 a:hover { color:#666666}
#level4 {
	width:100%;
	bottom:0;
	height: 91px;
	}
#level4  .futer {
	height: 91px;
	width: 100%;
	background-color: #00CC00;
}

#level4 .futer .levfb2 {
	height: 91px;
	width: 6px;
	float: left;
	background-color: #000099;
}


#level4  .futer .pravbox2 {
	float: right;
	height: 91px;
	width: 6px;
	background-color: #000066;
}

#level4  .futer .textbox22 {
	width: 90%;
	height: 30px;
	float: left;
	margin-left: 14px;
	font-family: Tahoma;
	color: #00FF00;
	font-size: 12px;
	padding-top: 15px;
	margin-top: 24px;
	background-color: #999999;
}
#level4  .futer .textbox22 a { color:#d5794d}
#level4  .futer .textbox22 a:hover {color:#d5794d}


.style1 {color: #FFFFFF}
</style>
</head>

<body>
<div id="level1">
<div class="menu">
<div class="menulevel1">
<div class="menulevel2">
<div class="levfonmen"></div>
<div class="SS"><a href="#"><img src="logo.png" alt="FullWebService" border="0" /></a></div>
<div align="center" class="owermenu">
<div class="rz"></div>
<div class="SS1">
<div class="words"><a href="#">1</a></div>
</div>
<div class="rz"></div>
<div class="SS1">
<div class="words"><a href="#">2</a></div>
</div>
<div class="rz"></div>
<div class="SS1">
<div class="words"><a href="#">3</a></div>
</div>
<div class="rz"></div>
<div class="SS1">
<div class="words"><a href="#">4</a></div>
</div>
<div class="rz"></div>
</div>
<div class="pravfonmen"></div>
</div>
</div>
</div>
</div>
<div id="level2">
<div class="owerpart1">
<div class="levfonpart1"></div>
<div class="menudop">
<div class="lvfonmenpart1">
<div class="shap1">
<div class="shap3"></div>
</div>
</div>
<div class="centershap">
<div class="centershap2">
<div class="menuzag"><strong>Меню</strong></div>
<a href="#">Сюда
</a></div>
</div>

<div class="prfonmenpart1">
<div class="shap2">
<div class="shap4"></div>
</div>
</div>
</div>
<div class="owertextpart1">
<div class="podzaglav">
<div class="textzg">инфо</div>
</div>
<div class="textpart1">
  <p>{TEXT}</p>
  <p>{TEXT}</p>
  <p>{TEXT}</p>
  <p>{TEXT}</p>
  <p> </p>
  </div>
</div>
<div class="pravfonpart1"></div>
</div>
</div>
<div id="level3">
<div class="owerpart2">
<div class="leftsuperarea">
<div class="fotopew">
<div class="fotopr1"></div>
<div class="textarea1">
  <a href="#">Подробнее</a></div>
</div>
</div>
<div class="centrfons">
<div class="podzaglav2">
<div class="textzg2 style1">Еще</div>
</div>
<div class="fotoprew2">
<div class="fotopr2"></div>
<div class="textarea2">
  <a href="#">Подробнее</a></div>
</div>
<div class="fotoprew2">
<div class="fotopr3"></div>
<div class="textarea3">
  <a href="#">Подробнее</a></div>
</div>
<div class="fotoprew2">
<div class="fotopr4"></div>
<div class="textarea4">
  <a href="#">Подробнее</a></div>
</div>
</div>
<div class="pravfonid"></div>
</div>
</div>
<div id="level4">
<div class="futer">
<div class="levfb2"></div>
<div class="textbox22">подвал</div>
<div class="pravbox2"></div>
</div>
</div>
</body>
</html>

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
klierik Middle Developer

klierik

Posted
Posted 

#level1 .menu .menulevel1 .menulevel2 .SS a

ооочень длинная линейка. постарайтесь писать код так, что б было 2-3 класса, что на много читабельнее и удобнее будет.

#level1 {
	width: 100%;
}

не понимаю зачем на div вешать ширину 100%, если по умолчанию и так занимает 100%

#level3 .owerpart2 .fotoprew2 a {
color:
}

перепроверте свой код внимательно.

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

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

Link to comment
Share on other sites
  • 0
Guest Гость

Guest Гость

Posted
Posted

1. Я короче пока не могу, )) там же много участков. Хотя понимаю о чем Вы.

2. Это косячек.)

3. Попробую, вообще 

#level2 {
	width:100%;
	bottom:0;
	}

- рассматривается этот участок, который нужно чтобы полз в низ и толкал следующие блоки, при длинных текстах.

Link to comment
Share on other sites
  • 0
Guest Гость

Guest Гость

Posted
Posted

Убрал два болока, оставил только #level2 - который при длинном тексте должен тянуться и #level3 который должен ехать в низ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FullWebService - Проектировка, дизайн, создание и продвижение сайтов.</title>
<style>
/* CSS Document */
@charset "windows-1251";
html, body {
	  height:100%; margin:0;
	}

	html>body {
	  min-height:100%;
	  height:auto;
	}
#level2 {
	width:100%;
	bottom:0;
	}
#level2 .owerpart1 {
	height: 344px;
	width: 100%;
	background-color: #009933;
}
#level2 .owerpart1 .levfonpart1 {
	float: left;
	height: 344px;
	width: 5px;
	background-color: #990000;
}
#level2 .owerpart1 .pravfonpart1 {
	float: right;
	height: 344px;
	width: 5px;
	background-color: #990000;
}
#level2 .owerpart1 .menudop {
	float: left;
	height: 336px;
	width: 240px;
	margin-top: 5px;
	background-color: #000099;
}
#level2 .owerpart1 .menudop .lvfonmenpart1 {
	float: left;
	height: 336px;
	width: 6px;
	background-image: url(../images/img/levfonmenpart1.png);
	background-repeat: no-repeat;
}
#level2 .owerpart1 .menudop .prfonmenpart1 {
	float: right;
	height: 336px;
	width: 6px;
	background-color: #990000;
}
#level2 .owerpart1 .menudop .lvfonmenpart1 .shap1 {
	background-image: url(../images/img/levfon1.png);
	height: 42px;
	width: 6px;
}
#level2 .owerpart1 .menudop .centershap {
	height: 250px;
	width: 228px;
	float: left;
	background-repeat: repeat-x;
	background-color: #CCCCCC;
}
#level2 .owerpart1 .menudop .prfonmenpart1 .shap2 {
	background-image: url(../images/img/pravfon1.png);
	height: 42px;
	width: 4px;
}
#level2 .owerpart1 .menudop .lvfonmenpart1 .shap1 .shap3 {
	background-image: url(../images/img/levfonpr1.png);
	height: 42px;
	width: 6px;
	float: left;
}
#level2 .owerpart1 .menudop .centershap .centershap2 {
	background-image: url(../images/img/centrfonpr1.png);
	height: 250px;
	width: 228px;
	background-repeat: repeat-x;
}
#level2 .owerpart1 .menudop .prfonmenpart1 .shap2 .shap4 {
	background-image: url(../images/img/pravfonpr1.png);
	height: 42px;
	width: 4px;
}
#level2 .owerpart1 .menudop .centershap .centershap2 .menuzag {
	height: 20px;
	width: 100px;
	font-family: Tahoma;
	color: #FFFFFF;
	padding-top: 12px;
	margin-left: 15px;
	background-color: #000000;
}
#level2 .owerpart1 .menudop .menuarea {
	height: 20px;
	width: 200px;
	margin-top: 15px;
}
#level2 .owerpart1 .menudop .menuarea a { color:#FFFFFF}
#level2 .owerpart1 .menudop .menuarea a:hover { color:#000000}
#level2 .owerpart1 .menudop .centershap .centershap2 .menuarea .li {
	height: 20px;
	width: 20px;
	float: left;
	background-image: url(../images/img/li.png);
	margin-left: 20px;
}
#level2 .owerpart1 .owertextpart1 {
	float: left;
	width: 65%;
	margin-top: 5px;
	background-color: #666666;
}
#level2 .owerpart1 .owertextpart1 .podzaglav {
	height: 42px;
	width: 238px;
	float: left;
	margin-left: 6px;
	margin-top: 2px;
	background-color: #0000CC;
}
#level2 .owerpart1 .owertextpart1 .podzaglav .textzg {
	height: 20px;
	width: 150px;
	margin-top: 10px;
	color: #FFFFFF;
	font-family: Tahoma;
	margin-left: 10px;
}
#level2 .owerpart1 .owertextpart1 .textpart1 {
}
#level2 .owerpart1 .owertextpart1 .textpart1 {
	width: 95%;
	float: left;
	font-size: 12px;
	font-family: Tahoma;
	margin-left: 10px;
	color: #000000;
	background-color: #CCCCCC;
}
#level3 {
	width:100%;
	bottom:0;
	}
#level3 .owerpart2 {
	height: 334px;
	width: 100%;
	background-color: #999999;
}
#level3 .owerpart2 .leftsuperarea {
	height: 334px;
	width: 241px;
	float: left;
	background-color: #CCCCCC;
}
#level3 .owerpart2 .centrfons {
	height: 250px;
	width: 73%;
	float: left;
	background-image: url(../images/img/centrsuperfon.png);
	background-repeat: no-repeat;
	background-color: #990000;
}
#level3 .owerpart2 .pravfonid {
	float: right;
	height: 334px;
	width: 6px;
	background-color: #009900;
}
#level3 .owerpart2 .centrfons .podzaglav2 {
	height: 40px;
	width: 241px;
	margin-top: 6px;
	margin-left: 6px;
	background-color: #999999;
}
#level3 .owerpart2 .centrfons .podzaglav2 .textzg2 {
	width: 200px;
	height: 20px;
	margin-left: 10px;
	font-family: Tahoma;
	color: #FF0000;
	padding-top: 10px;
}
#level3 .owerpart2 .leftsuperarea .fotopew {
	height: 175px;
	width: 231px;
	margin-top: 60px;
	margin-left: 8px;
	padding-top: 7px;
	background-repeat: no-repeat;
	background-color: #999999;
}
#level3 .owerpart2 .fotoprew2 {
	height: 175px;
	width: 231px;
	float: left;
	margin-top: 14px;
	margin-left: 6px;
	padding-top: 7px;
	background-repeat: no-repeat;
	background-color: #999999;
}
#level3 .owerpart2 .fotoprew2 a { color:}
#level3 .owerpart2 .fotoprew2 a:hover {}
#level3 .owerpart2 .leftsuperarea .fotopew .fotopr1 {
	height: 143px;
	width: 162px;
	margin-left: 31px;
	background-color: #000000;
}
#level3 .owerpart2 .leftsuperarea .fotopew .textarea1 {
	font-size: 12px;
	height: 20px;
	width: 70px;
	margin-left: 84px;
}
#level3 .owerpart2 .leftsuperarea .fotopew .textarea1 a { color:#000000}
#level3 .owerpart2 .leftsuperarea .fotopew .textarea1 a:hover { color:#666666}
#level3 .owerpart2 .centrfons .fotoprew2 .fotopr2 {
	height: 144px;
	width: 174px;
	background-repeat: no-repeat;
	margin-left: 27px;
	background-color: #000000;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea2 {
	width: 70px;
	font-size: 12px;
	height: 20px;
	margin-left: 85px;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea2 a { color:#000000}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea2 a:hover { color:#666666}
#level3 .owerpart2 .centrfons .fotoprew2 .fotopr3 {
	height: 144px;
	width: 170px;
	margin-left: 30px;
	background-color: #000000;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea3 {
	width: 70px;
	font-size: 12px;
	height: 20px;
	margin-left: 84px;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea3 a { color:#000000}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea3 a:hover { color:#666666}
#level3 .owerpart2 .centrfons .fotoprew2 .fotopr4 {
	height: 144px;
	width: 192px;
	margin-left: 19px;
	background-color: #000000;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea4 {
	font-size: 12px;
	width: 70px;
	height: 20px;
	margin-left: 85px;
}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea4 a { color:#000000}
#level3 .owerpart2 .centrfons .fotoprew2 .textarea4 a:hover { color:#666666}
#level4 {
	width:100%;
	bottom:0;
	height: 91px;
	}

.style1 {color: #FFFFFF}
</style>
</head>

<body>
<div id="level2">
<div class="owerpart1">
<div class="levfonpart1"></div>
<div class="menudop">
<div class="lvfonmenpart1">
<div class="shap1">
<div class="shap3"></div>
</div>
</div>
<div class="centershap">
<div class="centershap2">
<div class="menuzag"><strong>Меню</strong></div>
<a href="#">Сюда
</a></div>
</div>

<div class="prfonmenpart1">
<div class="shap2">
<div class="shap4"></div>
</div>
</div>
</div>
<div class="owertextpart1">
<div class="podzaglav">
<div class="textzg">инфо</div>
</div>
<div class="textpart1">
  <p>Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.Текст его много.</p>
  <p>А ДАЛЬШЕ БЛОК НЕ ПОЛЗЕТ!</p>
  <p> </p>
  </div>
</div>
<div class="pravfonpart1"></div>
</div>
</div>
<div id="level3">
<div class="owerpart2">
<div class="leftsuperarea">
<div class="fotopew">
<div class="fotopr1"></div>
<div class="textarea1">
  <a href="#">Подробнее</a></div>
</div>
</div>
<div class="centrfons">
<div class="podzaglav2">
<div class="textzg2 style1">Еще</div>
</div>
<div class="fotoprew2">
<div class="fotopr2"></div>
<div class="textarea2">
  <a href="#">Подробнее</a></div>
</div>
<div class="fotoprew2">
<div class="fotopr3"></div>
<div class="textarea3">
  <a href="#">Подробнее</a></div>
</div>
<div class="fotoprew2">
<div class="fotopr4"></div>
<div class="textarea4">
  <a href="#">Подробнее</a></div>
</div>
</div>
<div class="pravfonid"></div>
</div>
</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
Guest Гость

Guest Гость

Posted
Posted
нарисуйте, пожалуйста, в фотошопе блоки и опишите как они должны работать.

залейте рисунок на любой image hosting ресурс и выложите сюда ссылочку.

- Все я сломал извилину и додумался. :) Спасибо что откликнулись.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept