Foros del Web » Creando para Internet » HTML »

Columnas y cubierta

Estas en el tema de Columnas y cubierta en el foro de HTML en Foros del Web. Hola a todos, Estoy intentando rehacer mi website y me surgió un problema que antes sabia resolver pero ya he olvidado cómo. El template es ...
  #1 (permalink)  
Antiguo 03/02/2011, 08:42
Avatar de d1vxpr  
Fecha de Ingreso: agosto-2010
Mensajes: 13
Antigüedad: 6 años, 3 meses
Puntos: 0
Pregunta Columnas y cubierta

Hola a todos,

Estoy intentando rehacer mi website y me surgió un problema que antes sabia resolver pero ya he olvidado cómo.

El template es de 3 columnas + header +footer. La columna de la izquierda y la de contenido (main) estan dentro de un div que tiene un fondo gris el cual no puedo cambiar porque con ese fondo es que muestro las divisiones entre las columnas.

El problema:

Es que cuando una de las dos columnas es más grande que la otra, a la mas corta, se le ve el fondo gris.

Lo que quiero:

Es que cuando una de las dos crezca la otra lo haga igual y en la mismaa proporción para que siempre se mantengan parejas.

Lo que he intentado:

entre otras cosas fue ponerle un minimum height de 400px pero lueg que otra sobre pas ese limite vuelve a salir el gris.

Este es el template en el que estoy trabajando.

[URL="http://jdownloads.net/social/"]template[/URL]

Les dejo el código css + index

Código PHP:
<body>
<
div id="container">
<
div id="header">
<
div id="topleftmenu">
    <
div id="logo">
    <
img src="images/logo.png" alt="" width="168" align="left" class="" title=""/>
    </
div>
    <
div id="friends">
    <
img alt="" title="" class="" src="images/friends.png"/>
    </
div>
    <
div id="message">
    <
img alt="" align="left" title="" class="" src="images/message.png"/>
    </
div>
    <
div id="addcontact">
    <
img alt="" align="left" title="" class="" src="images/add_contact.png"/>
    </
div>
  </
div>
    <!--
end topleftmenu -->
    
<
div id="topmenuborder">
    <
div  id="topmenu" style="border-left:#eee 1px; border-right:#eee 1px; border-top:#eee 1px; background-color:#eee;">
  
  <
div id="search">
     <
img alt="" align="left" title="" class="" border="1px #b3b3b3"src="images/search.png"/>
    </
div>
    <!--
end search -->
    
   <
div id="rightmenu">
  <
div id="home"><font class="" color="#000">Home</font></div>
 <
div id="profile"> <font color="#000">Profile</font></div>
 <
div id="account"> <font color="#000">Account</font>
 <
img src="images/arrow4.png"/></div>

</
div>
   <!--
end rightmenu -->
</
div>
<!--
end topmenu -->
    </
div>
    <!--
end topmenuborder -->
    </
div>
    <!--
end header -->
<
div id="wrapper">

  <
div id="main">
 <
h2>Iv&#225;n Rivera</h2>
 
<img src="images/profile.jpg"/> </div>
 <
div id="whiteleft">
 <
div id="subnav">
  <
img src="images/profile.jpg"/>
 </
div></div>
 <
div id="footer">
     <
p>JDownloads &#169; 2011 · Español
Acerca de &#183; Publicidad · Desarrolladores · Empleo · Privacidad · Condiciones · Servicio de ayuda</p>
 
</div>
 <!--
end footer -->

</
div>
<!--
end wrapper -->
<
div id="extra">
<
div id="extraright">
 <
h2>Extra Column</h2>
 <
p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor ametLorem ipsum sit dolor amet. </p>
</
div>
 </
div>
 <!--
end extra -->

</
div>
<!--
end container -->
</
body
[CSSbody {
font: "Times New Roman", Times, serif;
font-size:15px;
background: #fff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-top:0px;
}
#container{
margin-top:10px;
}
#header {
background: #fff;
width: 100%;
height: 41px;
text-align:center;
}
#topleftmenu{
padding-left:30px;
height:41px;
width:264px;
float:left;
}
#logo{
float:left;
height:41px;
width:183px;
}
#friends{
height:41px;
width:22px;
float:left;
padding-left:5px;
}
#message{
height:41px;
width:22px;
float:left;
padding-left:5px;
}
#addcontact{
height:41px;
width:22px;
float:left;
padding-left:5px;
}
#topmenuborder{
margin-left:304px;
height:41px;
width: 700px;
background-color:#b3b3b3;
}
#topmenu{
padding-left:.1px;
float:left;
padding-right:34px;
margin-left:1px;
margin-top:1px;
height:40px;
width: 664px;
}
#search{
padding-left:5px;
padding-top:5px;
height:36px;
width:389px;
float:left;
}
#rightmenu{
background-color:#b3b3b3;
margin-left:473px;
margin-top:10px;
height:31px;
width:225px;
}
#home{
margin-left:1px;
font: 80% Verdana, Arial, Helvetica, sans-serif;
height:31px;
width: 60px;
background-color:#eee;
float:left;
}
#profile{
margin-left:1px;
font: 80% Verdana, Arial, Helvetica, sans-serif;
height:31px;
width: 65px;
background-color:#eee;
float:left;
}
#account{
margin-left:1px;
font: 80% Verdana, Arial, Helvetica, sans-serif;
height:31px;
padding-right:9px;
width: 88px;
background-color:#eee;
float:left;
}
#wrapper{
background-color:#b3b3b3;
float: left;
margin-left:30px;
width:974px;
}
#main {
margin-left:1px;
margin-right:1px;
margin-bottom:1px;
padding-top:20px;
background-color:#fff;
width: 698px;
float:right;
min-height:500px;
}
#whiteleft{
background-color:#fff;
}
#subnav {
background-color:#fff;
width: 274px;
float:left;
min-height:400px;
padding-top:20px;
padding-bottom:1px;
}
#extra {
width: 200px;
margin-right:30px;
background-color:#fff;
padding-left:1035px;
}
#extraright{
background-color:#fff;
float:lef;
}
#footer {
background-color:#fff;
padding-left: 275px;
width: 700px;
float: left;
}[/CSS]

Última edición por d1vxpr; 03/02/2011 a las 08:49 Razón: codigo
  #2 (permalink)  
Antiguo 03/02/2011, 19:49
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 5 años, 11 meses
Puntos: 36
Respuesta: Columnas y cubierta

Lo más simple que puedes hacer si quieres mantener el fondo en blanco es prescindir del fondo gris y utilizar un borde en el contenedor #whitemain.
Esto obliga a realizar pequeños reajustes en las dimensiones para que siga viéndose igual.
Yo lo he hecho de este modo, te pongo en rojo las propiedades que he cambiado o añadido.
El resto seguiría igual.

#wrapper {
background-color: #fff;
margin-left: 30px;
width: 975px;
}

#whitemain {
background-color: #FFFFFF;
float: right;
margin-bottom: 1px;
margin-left: 1px;
margin-right: 1px;
min-height: 600px;
width: 696px;
border-bottom:1px solid #B3B3B3;
border-left:1px solid #B3B3B3;
border-right:1px solid #B3B3B3;
}

#subnav {
background-color: #FFFFFF;
float: left;
min-height: 500px;
padding-bottom: 1px;
padding-top: 20px;
width: 273px;
}
  #3 (permalink)  
Antiguo 03/02/2011, 20:19
Avatar de d1vxpr  
Fecha de Ingreso: agosto-2010
Mensajes: 13
Antigüedad: 6 años, 3 meses
Puntos: 0
De acuerdo Respuesta: Columnas y cubierta

Muchísimas gracias funciono perfecto ahora a trabajar los ajustes. Se lo agradezco infinitamente!

Etiquetas: columnas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:40.