| |
автор: AtomicBlast (08.11.2006 в 19:19) |
|
| | Собственно проблемка...
Есть макет сайта: Если использовать таблицу, то я все понимаю... но хотелось бы и слои использовать...
Макет такой:
шапка
лево право
подвал.
Шапка занимает по ширине 100%, по вертикале - 50px
лево - меню - горизонталь - 20% вертикаль - 100%
право - контент - горизонталь - 80% вертикаль - 100%
Вот с подвалом и возникли траблы. Как его расположить ровно под блоками лево и право, если их высота не известна?
Подскажите, пожалуйста, как сделать.
Вот цсс который я наваял...
.Top{
background-color:#000066;
border-bottom-color:#990000;
border-bottom-style:solid;
border-bottom-width:1px;
position:absolute;
display:block;
top:0px;
left:0px;
width:100%;
height:25px;
}
.Left{
background-color:#001166;
position:absolute;
display:block;
height:100%;
width:20%;
left:0%;
top:26px;
}
.Right{
background-color:#ffffff;
color:#000000;
border-left-color:#990000;
border-left-style:solid;
border-left-width:1px;
position:absolute;
display:block;
height:100%;
width:80%;
left:20%;
top:26px;
}
.Bottom{
background-color:#000099;
border-top-color:#990000;
border-top-style:solid;
border-top-width:1px;
position:absolute;
left:0px;
width:100%;
}
|
| |
| |
|
|
| |
|
|
| |
для: AtomicBlast
(08.11.2006 в 19:19)
| | | ваш css без структуры html ниочем не говорит.
вот один из примерв http://www.webmascon.com/topics/coding/43a.asp | |
| |
|
|
| |
автор: AtomicBlast (08.11.2006 в 20:29) |
|
| |
для: AlexSol
(08.11.2006 в 19:53)
| | | Спасибо за ссылку. Там похоже описана подобная ситуация.
Вот структура, но... она... просто праздник какой-то...
<div class="Top">
ghjghjghjghjghj
</div>
<!--Left Start -->
<div class="Left">jkl dgdfgdfgdf dfgdf gdfgdfgdfgdfgdfgdfg</div>
<!--Left End -->
<!--Right Start -->
<div class="Right">
dfgdfgdfdfgdfgfdgffd
<br />
</div>
<!--Right End -->
<div class="Bottom">bottom</div>
</div>
|
Там в классе bottom надо значение top как-то обозначить... | |
| |
|
|
| |
|
|
| |
для: AtomicBlast
(08.11.2006 в 19:19)
| | | Могу предложить такой вариант применения верстки слоями (тегами <div></div>):
HTML+CSS - код страницы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>New Site</title>
</head>
<style type="text/css">
html, body
{
margin:0;
padding:0;
height:100%;
width:100%;
}
.container
{
width:100%;
height:100%;
}
.topPage
{
width:100%;
height:50px;
background:#006;
border-bottom:1px solid #900;
}
.leftPage
{
float:left;
width:20%; /*Если не пройдет в других броузерах можно поставить значение 19,9%*/
height:100%; /*Если здесь не задавать высоту 100%(размер окна броузера), то теги div будут раздвигаться контентом */
background:#016;
}
.rightPage
{
float:left;
width:80%; /*Если не пройдет в других броузерах можно поставить значение 79,9%*/
height:100%; /*Если здесь не задавать высоту 100%(размер окна броузера), то теги div будут раздвигаться контентом */
background:#fff;
}
.bottomPage
{
width:100%;
height:50px;
background:#009;
border-top:1px solid #900;
}
</style>
<body>
<div class="container">
<div class="topPage">
</div>
<div class="leftPage">
</div>
<div class="rightPage">
</div>
<div class="bottomPage">
</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
автор: AtomicBlast (08.11.2006 в 20:42) |
|
| |
для: ilyaILF
(08.11.2006 в 20:31)
| | | Спасибо! У вас все работает.
У меня к вам пара вопросов:
1. Почему необходим в подобных случаях <div class="container"> ?
2. Почему не надо указывать параметр top? | |
| |
|
|
| |
|
|
| |
для: AtomicBlast
(08.11.2006 в 20:42)
| | | Вопрос 1 - скорее всего это дань уважения табличной верстки, и в тоже самое время, если будет необходимость задать фиксированное значение ширины (например для разрешения экрана 800x600) то достаточно будет изменить параметры одного тега <div class="container"></div> и весь сайт будет выглядеть по-прежнему.
Вопрос 2 - а зачем указывать параметр top, когда теги <div></div> идут по порядку: .topPage, .leftPage, .rightPage, .bottomPage?! Причем тег .topPage имеет ширину 100% и у него задана уже высота. | |
| |
|
|
| |
автор: AtomicBlast (09.11.2006 в 10:08) |
|
| |
для: ilyaILF
(08.11.2006 в 20:57)
| | | Спасибо. Теперь разобрался. | |
| |
|
|
