MIT » 15.03.2009 (Вс) 16:54
Хакер » 15.03.2009 (Вс) 17:19
iGrok » 15.03.2009 (Вс) 17:32
MIT » 15.03.2009 (Вс) 17:48
В том, что "<div> с данными" может быть любой высоты, соответственно рамка для должна быть "резиновой". 1 и 3 - header и footer соответственно, а 2 - растягиваемая чать рамки.Хакер писал(а):в чём смысл делить фон на три картинки, вместо использования одной?
<div style="border:#FF0000; border-width:2; width:400; height:40">
</div>
<div style="border:#FF0000; border-width:2; width:400">
<div style="border:#00FF00; border-width:1; width:380; height:40; margin-left:8; margin-top:-22">
text text text<br/>
argag<br/>
arg<br/>
</div>
</div>
<div style="border:#FF0000; border-width:2; width:400; height:10">
</div>
MIT » 15.03.2009 (Вс) 19:49
<link href="testttt.css" rel="stylesheet" type="text/css">
<div id="f_h">
</div>
<div id="f_wrap">
<div id="ttt">
text text text<br/>
argag<br/>
arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>
</div>
</div>
<div id="f_b">
</div>#f_h {
height: 124;
background-image: url("__top.png");
background-repeat: no-repeat;
margin: auto;
width: 868;
height: 124;
}
#f_wrap {
background-image: url("__w.png");
background-repeat: repeat-y;
margin: auto;
width: 868;
}
#f_b {
background-image: url("__b.png");
background-repeat: no-repeat;
width: 868;
height: 12;
margin: auto;
}
#ttt {
background-color:#CCCCCC;
margin-left:12;
margin-right:12;
margin-top:-98;
}
alibek » 15.03.2009 (Вс) 20:26
MIT » 15.03.2009 (Вс) 20:34
MIT » 15.03.2009 (Вс) 20:44
#ttt {
background-color:#CCCCCC;
margin-left:12;
margin-right:12;
op: -98;
position: relative;
}
alibek » 15.03.2009 (Вс) 21:09
<div [position:relative]>
<div id=1></div>
<div id=2></div>
<div id=3></div>
<div id=data [position:absolute; top:200px]></div>
</div> MIT » 15.03.2009 (Вс) 22:13
Да, но при этом блок 2 ужимается до нулевого размера, и получается, что идет сначала заголовок, потом подвал, и поверх всего этого ложится текст, высота которого слихвой перекрывает высоту заголовок+подвал и накладывается на нижеследующие элементы.alibek писал(а):Как-то так.
dr.MIG » 15.03.2009 (Вс) 22:32
<!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">
<html>
<header>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-color:red;
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
#header {
background-color:green;
height: 3em;
width: 100%;
}
#footer {
background-color:blue;
height: 2.5em;
width: 100%;
position: absolute;
bottom: 0;
}
#content {
margin-top:-1.25em;
margin-left:1em;
margin-right:1em;
background-color:white;
}
</style>
</header>
<body>
<html>
<body>
<div id="header">
header
</div>
<div id="content">Реальность нетривиальна. Сомнение, как следует из
вышесказанного, естественно понимает под собой напряженный закон
исключённого третьего, ломая рамки привычных представлений. Любовь,
конечно, естественно раскладывает на элементы принцип восприятия, при
этом буквы А, В, I, О символизируют соответственно общеутвердительное,
общеотрицательное, частноутвердительное и частноотрицательное
суждения. По своим философским взглядам Дезами был материалистом и
атеистом, последователем Гельвеция, однако сомнение раскладывает на
элементы интеллигибельный закон внешнего мира, не учитывая мнения
авторитетов. Отношение к современности непредвзято осмысляет
онтологический конфликт, не учитывая мнения авторитетов.</div>
<div id="footer">
footer
</div>
</body>
</html>
</html>
MIT » 15.03.2009 (Вс) 23:13
Ммм... Почти.dr.MIG писал(а):Тебе это надо?
<style type="text/css">
<!--
#wrap {
background-image: url(__w.png);
background-repeat: repeat-y;
width:868;
}
#head {
background-image: url(__top.png);
background-repeat: no-repeat;
width:868;
height:124;
}
#f {
background-image: url(__b.png);
background-repeat: no-repeat;
width:868;
height:10;
clear:both;
}
#mydata {
background-color: #CCCCCC;
margin-top:22;
margin-left:10;
margin-right:10;
float:left;
width:848;
}
-->
</style>
arg<br/>arg<br/>arg
<div id="wrap">
<div id="head">
<div id="mydata">
arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>arg<br/>
</div>
</div>
<div id="f"></div>
</div>
alibek » 16.03.2009 (Пн) 0:10
MIT писал(а):Да, но при этом блок 2 ужимается до нулевого размера
MIT » 16.03.2009 (Пн) 8:02
Надо помнить о том, что div с данными заранее неизвестной высоты, значит и высоту "распорки" надо высчитывать динамическиalibek писал(а):Так его распереть надо чем-нибудь.
Можно скриптом (вычислять и задавать высоту в пикселах), можно прозрачной картинкой или другим div-ом.
RayShade » 16.03.2009 (Пн) 11:23
MIT » 17.03.2009 (Вт) 21:20
Ну не знаю, меня, в общем-то, и так устраивает.RayShade писал(а):z-index полезная штука, если надо что-то поставить перед чем-то.
Хакер » 17.03.2009 (Вт) 21:23
"цвет фона #FFF, но с отступами 10px слева и справа"?
MIT » 17.03.2009 (Вт) 21:27
Жаль. А что можно сделать для получения равносильного результата?Хакер писал(а):Нет. Отступ задаётся только для фоновых картинок.
Хакер » 17.03.2009 (Вт) 21:35
MIT » 17.03.2009 (Вт) 22:53
dr.MIG » 18.03.2009 (Ср) 0:08
MIT » 18.03.2009 (Ср) 10:23
Смотрел. Только footer там получается над тегом body, перекрывая его содержимое.dr.MIG писал(а):А ты мой код смотрел?
dr.MIG » 18.03.2009 (Ср) 13:12
MIT » 18.03.2009 (Ср) 13:51
На самом деле я просто переделываю шаблон к готовому движку, а не ваяю дизайн с нуляdr.MIG писал(а):Было бы понятнее, если бы было видно готовый дизайн, который надо сверстать и требования к нему (какой элемент фиксированный по ширине или высоте, какой резиновый и т.п.).
MIT » 25.03.2009 (Ср) 17:52
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}<div class="mydiv"><a href="...">text</a></div> dr.MIG » 25.03.2009 (Ср) 18:03
MIT » 25.03.2009 (Ср) 18:09
MIT » 25.03.2009 (Ср) 20:08
<div class="mydiv1"><a href="...">text</a></div>
<div class="mydiv2"><a href="...">text</a></div>
<div class="mydiv3"><a href="...">text</a></div>
<div class="mydiv4"><a href="...">text</a></div>.mydiv1, mydiv2, .mydiv3, .mydiv4 {
text-transform:uppercase;
}.mydiv1 {
width:100px;
}
.mydiv2 {
width:200px;
}
.mydiv3 {
width:300px;
}
.mydiv4 {
width:400px;
} iGrok » 25.03.2009 (Ср) 20:46
<div id="mydiv1" class="mydiv"><a href="...">text</a></div>
<div id="mydiv2" class="mydiv"><a href="...">text</a></div>
<div id="mydiv3" class="mydiv"><a href="...">text</a></div>
<div id="mydiv4" class="mydiv"><a href="...">text</a></div>.mydiv { text-transform:uppercase; }
#mydiv1 { width:100px; }
#mydiv2 { width:200px; }
#mydiv3 { width:300px; }
#mydiv4 { width:400px; }
...
.mydiv a:hover { ... }
...
MIT » 18.04.2009 (Сб) 19:53
Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 69