|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
18.09.2010, 12:52 | #1 |
Пользователь
Регистрация: 05.11.2007
Сообщений: 57
|
Блочная верстка
Я создаю сайт из трех колонок. В левой колонке располагается меню. Есть отступы от границ слева и справа. Но при сворачивании окна размеры границ остаются прежними, а размер самого окна обрезается слева и справа. Помогите, пожалуйста, разобраться. Вот CSS код:
Код HTML:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none;} :focus { outline: 0;} h2, h3, h4 { font-weight: normal;} body {background: #adaca4; font: 14px Arial, sans-serif; line-height: 1.5em; color: #444;} .fix_width {width: 960px; margin: 0 auto;} .fix_width:after, .left_foot_cont ul li:after {content: " "; display: block; height: 0; clear: both; visibility: hidden;} a {text-decoration: none; color:#173488;} p {line-height: 1.7em;} #header {background: url(head_bck.png); height: 141px; z-index: 3; position: relative; margin: 20px 150px 0 150px;} .logo {float: left; margin: 20px 0 0 20px;} .logo h1 a {background: url(logo.jpg) no-repeat 0px 0px; display: block; width: 207px; height: 79px; text-indent: -9999px;} .lang {width: 80px; height: 18px; float: right; margin: 20px 10px 0 0;} .lang A {COLOR: #aaaaaa; TEXT-DECORATION: none} .inf {background: url(inf.jpg) no-repeat 0px 0px; display: block; width: 404px; height: 37px; float: right; margin: 73px 20px 0 0;} #middle_container {background: url(content_bck.png) repeat; position: relative; top: 0px; z-index: 3; padding-top: 10px; margin-left: 150px; margin-right: 150px; overflow:hidden;zoom:1;} #middle_container h2 {color: #173488; font-size: 18px; border-bottom: 2px solid #d9d9d9; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px;} .left_cont, .right_cont, .centered_cont{padding-bottom:30000px; margin-bottom:-30000px;} .left_cont {background:#fff repeat-y; width: 240px; margin-right:10px; margin-left:5px; float: left;} .left_cont ul {margin-top: 0px;} .left_cont ul li {clear: both; margin: 0; border-bottom: 1px dashed #d0cece;} .left_cont ul li a {display: block; padding: 10px 0; min-height: 20px;} .left_cont ul li a:hover { background: #c3c3c3;} .left_cont h3 {background: #173488;} .left_cont h4 {font-size: 14px; color: #fff;} .right_cont {background:#fff repeat-y; width: 230px; margin-left:10px; margin-right:5px; float: left;} .right_cont h3 { background: #173488; font-size: 18px; color: #fff; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px; } .right_cont ul { margin-top: 10px;} .right_cont ul li { padding: 10px 0 10px 0; border-bottom: 1px dashed #d0cece; } .centered_cont {background:#fff repeat-y; width: 450px; float: left;} .centered_cont img { margin: 4px 0 5px 0; border: 2px solid #d0cece;} .list_text {margin: 10px; font-size: 12px;color: #000000;} #footer { background: url(images/footer_bck.jpg) repeat-x; position: relative; top: 0px;margin-left: 150px; margin-right: 150px; margin-bottom: 10px; bottom: 10px;} .banner {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px; TEXT-ALIGN: center} .list_foot_text { margin: 20px 10px 10px 10px; font-size: 12px;} #footer h4 { font-size: 16px; text-shadow: 1px 1px 1px #0d2540; color: #fff; text-align: center; height: 50px; padding: 13px 0; background: url(images/slog_bck.jpg) no-repeat 50% 46px;} Код HTML:
<div id="header"> <div class="fix_width"> <div class="logo"> <h1><a href="#">HOME</a></h1> </div> <DIV class="lang"><SPAN id=selected><IMG src="images/az.gif"></SPAN> <A href="en/index.html"><IMG src="images/gb.gif"></A></DIV> <div class="inf"> </div> </div> </div> <div id="middle_container"> <div class="fix_width"> <div class="left_cont"> <ul> <li><a href="index.html"><span class="list_tit">INDEX</span></a></li> <li><h3><a href="news.html"><h4><b>NEWS</b></h4></a></h3></li> <li><a href="about.html"><span class="list_tit">ABOUT</span></a></li> </ul> <DIV class=banner><A href="http://www.first.org/" target=_blank><IMG src="images/first.png"></A> <A href="http://www.trusted-introducer.org/" target=_blank><IMG src="images/ti.jpg"></A><br></DIV> </div> <div class="centered_cont"> <h2>ABOUT</h2> <div class="list_text"> <p>abc</p> </div> </div> <div class="right_cont"> <h3>Latest news </h3> <div class="list_text"> <p>abc</p> </div> </div> </div> </div> <div id="footer"> <div class="fix_width"> <img src="images/logo1.gif" width="60" height="60" style="padding: 15px; margin-top: 15px; float:left;" /> </div> </div> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Блочная сортировка | oniya | Общие вопросы C/C++ | 1 | 19.08.2010 22:58 |
Delphi Блочная запись | Pord | Помощь студентам | 2 | 08.11.2008 10:57 |
Блочная верстка | Demonichka | HTML и CSS | 2 | 12.07.2008 01:31 |