CSSBlog ES

hvega · 02-01-2010, 04:50 PM

Hola!

Les escribo para ver si me pueden ayudar con el siguiente error: tengo una pagina con tres columnas la idea es que las columnas se expandan de acuerdo al contenido que va en el centro y que el color que deje sea el blanco y no el azul como lo hace ahora.

Aqui les adjunto el html y css para que me ayuden:

<body>
<div id="wrapper">
<div id="header"> </div>
<div id="faux">
<div id="leftcolumn">
<div id="logo"><a href="/"><img src="../../images/logo11.jpg" alt="logo" width="154" height="65" /></a></div>
<div id="Services_box">
<div id="Services">
</div>
</div>
</div>
<div id="content">
<div id="banner_box"><img src="../../images/banner.jpg" alt="banner" width="482" height="285" /></div>
<div id="topmenu_box">
<div id="topmenu"> </div>
<div id="welcom_box">
<span class="wel_text"></span><br />
<br />
<div> <p>{tag_pagecontent}</p>
</div>

</div>
</div>
</div>
<div id="rightcolumn">
<div id="info"><img src="../../images/info.png" alt="" width="181" height="44" /></div>
<div id="contect_box">
<div id="contect">

</div>
</div>
</div>
<div id="footer">

</div>
</div>
</div>

/*Layout*/

* { margin: 0; }

#wrapper {
margin: 0 auto;
width: 930px;
background-color:#45607B;
border:1px solid #003366;
}
#faux {
margin-bottom: 5px;
background-color:#45607B;
padding-left: 15px;
width:897px;
}
#header {
color: #333;
width: 930px;
background-image: url(../images/hdr_tp_img.jpg);
background-repeat: repeat-x;
height: 20px;
}
#leftcolumn {
position: relative;
width: 208px;
float: left;
}
#content {
float: left;
background-color:#FFF;
background-repeat:repeat;
width: 492px;
display: inline;
position: relative;

}
#rightcolumn {
position: relative;
width: 197px;
float: left;
}
#footer {
width: 897px;
clear: both;
margin: 10px 0px 10px 0px;
padding-left: 10px;
}
.clear { clear: both; background: none; }

/*Complementos Plantilla*/

#banner_box{
width:488px;
padding-top: 4px;
padding-left: 4px;
}
#logo{
width:180px;
height:100px;
float:left;
padding-top: 35px;
padding-left: 27px;
}

#Services_box{
width:208px;
float:left;
background-color:#FFF;
padding-bottom:15px;
}
#Services{
width:205px;
float:left;
background-color:#e6e8ef;
border:1px solid #CCC;
margin-top: 10px;
}
#contect_box{
width:197px;
float:left;
background-color:#FFF;
padding-bottom:15px;

}
#info{
width:180px;
height: 100px;
padding-top:35px;
padding-left:15px;
}
#contect{
width:190px;
float:left;
background-color:#e6e8ef;
border:1px solid #CCC;
margin-top: 10px;
}
#topmenu_box{
width:488px;
height:40px;
padding-bottom:15px;
}
#topmenu{
width:485px;
height:32px;
background-color:#222120;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin-left: 3px;
}

#welcom_box{
width:488px;
float:left;
}
.wel_text{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #31485d;
text-decoration: none;
padding-top: 10px;
padding-left:11px;
padding-bottom: 10px;
background-color:#FFF;
background-repeat:repeat-x;
}
.copy{
font-family: Tahoma;
font-size: 11px;
font-weight: normal;
color: #e9eaf1;
text-decoration: none;
}

p{
color:#121a21;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-decoration: none;
line-height: 18px;
text-align: justify;
margin-left: 10px;

}
a.whitelink:link, a.whitelink:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #e9eaf1;
font-size: 11px;
font-weight: normal;
text-decoration: none;
}

a.whitelink:active, a.whitelink:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #dee2ef;
font-size: 11px;
font-weight: normal;
text-decoration: none;
}

a.moreinfo:link, a.moreinfo:visited {
color:#46647f;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

a.moreinfo:active, a.moreinfo:hover {
color:#000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: underline;
}
.margin a {
padding-left: 8px;
font-weight: bold;
color:#FFFFFF;
font-family: Verdana;
font-size: 11px;
text-decoration: none;
}

jose09 · 02-02-2010, 07:17 AM

Para lo del color de fondo creo que solo tienes que eliminar el color en #content.

#content {
float: left;
background-repeat:repeat;
width: 492px;
display: inline;
position: relative;
}

Para el tema de las columnas igualadas te recomiendo este podcast:
iTunes Store

Saludos

02-01-2010, 04:50 PM	#1 (permalink)
hvega Junior Member Fecha de Ingreso: Feb 2010 Mensajes: 2 Gracias: 0 Agradecido 0 Veces en 0 Posts	error Hola! Les escribo para ver si me pueden ayudar con el siguiente error: tengo una pagina con tres columnas la idea es que las columnas se expandan de acuerdo al contenido que va en el centro y que el color que deje sea el blanco y no el azul como lo hace ahora. Aqui les adjunto el html y css para que me ayuden: <body> <div id="wrapper"> <div id="header"> </div> <div id="faux"> <div id="leftcolumn"> <div id="logo"><a href="/"><img src="../../images/logo11.jpg" alt="logo" width="154" height="65" /></a></div> <div id="Services_box"> <div id="Services"> </div> </div> </div> <div id="content"> <div id="banner_box"><img src="../../images/banner.jpg" alt="banner" width="482" height="285" /></div> <div id="topmenu_box"> <div id="topmenu"> </div> <div id="welcom_box"> <span class="wel_text"></span><br /> <br /> <div> <p>{tag_pagecontent}</p> </div> </div> </div> </div> <div id="rightcolumn"> <div id="info"><img src="../../images/info.png" alt="" width="181" height="44" /></div> <div id="contect_box"> <div id="contect"> </div> </div> </div> <div id="footer"> </div> </div> </div> /Layout/ * { margin: 0; } #wrapper { margin: 0 auto; width: 930px; background-color:#45607B; border:1px solid #003366; } #faux { margin-bottom: 5px; background-color:#45607B; padding-left: 15px; width:897px; } #header { color: #333; width: 930px; background-image: url(../images/hdr_tp_img.jpg); background-repeat: repeat-x; height: 20px; } #leftcolumn { position: relative; width: 208px; float: left; } #content { float: left; background-color:#FFF; background-repeat:repeat; width: 492px; display: inline; position: relative; } #rightcolumn { position: relative; width: 197px; float: left; } #footer { width: 897px; clear: both; margin: 10px 0px 10px 0px; padding-left: 10px; } .clear { clear: both; background: none; } /Complementos Plantilla/ #banner_box{ width:488px; padding-top: 4px; padding-left: 4px; } #logo{ width:180px; height:100px; float:left; padding-top: 35px; padding-left: 27px; } #Services_box{ width:208px; float:left; background-color:#FFF; padding-bottom:15px; } #Services{ width:205px; float:left; background-color:#e6e8ef; border:1px solid #CCC; margin-top: 10px; } #contect_box{ width:197px; float:left; background-color:#FFF; padding-bottom:15px; } #info{ width:180px; height: 100px; padding-top:35px; padding-left:15px; } #contect{ width:190px; float:left; background-color:#e6e8ef; border:1px solid #CCC; margin-top: 10px; } #topmenu_box{ width:488px; height:40px; padding-bottom:15px; } #topmenu{ width:485px; height:32px; background-color:#222120; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; margin-left: 3px; } #welcom_box{ width:488px; float:left; } .wel_text{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #31485d; text-decoration: none; padding-top: 10px; padding-left:11px; padding-bottom: 10px; background-color:#FFF; background-repeat:repeat-x; } .copy{ font-family: Tahoma; font-size: 11px; font-weight: normal; color: #e9eaf1; text-decoration: none; } p{ color:#121a21; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; line-height: 18px; text-align: justify; margin-left: 10px; } a.whitelink:link, a.whitelink:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #e9eaf1; font-size: 11px; font-weight: normal; text-decoration: none; } a.whitelink:active, a.whitelink:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #dee2ef; font-size: 11px; font-weight: normal; text-decoration: none; } a.moreinfo:link, a.moreinfo:visited { color:#46647f; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-decoration: none; } a.moreinfo:active, a.moreinfo:hover { color:#000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-decoration: underline; } .margin a { padding-left: 8px; font-weight: bold; color:#FFFFFF; font-family: Verdana; font-size: 11px; text-decoration: none; }

02-02-2010, 07:17 AM	#2 (permalink)
jose09 Junior Member Fecha de Ingreso: Dec 2009 Mensajes: 21 Gracias: 1 Agradecido 2 Veces en 2 Posts Ver mi sitio web	Respuesta: error Para lo del color de fondo creo que solo tienes que eliminar el color en #content. #content { float: left; background-repeat:repeat; width: 492px; display: inline; position: relative; } Para el tema de las columnas igualadas te recomiendo este podcast: iTunes Store Saludos __________________ Jose http://web.mac.com/joseoliveras/

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado