Ray Wen
Пикселами я выровнил края, т.е. задал height: 500px всем слоям, а вот как сделать чтобы они равнялись автоматически при забивании текстом?
21. Antonio - 09 Июля, 2006 - 15:29:28 - перейти к сообщению
22. Antonio - 21 Июля, 2006 - 06:40:44 - перейти к сообщению
Здаврова всем!
Ну че народ подскажет мне ответ на вопрос http://tvoyweb.ru/forums/topic.p...ge=10#1152471975
Дайте хоть наводку...
Ну че народ подскажет мне ответ на вопрос http://tvoyweb.ru/forums/topic.p...ge=10#1152471975
Дайте хоть наводку...
23. Ray Wen - 21 Июля, 2006 - 08:41:49 - перейти к сообщению
Antonio
В этом случае только хитрить с заливкой и подводить общую планку clear:both... по другому никак... хотя возможно и можно, но времени проверять это нету...
В этом случае только хитрить с заливкой и подводить общую планку clear:both... по другому никак... хотя возможно и можно, но времени проверять это нету...
24. Antonio - 21 Июля, 2006 - 11:13:58 - перейти к сообщению
Ray Wen
Понятно, буду эксперементировать, но если у кого есть идеи пишите.
Понятно, буду эксперементировать, но если у кого есть идеи пишите.
25. Antonio - 25 Июля, 2006 - 12:42:58 - перейти к сообщению
Вот кое что сделал, но теперь некорректно отображается в Фоксе и Опере, посмотрите недочеты, помогите разобраться что не так. Вот код:
Le и R должны тянуться и не выходить за пределы родительского слоя, и еще желательно чтобы Le и R тянулись вместе, завися друг от друга.
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Misc</title>
<style type="text/css">
.m{
display:table;
width: 880px;
height: 700px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
.le{
display:cell;
float:left;
width: 120px;
height: 100px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
top: 108px;
left: 2px;
margin-top: 2px;
text-align: left;
padding-left: 5px;
}
.r{
display:cell;
width: 748px;
height: 100%;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-top: 2px;
}
.g {
width: 874;
height: 10px;
font-size: 0px;
line-height: 0px;
border: 1px solid #000000;
}
.lb {
width: 874;
height: 80px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.l {
width: 200px;
height: 80px;
margin-left: 15px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.b {
width: 468px;
height: 60px;
border: 1px solid #000000;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
position:absolute;
right:80px;
top:23px;
}
</style>
</head>
<body>
<div class="m">
<div class="g"></div>
<div class="lb">
<div class="l"></div>
<div class="b"></div>
</div>
<div class="g"></div>
<div class="le">("<BR>" 72 раза) 123</div>
<div class="r">("<BR>" 72 раза) 456</div>
</div>
</body>
</html>
<head>
<title>Misc</title>
<style type="text/css">
.m{
display:table;
width: 880px;
height: 700px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
.le{
display:cell;
float:left;
width: 120px;
height: 100px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
top: 108px;
left: 2px;
margin-top: 2px;
text-align: left;
padding-left: 5px;
}
.r{
display:cell;
width: 748px;
height: 100%;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-top: 2px;
}
.g {
width: 874;
height: 10px;
font-size: 0px;
line-height: 0px;
border: 1px solid #000000;
}
.lb {
width: 874;
height: 80px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.l {
width: 200px;
height: 80px;
margin-left: 15px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.b {
width: 468px;
height: 60px;
border: 1px solid #000000;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
position:absolute;
right:80px;
top:23px;
}
</style>
</head>
<body>
<div class="m">
<div class="g"></div>
<div class="lb">
<div class="l"></div>
<div class="b"></div>
</div>
<div class="g"></div>
<div class="le">("<BR>" 72 раза) 123</div>
<div class="r">("<BR>" 72 раза) 456</div>
</div>
</body>
</html>
Le и R должны тянуться и не выходить за пределы родительского слоя, и еще желательно чтобы Le и R тянулись вместе, завися друг от друга.
26. Ray Wen - 25 Июля, 2006 - 13:27:45 - перейти к сообщению
Почитай тут...
27. Antonio - 28 Июля, 2006 - 11:23:09 - перейти к сообщению
Вернулся почти к томуже от чего уходил, только теперь слои меню и содержания не вылазят за родительское окно, в опере осле и фоксе отображается одинаково, но немогу сделать чтобы слои меню и содержания зависели друг от друга, т.е если один слой высотой 600 px то и второй должен быть такимже. Вот код:
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
#m {
width: 880px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #E7EAF5;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
#g {
width: 870;
height: 10px;
font-size: 0px;
line-height: 0px;
border: 1px solid #000000;
}
#w {
background: url(background.gif) repeat-y right;
}
#h {
height: 80px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
#c {
width: 100%;
height: 100%px;
background: url(background.gif) repeat-y right;
float: right;
margin-left: -200px;
}
#co {
margin-left: 200px;
margin-top: 2px;
margin-bottom: 2px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
#s {
width: 196px;
height: 600px;
float: left;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-top: 2px;
margin-bottom: 2px;
margin-right: 2px;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
#l {
width: 200px;
float: left;
height: 80px;
margin-left: 5px;
}
#b {
width: 468px;
height: 60px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
float: left;
margin-left: 100px;
margin-top: 10px;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
#f {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
.c {
height: 0;
clear: both;
font-size: 0px;
line-height: 0px;
}
</style>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<div align="center">
<div id="m">
<div id="g"></div>
<div id="h">
<div id="l"></div>
<div id="b">Banner 468 x 60 px</div>
</div>
<div id="g">
<div align="right">
</div>
</div>
<div id="w">
<div id="c">
<div id="co">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.
</div>
</div>
<div id="s">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
<div class="c"> </div>
</div>
<div id="f">footer</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
#m {
width: 880px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #E7EAF5;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
}
#g {
width: 870;
height: 10px;
font-size: 0px;
line-height: 0px;
border: 1px solid #000000;
}
#w {
background: url(background.gif) repeat-y right;
}
#h {
height: 80px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
#c {
width: 100%;
height: 100%px;
background: url(background.gif) repeat-y right;
float: right;
margin-left: -200px;
}
#co {
margin-left: 200px;
margin-top: 2px;
margin-bottom: 2px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
#s {
width: 196px;
height: 600px;
float: left;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-top: 2px;
margin-bottom: 2px;
margin-right: 2px;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
#l {
width: 200px;
float: left;
height: 80px;
margin-left: 5px;
}
#b {
width: 468px;
height: 60px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
float: left;
margin-left: 100px;
margin-top: 10px;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
#f {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family: Tahoma;
font-size: 11px;
color: #16285C;
}
.c {
height: 0;
clear: both;
font-size: 0px;
line-height: 0px;
}
</style>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<div align="center">
<div id="m">
<div id="g"></div>
<div id="h">
<div id="l"></div>
<div id="b">Banner 468 x 60 px</div>
</div>
<div id="g">
<div align="right">
</div>
</div>
<div id="w">
<div id="c">
<div id="co">
<h1>content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.
</div>
</div>
<div id="s">
<h1>sidebar</h1>
<ul>
<li>link one</li>
<li>link two</li>
</ul>
</div>
<div class="c"> </div>
</div>
<div id="f">footer</div>
</div>
</div>
</body>
</html>