Помогите написать css файл
Ну как вариант вообще без паддингов и маргинов. но html код немного поменян, ага
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html {
height: 100%;
}
body {
width: 100%;
height: 100% !important;
}
div#body {
width: 1024px;
height: 768px;
}
div.rel {
position: relative;
width: 100%;
height: 100%;
}
div#menu {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 150px;
background-color: red;
}
div#sidewrapper {
position: absolute;
left: 0px;
top: 160px;
bottom: 0px;
width: 300px;
background-color: yellow;
min-height:500px;
}
div#side1out {
position: absolute;
left: 10px;
right: 10px;
top: 20px;
height: 300px;
background-color: #f08080;
}
div#side2out {
position: absolute;
top: 340px;
left: 10px;
bottom: 10px;
right: 10px;
background-color: #f08080;
}
div#side1in {
position:absolute;
left: 30px;
top:40px;
right:30px;
bottom:40px;
background-color:008b;
}
div#side2in {
position:absolute;
left: 30px;
top:40px;
right:30px;
bottom:40px;
background-color:008b;
}
</style>
</head>
<body>
<>
<div class='rel'>
<div id="menu"></div>
<div id="sidewrapper">
<div class="rel">
<div id="side1out">
<div class="rel">
<div id="side1in"></div>
</div>
</div>
<div id="side2out">
<div class="rel">
<div id="side2in"></div>
</div>
</div>
</div>
</div>
</div>
<>
</body>
</html>
не. не годится. абсолютная позиция считается от края окна. воюю с пэдингами и маргинами.
абсолютная позиция считается от края окнаили от родительского элемента со свойством position:relative
По крайней мере то что я привел - выглядит как на примерном рисунке.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Rabbit</title>
<style type="text/css">
div#menu {background:red;height:50px;}
div#sidewrapper {background:yellow;width:150px;margin-top:17px;padding:10px 0px 15px;}
div#sidewrapper div.out {background:pink;margin:10px 0 15px;padding:15px 0px;}
div#sidewrapper div.in {background:magenta;margin:0px 10px;}
div#side1 div.in {height:200px;}
</style>
</head>
<body>
<div id="body">
<div id="menu"></div>
<div id="sidewrapper">
<div id="side1" class="out">
<div class="in"></div>
</div>
<div id="side2" class="out">
<div class="in">
<p>Наталья вообще никогда не была особенно склонна к запорам. Обычно процесс каканья занимал у нее не более семи минут - из них она как следует тужилась всего лишь минуты две. Остальное время тратилось на предварительную "подготовку" к процессу. Иногда, правда, когда прелестная кака никак не хотела покидать молодой организм, Наташа массировала свою проказницу-попку пальчиком и это безотказно действовало.</p>
</div
</div>
</div>
</div>
</body>
</html>
гугли margin collapsing
немного сменил html код т.к. он каккой-то нелогичный
немного сменил html код т.к. он каккой-то нелогичный
в твоём варианте сиреневые дивы стыкуются по верхнему краю с серыми, а должны целиком заключаться в оболочку из серых. вот у меня приблизительно так же получается.
исправил
погугли по margin collapse и сразу поймешь в чем дело
погугли по margin collapse и сразу поймешь в чем дело
Спасибо. Нагуглил вот этот мануал: http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-m...
Всё понял.
Всё понял.
Оставить комментарий
YUAL
ЕСть конструкция вида.Должно выглядеть приблизительно так:При чём первый сиреневый прямоугольник имеет постоянные размеры, а нижний сиреневый прямоугольник имеет переменную высоту. Отступы везде должны быть одинаковые.
Я запутался во всех этих бесконечных падингах и маргинах.