| |
|
|
| | Всем добрый день!
Сейчас пытаюсь сделать резиновый трехколоночный сайт. Хочеться добиться того, чтобы было на сайте горизонтальное меню. То есть ЧТОБЫ ЛЕВОЕ МЕНЮ БЫЛО ПРИЖАТО К ШАПКЕ, А СПРАВА ОТ НЕГО УХОДИЛО ПОД ШАПКОЙ ГОРИЗОНТАЛЬНОЕ МЕНЮ И ЧТОБЫ ОНО ШЛО НАД ПРАВОЙ ЧАСТЬЮ. Пожалуйста. помогите это организовать.
<body>
<div id="container">
<div id="header">
<? include("blocks/header_div.php"); ?>
</div>
<!--nav-->
<div class="menu_nav">
<? include("blocks/menu_nav.php"); ?>
</div>
<!--nav-->
<div id="left">
<? include ("blocks/lefttd.php"); ?>
</div>
<div id="right">
<? include ("blocks/pravtd.php"); ?>
</div>
<div id="content">
<p> </p>
</div>
<div id="clear"></div>
<div id="footer">
<p><strong>Footer</strong></p>
</div>
</div>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: hitball
(16.03.2010 в 11:09)
| | | Для пущей наглядности, нарисуй раскладку дивов на картинке. | |
| |
|
|
| |
 17.6 Кб |
|
| |
для: DJ Paltus
(16.03.2010 в 13:33)
| | | прикрепила файл | |
| |
|
|
| |
|
|
| |
для: hitball
(16.03.2010 в 13:44)
| | | проверено в FF3.6 и IE6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Резиновск</title>
<style type="text/css">
body, html {
margin:0;
height:100%
}
#menu, #images{
position:absolute;
border:1px solid red;
width:150px;
height:90%;
background-color:white;
}
#menu{
left:0;
}
#images{
right:0;
top:15%;
height:85%;
}
#canvas{
position:absolute;
width:100%;
height:100%;
background-color:yellow;
padding: 0 0 0 0px;
}
#content{
margin: 0 152px 0 152px;
}
#header{
height:10%;
width:100%;
background-color:blue;
}
#hmenu{
height:5%;
background-color:gray;
margin-left:150px;
}
</style>
</head>
<body>
<div id="canvas">
<div id=header>
Башка
</div>
<div id="menu">
menu!
</div>
<div id=hmenu>
гор. меню
</div>
<div id=content>
проверено очень длинной строкой
</div>
<div id="images">
images!!
</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.03.2010 в 13:53)
| | | спасибо огромное, сейчас посмотрю. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(16.03.2010 в 13:53)
| | | теперь у меня следующая проблема, не могу встроить footer.
пожалуйста, подскажите, как вы видите его встраивание | |
| |
|
|
| |
|
|
| |
для: hitball
(17.03.2010 в 14:45)
| | | Тогда меняем подход.
Идем сюда: http://www.linkexchanger.su/2008/16.html, тырим верстку, после чего вносим некоторые изменения, CSS:
body, html {height:100%}
#content {
float:right;
width:50%;
background-color:#CCC;
}
#sidebar {
float:left;
width:30%;
background-color:#FFC;
}
#otherbar {
float:right;
width:20%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}
#hmenu{
float:left;
background-color:green;
width:70%;
}
|
И html:
<div id="header">
... шапка страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id=hmenu>
горменю
</div>
<div id="otherbar">
... колонка меню ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="footer">
... подвал ...
</div>
|
особое внимание на то, что блок правого меню теперь выдается РАНЬШЕ блока содержимого, чтобы его первым прижало направо. | |
| |
|
|
