Решено! Закончил CSS и HTML на
Дно.
Хорошо, вот ситуация. У меня есть страница с div на стороне, сверху и снизу. Div на стороне находится на 225px слева. Div сверху - 25 пикселей, а div снизу - 20 пикселей. То, что я хочу, это div в середине всех них, и поэтому он изменяет размер (и прокручивается) в зависимости от размера браузера посетителей.
То, что у меня есть, работает, но не будет прокручиваться, и имеет неправильную ширину, поэтому я должен центрировать весь свой контент в нем. Он просто использует ширину браузера, но немного приподнялся с полем, поэтому он фактически висит под боковой панелью.
Быстрый набросок его настройки.
Есть идеи?
Key:
меню является верхним.
bottom_menu - это нижнее меню.
содержание - это та часть, с которой мне нужна помощь, в центре.
боковая панель - это то, что идет на стороне.
CSS:
@charset "UTF-8";
/* CSS Document */
html {
height:100%;
}
img
{
border-style: none;
color: #FFF;
text-align: center;
}
body {
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:#000;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
width:225px;
min-height:100%;
position:fixed;
top:25px;
left:0px;
overflow:hidden;
padding-left:5px;
padding-top:5px;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:25px;
position:fixed;
top:0px;
left:0px;
overflow:hidden;
padding-left:5px;
}
.content {
width:100%;
top:25px;
height:100%;
overflow:hidden;
position:fixed;
padding-left:5px;
padding-top:5px;
background-color:#FFF;
margin-left:112px;
font: 14px Helvetica, Arial, Sans-Serif;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:20px;
position:fixed;
bottom:0px;
left:0px;
overflow:hidden;
padding-left:5px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
}
HTML (размещение в DIV):
<body>
<div class="sidebar">CONTENT IN SIDEBAR</div>
<div class="menu">CONTENT IN TOP MENU</div>
<div class="bottom_menu">CONTENT IN BOTTOM MENU</div>
<div class="content">CONTENT IN CONTENT</div>
</body>
Готово CSS
@charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
height:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
min-height:100%;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
min-height:100%;
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
Готовый HTML:
<body>
<div class="menu">HEADER CONTENT</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1">
CONTENT
</div>
</div>
<div class="col2">
LEFT SIDEBAR CONTENT
</div>
</div>
</div>
<div class="bottom_menu">FOOTER CONTENT</div>
<div class="clear"></div>
</body>