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

Проблемы с вёрсткой

master_jeday
На сайте с 15.05.2010
Offline
231
master_jeday
673

Страница представляет собой обыкновенный двухколоночный макет из 4-6 блоков. Слева 1-3 блоков меню друг под другом (на рисунке только один, красный). Справа вверху "резиновый" блок с контентом, растягивающийся по высоте в зависимости от кол-ва текста. Под ним ещё два блока на одном уровне. На самом деле, блоков может быть больше, но это не суть.

В коде первым идёт блок с контентом, за ним два блока под ним и т.д., а уже после - меню.


<div id="content_blocks"> 
        <div id="content">
        		Текст, в зависимости от объема которого, блок растягивается по вертикали.
        </div>
              
	<div id="container_bottom">
        	<div id="articles">
        		Текст
        	</div>
        
		<div id="news">
                   	Текст
		</div>
	</div>
</div>

<div id="menu">
        Блок с меню
</div>

Суть проблемы описана на рисунке. Блок с меню должен позиционироваться на одном уровне с контентом, но он выравнивается по его нижнему краю. Как исправить косяк? Через float:left пробовал - не получилось.

Вот CSS:


#content_blocks {
	margin: 95px 0 0 210px;
}

#content {
..............................
	position: relative;
}

..............................

#container_bottom {
..............................
	position: absolute;
}

#articles {
..............................
	position: absolute;
}

#news {
..............................
	position: absolute;
}

#menu {
..............................
	margin: 0 0 0 -182px;
	vertical-align: top;
}

Самое простое - указать к menu margin-top: -100px, но блок с контентом - резиновый. Ну а через float:left что-то не получается...

Дорвеи на заказ с гарантией трафика ( /ru/forum/993918 ) >>> Осторожно, в телеге/скайпе есть клоны! Проверяйте, что общаетесь именно со мной через личку!
DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#1

заверните каждую конструкцию [блок меню + блок контента + ...] в div с clear:both и всем что надо (margin, padding и т.п.). всё плавающие блоки внутри обёртки прилипнут к её верхней границе будут выровнены. все дела...

show must go on !!!...
Директ отказывается от рекламного Яндекс о роли лингвистики Google Maps тестирует рекомендуемые
master_jeday
На сайте с 15.05.2010
Offline
231
master_jeday
#2

DiAksID, не совсем понял, все блоки завернуть в один div с clear:both или каждый в свой div, или левую колонку в один, а правую - в другой? А float:left надо прописывать для menu?

Завернул всё в один div - не пашет.

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#3
master_jeday:
DiAksID, не совсем понял, все блоки завернуть в один div с clear:both или каждый в свой div, или левую колонку в один, а правую - в другой? А float:left надо прописывать для menu?

Завернул всё в один div - не пашет.

сначала упростите максимально:


...
<div id="обёрка-0" style="clear:both;overflow-y:auto">
	<div class="меню" style="float:left;width:..."></div>
	<div class="контент" style="float:left"></div>
</div>
<div id="обёрка-1" style="clear:both;overflow-y:auto">
	<div class="меню" style="float:left;width:..."></div>
	<div class="контент" style="float:left"></div>
	<div class="контент" style="float:left"></div>
</div>
...

(есссесссно, без кириллицы, инлайн стилей и ...)

потом по месту разберётесь: может "контенты" красивШе float:right сделать, а может, если три блока в обёртке - то один в left, один в right, а последний (средний) оставить без flat (c width:auto по умолчанию), что бы растянулся. ну и какую из обёрток надо абсолютом куда загнать и т.д.

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

Сервис Облако Mail.Ru представил Google: как сделать статические Google советует использовать один
D0
На сайте с 15.12.2009
Offline
59
demix01
#4

Вот пожалуйста. И не парься. Сам много раз сталкивался с такой проблемой и вот наконец-то решил.



<style>
.clear {
clear:both;}
#ifowrap {
width:90%;
margin:10px auto;
padding:10px;
height:auto;
overflow: auto;
border:1px solid #FF0000;
background-color:#CCFFCC;}
#infowrap-left {
float:left;
width:45%;
padding:5px 7px;
margin-right:10px;
border-left:1px solid #999999;
border-right:1px solid #999999;}
#infowrap-right {
padding:5px 7px;
margin-left:46%;
border-right:1px solid #999999;}

</style>


<div id="ifowrap">
<div id="infowrap-left">

</div>
<div id="infowrap-right">

</div>
</div>
<div class="clear"></div>
Жизнью правит случай, а не мудрость.
master_jeday
На сайте с 15.05.2010
Offline
231
master_jeday
#5

Чё-то нифига не выходит.

Вот css полностью:

#content {
	background-color: #cefbbe;
	border-color: #c1e5ae;
	border-style: solid;
	border-width: 1px;
	width: 702px;
	margin: 95px 0 0 210px;
	padding: 20px 35px 10px 25px;
}
}

#container_bottom {
	width: 762px;
	margin: 123px 0 0 0;
	position: absolute;
}

#articles {
	display: block;
	background-color: #cefbbe;
	border-color: #c1e5ae;
	border-style: solid;
	border-width: 1px;
	width: 352px;
	margin: 0 0 0 210px;
	padding: 0 0 0 25px;
	position: absolute;
}

#news {
	display: block;
	background-color: #cefbbe;
	border-color: #c1e5ae;
	border-style: solid;
	border-width: 1px;
	width: 352px;
	margin: 0 0 0 595px;
	padding: 0 0 0 25px;
	position: absolute;
}

#clearboth {
	clear: both;
}

#menu {
	background: url("img/bla_bla.png");
	width: 180px;
	height: 631px;
	margin: 0 0 0 28px;
	float: left;
}

HTML:

<div id="content">
        Текст, в зависимости от объема которого, блок растягивается по вертикали.
</div>
              
<div id="container_bottom">
        <div id="articles">
        	Текст
        </div>
        
	<div id="news">
                 Текст
	</div>
</div>

<div id="menu">
        Блок с меню
</div>

<div id="clearboth"></div>

Или должно быть так:


<div id="обёртка">
<div id="content">
        Текст, в зависимости от объема которого, блок растягивается по вертикали.
</div>
              
<div id="container_bottom">
        <div id="articles">
        	Текст
        </div>
        
	<div id="news">
                 Текст
	</div>
</div>

<div id="menu">
        Блок с меню
</div>
</div>
<div id="clearboth"></div>

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