1

Сама задача выглядит как-то так: есть некоторое количество блоков, выровненных по центру страницы, нужно добавить слева от этих блоков картинку; я решил создать еще один блок с нужной background картинкой и прижать его с помощью float: left; к левому краю страницы, но из-за этого те блоки, что были в центре, уехали вниз. Мне же нужно, чтобы блок остался на месте (то есть в центре), а также даже при изменении размеров окна блок, который находился по центру, так и оставался в центре и как бы наезжал на края другого блока. Не могу понять, как это можно сделать... Надеюсь, я понятно сформулировал проблему.

3 ответа 3

2

Сформулировано непонятным языком, особенно непонятна часть с ресайзом окна. Дивы "уехали вниз", потому что:

  1. они все не помещаются в родительском контейнере,
  2. float необходимо устанавливать для самого левого блока.
1
  • Установил float для самого левого блока, но блоки которые были в центре сместились вертикально в конец блока для которого установил float: left; получилось это из за того что блок слева больше в высоту чем блок который в центре. Как решить проблему?
    – greshnik
    21 мар 2011 в 17:06
2

Можно попробовать так.

1) HTML разметка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>HTML сайт</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="header">
    <h1>Шапка страницы</h1>
    <p>XHTML+CSS сайт</p>
</div>
<!-- Начало основного блока -->
<div id="main">

    <!-- Начало блока правой панели -->
    <div id="leftboard">
        <p>Раздел</p>
        <ul>
            <li><a href="#">раздел</a></li>
            <li><a href="#">раздел</a></li>
            <li><a href="#">раздел</a></li>
            <li><a href="#">раздел</a></li>
            <li><a href="#">раздел</a></li>
        </ul>
        <p>Новости</p>
        <ul>
            <li class="news">А у нас в квартире газ...<br /><a href="#">далее</a></li>
            <li class="news">А у нас водопровод...<br /><a href="#">далее</a></li>
        </ul>
    </div>
    <!-- Конец блока правой панели -->

    <!-- Начало блока контента -->
    <div id="content">

    </div>
    <!-- Конец блока контента -->

</div>
<!-- Конец основного блока -->

<div id="footer">
    <p>
        <a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
        <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="vcss.gif" alt="Правильный CSS!" /></a>
    </p>
<!--<p>Created by <a href="mailto:element@localhost">Elementua</a> 2011</p>-->
</div>
</body>
</html>

2) Таблица стилей:

/* CSS Document */
body{
    color:#eee;
    width:752px;
    margin:0 auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

div, p, h1, h2, h3, h4, h5, h6, ul, li{
    margin:0;
    padding:0;
}

#header{
    color:#fc6;
    text-align:right;
    padding:0 15px 10px;
}

#header p{margin-top:-0.3em;}

#topmenu{
    padding:3px 0;
    text-align:center;
    border-bottom:2px dotted #eee;
}

#topmenu a{
    color:#900;
    font-weight:bold;
    text-decoration:none;
    margin:0 10px;
}

#main{background-color:#300;}

#leftboard{
    width:150px;
    min-height:400px;
    float:left;
    font-size:0.85em;
}

#leftboard ul{
    list-style-type:none;
    margin:10px 0;
}

#rightboard li{
    margin:0 20px;
    padding:3px;
}

#leftboard p{
    text-align:center;
    font-weight:bold;
    font-size:1.10em;
}

#content{
    width:600px;
    min-height:400px;
    margin-left:150px;
    border-left:2px dotted #eee;
}

.news{
    padding-bottom:15px;
    font-size:0.85em;
}

.news a{font-size:0.95em;}

#footer{
    padding:3px 10px;
    border-top:2px dotted #eee;
    font-size:0.75em;
    text-align:center;
}

body, #content{
    background-color:#000;
}

body, #header, #content, #topmenu, #rightboard a{
    color:#eee;
}

#rightboard p, #footer{
    color:#003;
    background-color:#fc6;
}
2

Не совсем понятно, что вы имели в виду в конце этого предложения

«...так и оставался в центре и как бы наезжал на края другого блока.»

А если сделать так

<div class="center-block">
    <div class="img_block"></div>
    <!-- Содержимое центрального блока -->
</div>

и CSS

.img_block {
    position:relative;
    width:300px; /* Ширина вашего блока с картинкой, сколько там вам нужно */
    margin-left:-300px; /* Отступ влево на ширину блока с картинкой */
    float:left; /* Чтобы не вытеснять содержимое центрального блока */
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.