нет фона

dmr · March 3, 2012

у стиля middle задан фон background: #988780; Но почему то, если не переменить стиль #middle:after фон не отображается. Я понимаю что стиль #middle:after растягивает #middle на всю высоту текста, но разве #middle не должен сам растягиваться без помощи #middle:after? Заранее спасибо. Просто сам могу на этот вопрос угрохать ни один день. :rolleyes:

CSS:

#wrapper {
    width: 100%;
    min-width: 1000px;

}
/* Header
—————————————*/
#header {
    height: 150px;
    background: #FFE680;
}
/* Middle
—————————————*/
#middle {
    border-left: 250px solid #B5E3FF;
    border-right: 250px solid #FFACAA;
    height: 100%;
    position: relative;
    background: #988780;
}
/*#middle:after {
    content: '.';
    display: block;

    visibility: hidden;
    height: 0;
}*/
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}
#content {
    padding: 0 20px;
}
/* Sidebar Left
—————————————*/
#sideLeft {
    float: left;
    width: 250px;
    position: relative;
    background: #B5E3FF;
    left: -250px;
}
/* Sidebar Right
—————————————*/
#sideRight {
    float: right;
    margin-right: -250px;
    width: 250px;
    position: relative;
    background: #FFACAA;
}
/* Footer
—————————————*/
#footer {
 clear: both;
    height: 100px;
    background: #BFF08E;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css"  />
</head>

<body>

<div id="wrapper">
    <!-- #header-->
    <div id="header">
	хедер
    </div>
    <div id="middle">  <!-- все пространство от хедера до футера-->
        <div id="container">
            <div id="content">
                контент
            </div><!-- #content-->
        </div><!-- #container-->
        <div class="sidebar" id="sideLeft">
            лефтменю
        </div><!-- .sidebar#sideLeft -->
        <div class="sidebar" id="sideRight">
            райтменю
        </div><!-- .sidebar#sideRight -->
    </div><!-- #middle-->
    <div id="footer">
        футер
    </div><!-- #footer -->
</div><!-- #wrapper -->

</body>
</html>

alexandr_v-vich · March 3, 2012

Разбирать детали уж не стану, суть такова: У вас некоторые элемента позиционируются через float, а некоторые обычно и ещё без clear. У вас не то чтобы фон не отображается, а скорее пространство, где этот фон будет виден.

Походу float - основная проблема на форуме...

Edited March 3, 2012 by alexandr_v-vich

Justnewone · March 3, 2012

Родитель (в данном случае без :after есть еще иные способы) не чувствует высоты дочерних элементов с float.

Sign In

нет фона

Question

dmr

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

alexandr_v-vich

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information