Не может окрашивать в фоновом режиме контейнера 960.gs - PullRequest
Новая
       29

Не может окрашивать в фоновом режиме контейнера 960.gs

4 голосов
/ 25 февраля 2011

Я использую 960.gs (http://960.gs) в качестве фреймворка CSS для моего сайта и пытаюсь раскрасить фоновые классы .container_12, а не классы .grid_12 для дополнительных 10px, которые я получаю на каждом сторона, давая решетке немного свободного пространства для дыхания.

Я посмотрел пример сайта 960.gs, и у него есть фон, повторяющийся по оси Y, и кажется, что он расширяется независимо от того, насколько велик или что находится внутри классов .grid_12 или .grid_16.

Когда я хочу покрасить фон в белый цвет (вместо повторения изображения по оси Y), создается впечатление, что мой .grid_12 плавает, и поэтому .container_12 не имеет высоты и, следовательно, белого фона.

Вот мой соответствующий HTML 

<body> 
    <div id="logoContainer" class="container_12"> 
        <div id="logo" class="grid_12"> 
            <h1>Logo</h1> 
        </div> <!-- end #logo --> 
    </div> <!-- end #logoContainer --> 
    <div class="clear"></div> 
    <div id="menuContainer" class="container_12"> 
        <div id="menu" class="grid_12"> 
            <ul> 
                <li><a href="#" class="selected">Link 1</a></li> 
                <li><a href="#">Link 2</a></li> 
                <li><a href="#">Link 3</a></li> 
                <li><a href="#">Link 4</a></li> 
            </ul> 
        </div> <!-- end #menu --> 
    </div> <!-- end #menuContainer --> 
    <div class="clear"></div>
    <div id="contentContainer" class="container_12">
        <div id="content" class="grid_12">
            <p>Content here</p>
        </div> <!-- end #content -->
    </div> <!-- end #contentContainer -->
    <div class="clear"></div>
</body>

и CSS 

/* 960.gs */
@import url('reset.css');
@import url('960.css');
@import url('text.css');

#contentContainer
{
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

1 Ответ

2 голосов
/ 25 февраля 2011

Чтобы ответить на мой вопрос, <div class="clear"></div> должен быть после каждого .grid_, а не каждого .container_

...