Один div над другим

Sam Trammell · February 15, 2010

Верстаю резиновый сайт на div-ах. Всего три блога: 2 слева один над другим, 3-ий справа. Проблема в том, что в разных браузерах отображается по-разному: если в FF всё нормально, то в IE div-ы либо наслаиваются... и наоборот.

<div id="page">
<div class="sid">
<div class="trans"></div>
<div class="text">
Боковая flash-колонка (sidebar)</div>
</div>

<div id="page">
<div class="name">
<div class="trans"></div>
<div class="text">
Логотип (Dream Design)</div>
</div>

<div class="note">
<div class="trans"></div>
<div class="text">
Основная часть (page)</div>
</div>


<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a></li>
<li><a href="#">Продукция</a></li>
<li style="border:0 !important; font-family: Arial;"><a href="#">Контакты</a></li>
</ul>
</div>
</div>

CSS:

#page{
position:absolute;
top:0;bottom:0;right:0;left:0;
z-index:1;
height:100%;
}
.note{
border:0px solid #ddd;
margin:2% 12% 0 0px;
width:57%;
float:right;
min-height:80%;
height:auto !important;
position:relative;
}
.text{
	position:relative;
	padding:10px;
	font-family: Arial;
	font-size: 14px;
}
.sid{
	border:0px solid #ddd;
	width:18%;
	float:left;
	position:relative;
	min-height:53%;
	height:53%;
	margin-left: 12%;
	margin-top: 19%;
}
.name{
	border:0px solid #ddd;
	width:18%;
	float:left;
	position:relative;
	min-height:25%;
	margin-top: 2%;
	margin-left: 12%;
	height: 25%;
}
ul#menu{
	position:absolute;
	margin: 55% auto 0 2%;
	left:26%;
	font-size: 14px;
	font-family: Arial;
}
#menu li{
float:left;
list-style:none;
width:130px;
text-align:center;
border-right:1px solid #333;
}
#menu li a{
text-decoration:none;
font-style: normal;
color:#fff;
border-bottom:1px dashed transparent;
}
#menu li a:hover{
text-decoration:none;
color:#fff;
border-bottom:1px dashed #ddd;
}

Хелп!

Edited February 15, 2010 by Sam Trammell

psywalker · February 15, 2010

1) Код поместить в спец.теги срочно

2) Скриншот того, что хочешь получить с объяснениями!

Sam Trammell · February 15, 2010

1) Код поместить в спец.теги срочно
2) Скриншот того, что хочешь получить с объяснениями!

2) Я не знаю как это сделать.

psywalker · February 15, 2010

2) Я не знаю как это сделать.

Есть такие же спец.теги для этого, а ещё есть серваки твои, на которые ты можешь залить скрин, а нам дать ссылку.

Sam Trammell · February 15, 2010

Теперь по существу уже можно? Или еще что-то не так?)

psywalker · February 15, 2010

Теперь по существу уже можно? Или еще что-то не так?)

Вот теперь другое дело.

Думаю смысл понятен?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	body { width: 800px; margin: 20px auto;}
	.aside { float: left; width: 300px; margin-right: 20px;}
	.right { overflow:hidden; background: blue;}
		.left1,.left2 { height: 300px; margin-bottom: 20px; background: red;}

</style>
</head>


<body>
<div class="aside">
	<div class="left1"></div>
	<div class="left1"></div>
</div>
<div class="right">Right Content</div>
</body>
</html>

Sam Trammell · February 15, 2010

Думаю смысл понятен?

Да. Спасибо. Расцеловала бы...)

Edited February 15, 2010 by Sam Trammell

psywalker · February 15, 2010

Да. Спасибо. Расцеловала бы...)

Да не за что, и тебя чмак :lol:

Sam Trammell · February 15, 2010

Хотя... Если задавать ширину div-ам в % - всё в порядке, если длину - всё пропадает. (Это я балуюсь с твоим примером).

Сайт ведь резиновый...((

psywalker · February 15, 2010

Хотя... Если задавать ширину div-ам в % - всё в порядке, если длину - всё пропадает. (Это я балуюсь с твоим примером).
Сайт ведь резиновый...((

т.е. ты хочешь колонки одинаковой высоты?

Sam Trammell · February 15, 2010

Хочу, чтобы две колонки слева по высоте были равны той колонке, что справа.

Я еще не совсем понимаю: если каркас д.б. резиновый, то все величины - в %? Нет?

psywalker · February 15, 2010

А вот это уже сложнее дружище, тяжёлая артилерия так сказать

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	html,body { height: 100%;}
	.wrap { 
		width: 800px; 
		margin: 20px auto 0; 
		overflow: hidden;
		border: 1px solid #900;
		position: relative;
	}
	.aside { position: absolute; height: 100%; width: 300px; top: 0; bottom: 0; }
	.right { 
		position: relative; 
		background: blue;
		min-height: 200px;

		margin-left: 320px;
	}
		.left1,.left2 {  background: red;position: absolute;left: 0; width: 100%;}
		.left1 { height: 20%; margin-bottom: 20px;  top: 0;}
		.left2 {  bottom: 0; height: 78%;  }

</style>
</head>


<body>
<div class="wrap">
<div class="aside">
	<div class="left1">Left1</div>
	<div class="left2">Left2</div>
</div>
<div class="right">Right Content</div>
</div>
</body>
</html>

Sam Trammell · February 15, 2010

Очень круто! Только в IE левая колонка не отображается.(

psywalker · February 15, 2010

Очень круто! Только в IE левая колонка не отображается.(

Добавь сразу для ИЕ6-7

.aside {

position: absolute;

height: 100%;

width: 300px;

height: auto;

top: 0;

bottom: 0;

_height: expression(this.parentNode.offsetHeight-0+'px');

left: 0;

Sam Trammell · February 15, 2010

Вот спасибо!)))

psywalker · February 15, 2010

Вот спасибо!)))
Вот спасибо!)))

Вот пожалуйста :lol:

Sign In

Один div над другим

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information