Блочная верстка

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем varya, 16 сен 2010.

  1. varya

    varya Гость

    Здравствуйте. Я создаю сайт из трех колонок. В левой колонке располагается меню. У сайта есть отступы слева и справа. Но при сворачивании окна размеры границ остаются прежними, а размер самого окна обрезается слева и справа. Помогите, пожалуйста, разобраться. Вот CSS код:

    Код (Text):
    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 */
    #header { background: url(images/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(images/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
    }
    .lang #selected {
    COLOR: red}  
    .inf { background: url(images/inf.jpg) no-repeat 0px 0px; display: block; width: 404px; height: 37px; float: right; margin: 73px 20px 0 0; }

    #middle_container { background: url(images/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; }
    span.list_tit { font-size: 14px; color: #173488; padding-left: 10px;}
    span.list_tit_right { font-size: 14px; color: #a1493a; }
    span.list_text { font-size: 10px; color: #757474; }
    .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
    }
    .banner IMG {
    BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 15px; MARGIN-LEFT: 3px; BORDER-LEFT: 0px; MARGIN-RIGHT: 3px; BORDER-BOTTOM: 0px; HEIGHT: 50px
    }    
    .footer img { border: 1px solid #d0cece; }
    .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; }
    .embl { background: url(images/logo1.gif) no-repeat 0px 0px; display: block; width: 60px; height: 60px; float: left; margin: 18px 0 10px 10px; padding: 18px 0 10px 10px;}
    .left_foot_cont { width: 545px; float: left; margin-top: 25px; padding-right: 24px; }
    .left_foot_cont ul li { clear: both; border-bottom: 1px dashed #d0cece; margin-bottom: 15px; padding-bottom: 15px; }
    .left_foot_cont ul li img {
    float: left;
    border: 2px solid #d0cece;
    padding-top: 20px;
    }
    А вот html:

    Код (Text):
    <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>
    Заранее благодарю.
     
  2. astronom

    astronom Гость

    В этих отступах отображается какие-то картинки (в смысле, фоновые)?
    Если да, нужно масштабировать эти изображения (это уже скорее к JS вопрос) ;)
     
Загрузка...

Поделиться этой страницей