.bdiv{width: 800px; margin: 10px auto 50px auto;} }

[bodega]

Oi pessoal, eu não consigo compreender uma coisa. Tenho um trecho de código CSS assim:

.bdiv {  
        /* background-image: url(./images/bgy.jpg);*/
        /*background-repeat: repeat-y; */
        width: 800px;  
        margin: 10px auto 50px auto;
        }

Esse código acima deixa "TODA" a página centralizada. No entando o .bdiv esta somente nesse trecho do html:

<div class= "bdiv">
<div><img src= "./images/banner_01.jpg" height= "29" alt= ""/>
<img src= "./images/banner_02.jpg" height= "29" alt= "" />
<img src= "./images/banner_03.jpg" height= "33" alt= "" />
<img src= "./images/banner_04.jpg" height= "30" alt= "" />
<img src= "./images/banner_05.jpg" height= "32" alt= "" />
<img src= "./images/banner_06.jpg" height= "43" alt= "" />
</div>

Eu não entendo porque TODA a página fica centralizada e não somente as imagens 1,2,3,4,5,6. Eu não sei o que faz com que a "class= "bdiv" consiga centralizar a página toda. Porque "class= "bdiv"" esta somente no trecho acima. Abaixo esta o código completo, tanto o CSS quanto o HTML.

Abaixo esta o documento CSS: (Eu deixei tudo como comentário para ter certeza de que quem estava centralizando tudo era o .bdiv e não outra classe.)

/*html {
height: 100%;
text-align: right;
        }
        */
        
/*
body {
background-color: #dcdcdc;
margin: 0px auto 20px auto;
font-family: verdana, arial;
font-size: 12px;
color: #999999;
height: 100%;
text-align: left;
}
*/


.bdiv {  
        /* background-image: url(./images/bgy.jpg);*/
        /*background-repeat: repeat-y; */
        width: 800px;  
        margin: 10px auto 50px auto;
        }
        
        
.bdiv img  {margin: 0px; display: block; }


/*
div { margin: 0px; }
        */
        
        /*
.content {
        margin: 0px 80px 0px 184px;
        text-align: left;
        width: 535px;
        }       
        */
        /*
.links {
width: 160px;   
float: left;
margin: 0px 0px 0px 14px;
text-align: left;
        }       
        */
        /*
a {
color: #aaaaaa;
letter-spacing: 1.8px;
text-decoration: none;
padding: 0px 2px 0px 2px;
        }
        */
        
        /*
a:hover {
border-bottom: 1px dotted #aaaaaa;
background-color: #ffffff;
color: #7a6083;
}       
        */
        
        /*
.links a {
        display: block;
        margin: 0px 10px 2px 10px;      
        border-bottom: 1px solid #eeeeee;       
        padding: 2px;
        font-size: 11px;
        background-color: #efeeee;
         }      
         */
        
         /*
.links a:hover { background-color: #c8b7ce; color: #eeeeee; border-bottom: 1px dotted #eeeeee; }
*/

/*
.links a:first-letter { color: #cccccc; margin: 0px 1px 0px 2px; }
*/
                
        /*
.ftdiv {
        height: 40px;
        background-image: url(./images/footer.jpg);
        background-repeat: no-repeat;
        width: 800px;   
        text-align: left;
        }       
        */
        
        /*
.ftdiv p {
margin: 0px 70px 0px 185px;
padding: 0px 0px 0px 0px;
color: #777777;
font-size: 10px;
text-align: center;
        }
        */
        
        /*
.ftdiv a {
background-color: transparent;
letter-spacing: 1.5px;
        }
        */
        
        /*
.ftdiv a:hover { background-color: #ffffff; }           

        */
        
        /*
.content p { margin: 12px 2px 12px 10px; }
        
        */
        
        /*
h1 {
color: #888888;
font-weight: 100;
font-size: 14px;
background-image: url(./images/h1.jpg);
background-repeat: no-repeat;
height: 40px;
width: 543px;
padding: 11px 0px 0px 5px;
margin: 10px 0px -5px 0px;
text-align: center;
letter-spacing: 3px;
font-family: verdana, arial;
        }                       
        */
        
        
/*
h2 {
text-align: right;
color: #666666;
font-weight: 100;
font-size: 10px;
letter-spacing: 1.5px;
margin: 0px  35px 20px 0px;
        }
        */
        
        /*
.content img {
margin: 3px;
        }
        */
        
        /*
h4 {
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid #999999;
letter-spacing: 1.5px;
margin: 10px 10px 10px 10px;
font-size: 12px;
font-weight: 100;
color: #7a6083;
}
*/      

/*
.links div {
background-color: #eeeeee;
margin: 0px 10px 0px 10px;
font-size: 9px;
padding: 2px;
border-bottom: 0px solid #999999;
        }
        */
        
        /*
.links div a { margin:2px 0px 2px 0px; }                
        */
        /*
.links p { margin: 2px; }       
*/

html:

<html>
<head>

<!--Inicia o titulo do site-->
<title>TITULO DA PAGINA</title>
<!--Termina o titulo do site-->

<link href="style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="'-'-'balbal" />
<meta name="generator" content="Blabla" />
</head>
<body>


<div class= "bdiv">

<div><img src= "./images/banner_01.jpg" height= "29" alt= ""/>
<img src= "./images/banner_02.jpg" height= "29" alt= "" />
<img src= "./images/banner_03.jpg" height= "33" alt= "" />
<img src= "./images/banner_04.jpg" height= "30" alt= "" />
<img src= "./images/banner_05.jpg" height= "32" alt= "" />
<img src= "./images/banner_06.jpg" height= "43" alt= "" /></div>


<div class= "links">


<h4>Update</h4>
<div><p>balbalbalblablalblalblab </p>
<a href= "#">xbalbalbalblablalblalblab..</a>
</div>

<h4>balbalbalblablalblalblab</h4>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>

<h4>balbalbalblablalblalblab</h4>
<a href= "#">~balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>
<a href= "#">~ balbalbalblablalblalblab</a>

</div>




<div class= "content">


<h1>About The Design</h1>
<p><img src= "./images/avi.jpg" style= "float: left;" alt= "" />balbalbalblablalblalblab</p>
<p>I <a href= "#">enjoyed</a> balbalbalblablalblalblab</p>
<h2>balbalbalblablalblalblab</h2>

<h1>balbalbalblablalblalblab</h1>

<p>balbalbalblablalblalblab.</p>
<p>balbalbalblablalblalblab.</p>
<p>balbalbalblablalblalblab</p>
<h2>balbalbalblablalblalblab</h2>

</div>
</div>
</body>
</html>

Editado Março 25, 2012 por bodega

[bodega]

Descobri !

O erro estava neste trecho

<div class= "bdiv"> <!--  1ª div começa aqui -->

<div> <!--  2ª div começa aqui -->
<img src= "./images/banner_01.jpg" height= "29" alt= ""/>
<img src= "./images/banner_02.jpg" height= "29" alt= "" />
<img src= "./images/banner_03.jpg" height= "33" alt= "" />
<img src= "./images/banner_04.jpg" height= "30" alt= "" />
<img src= "./images/banner_05.jpg" height= "32" alt= "" />
<img src= "./images/banner_06.jpg" height= "43" alt= "" />
</div> <!--  2ª div termina aqui --> 

<!-- <div>  O 1ª div deveria terminar aqui, mas eu não fechei ele, então ele "vasou" pra página toda --> <!-- O erro estava nesta linha -->

Quando eu coloquei o div que faltava, somente a imagem foi centralizada.

Editado Março 25, 2012 por bodega