Comunidad de diseño web y desarrollo en internet online

Fondo div hijo crezca horizontalmente

Citar            
MensajeEscrito el 23 Mar 2012 05:22 pm
Hola, ya busque mucho (soy muy nueva en esto de los divs y css :oops: ) y no se como hacer lo siguiente:
Quiero que el color de fondo que tiene "#logo_right" se extienda a la izquierda de lo que queda de la pantalla. En el link pueden ver el espacio que queda en blanco

[url=http://altitux.com/prueba/prueba.html][/url]

mi código es el siguiente:

Código HTML :

</head>

<body>
<div id="head_total">
<div id="left"></div>
<div id="fondo"> </div>
<div id="titulo"></div>
<div id="logo_right"></div>
</div>

<div id="cuerpo">qsd</div>

</body>
</html>


Y el de estilos:

Código :

body
{
   background-color: #FFFFFF;
   margin-top:0;
   background-image:url(content/bg.gif);
   background-repeat:repeat;
   text-align:center;
   
}

#head_total {
   height:114;
   overflow: hidden;
} 


#left {
   float:left;
   width:24px;
   height:114px;
   background-image:url(_images/left.png);
   background-position:right top;
   background-repeat:no-repeat;
   padding:0px;   
}
#titulo {
   float:left;
   width:256px;
   height:114px;
   background-color:#1B2563;
   background-image:url(_images/name.jpg);
   background-repeat:no-repeat;
   background-position:left center;
   padding:0px;   
   
}

#logo_right {
   float:right;
   width:285px;
   height:114px;
   background-color:#1B2563;
   background-image:url(_images/header_right.jpg);
   background-repeat:no-repeat;
   background-position:right center;
   padding:0px;   
}

#cuerpo {
   clear:both;
   width:100%;
   
}


No puedo ponerle el relleno de color a el div padre por que entonces rellena también la imágen que esta hasta la izquierda que es un .png con una sombra como margen
Muchas Gracias ^^

Por tahita

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Mar 2012 05:50 pm
Pues en ese caso intercambia de lugar las cosas ;).

Observa esto:

Código HTML :

body
{
   background-color: #FFFFFF;
   margin-top:0;
   background-image:url(imgs/background.gif);
   background-repeat:repeat;
   text-align:center;
   
}

#head_total {
   overflow: hidden;
   background-image:url(imgs/left.png);
   background-position:left top;
   background-repeat:no-repeat;
} 
#inner-head-total {
   margin-left: 24px; /* <--- esto "saltea" la sombra del padre */
   background-color:#1B2563;
   height:114px;
}

#titulo {
   float:left;
   width:256px;
   height:114px;
   background-color:#1B2563;
   background-image:url(imgs/name.jpg);
   background-repeat:no-repeat;
   background-position:left center;
   padding:0px;   
   
}

#logo_right {
   float:right;
   width:285px;
   height:114px;
   background-color:#1B2563;
   background-image:url(imgs/header_right.jpg);
   background-repeat:no-repeat;
   background-position:right center;
   padding:0px;   
}

#cuerpo {
   clear:both;
   width:100%;
   
}

Código HTML :

<body>
<div id="head_total">
   <div id="inner-head-total">
      <div id="titulo">
      </div>
      <div id="logo_right">
      </div>
   </div>
</div>


<div id="cuerpo">qsd</div>

</body>


(Cambié la ruta a los archivos de imágenes)

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 23 Mar 2012 06:00 pm
:o muchas gracias!!,funciono perfecto, tan fácil que se ve hehe ^^

Por tahita

5 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.