Foros del Web » Creando para Internet » CSS »

Solucionar crecimiento de capa padre

Estas en el tema de Solucionar crecimiento de capa padre en el foro de CSS en Foros del Web. Buenas tardes amigos, mi duda es como solventar una situacion q se me ha presentado varias veces pero sin recurrir a lo q ahora mismo ...
  #1 (permalink)  
Antiguo 23/08/2008, 13:26
 
Fecha de Ingreso: noviembre-2003
Ubicación: Frente a la PC
Mensajes: 120
Antigüedad: 14 años
Puntos: 0
Solucionar crecimiento de capa padre

Buenas tardes amigos, mi duda es como solventar una situacion q se me ha presentado varias veces pero sin recurrir a lo q ahora mismo se hizo q es de poner una capa al final con unos clear. Le muestro el codigo para q se entienda mejor..

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panel de Administraci&oacute;n</title>
<link href="adminstilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="cinta">
  <div id="logout"><a href="javascript:;" class="logout">Cerrar Sesion</a></div>
  <div class="datos_login" id="datos_login">Bienvenido: <strong>Nombre de Administraidor</strong> </div>
</div>
<div id="wrap">
  <div id="menu_admin">
    <?php include('menu_izq.php'); ?>
  </div>
  <div id="contenido_wrap">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><div align="center" class="titulos_secciones">Incluir Nuevo Administrador </div></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
  <div class="corte">Copyright &copy;</div>
</div>
</body>
</html> 
El CSS:

Código:
p {
	margin: 0px;
}
#index {
	text-align: center;
	vertical-align: middle;
	width: 250px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	padding-top: 20px;
	height: 120px;
	border: 2px dotted #CCCCCC;
}

#bienvenida {
	color: #666666;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-top: 50px;
}
#creditos {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: normal;
	color: #999999;
	text-align: center;
	margin-top: 50px;
	text-decoration: none;
}

#creditos a{
	text-decoration: none;
	color:#666666;
}
#creditos a:hover{
	text-decoration: underline;
	color:#cccccc;
}


#cinta {
	height: 50px;
	width: 100%;
	margin-bottom: 30px;
	background-color: #005898;
}
#wrap {
	padding: 10px;
	height: auto !important;
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	border: 1px dotted #CCCCCC;
}

.corte {
	clear: both;
	margin-top: 20px;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #999999;
}
#contenido_wrap {
	float: left;
	height: auto;
	width: 545px;
}
.titulos_secciones {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 80%;
	font-weight: bold;
	color: #006699;
	text-decoration: none;
}



#menu_admin {
	float: left;
	height: auto;
	width: 200px;
	margin-right: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 80%;
	font-weight: normal;
}
#menu_admin ul, li {
list-style-type:none;
}
#menu_admin ul {
	margin:0;
	padding:0;
}

#menu_admin li {
border-bottom:1px solid #efefef;
}
#menu_admin a{
	color: #006699;
	text-decoration: none;
	display: block;
	padding-bottom: 2px;
}

#menu_admin a:hover{
	color: #008BCE;
	}

.menu_title {
	font-weight: bold;
	color: #004D71;
	height: 15px;
	width: 188px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 10px;
	margin-bottom: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}



label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}

label {
	text-align: right;
	width: 70px;
	padding-right: 5px;
}

br {
	clear: left;
}
body {
	margin: 0px;
}
.labels {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	color: #666666;
}
.campos {
	font-family: tahoma, verdana, "helvetica Condensed";
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	border: 1px solid #666666;
}
.links, a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: normal;
	color: #005898;
	text-decoration: none;
}
.links a:hover{
text-decoration: underline;
}
#cinta #datos_login {
	float: right;
	height: 20px;
	width: 300px;
	margin-top: 15px;
	margin-right: 5px;
	text-align: right;
}
#cinta #logout {
	float: right;
	height: 22px;
	width: 100px;
	margin-top: 15px;
	margin-right: 5%;
	text-align: center;
	vertical-align: middle;
}
.logout{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #006FBF;
	border: 1px solid #FFFFFF;
	padding: 2px;
}
.datos_login {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: normal;
	color: #FFFFFF;
}

.logout:hover{
background-color:#007CD9;
}
.menu_title_item {
	font-size: 11px;
	font-weight: bold;
	color: #006699;
	height: 15px;
	width: 188px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #F9F9F9;
	background-color: #F9F9F9;
} 
La idea es lograr q la capa padre (wrap) crezca a medida q crece "menu_admin" o "contenido_wrap" o las dos o cualquier cosa dentro de ellas sin recurrir al "hack" <div class="corte"></div>

Al principio sin ese "hack" en IE se veia bien pero en Firefox no, pero como se q al q hay q hacerle caso es al Firefox pues busque en internet como arreglarlo y consegui ese "hack", quisiera saber la forma de arreglarlo sin esos "hacks".

Muchas gracias..
__________________
Sin sombra no hay luz...
  #2 (permalink)  
Antiguo 23/08/2008, 15:38
 
Fecha de Ingreso: julio-2008
Mensajes: 6
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Solucionar crecimiento de capa padre

la capa menu_admin la has puesto como flotante (float:left), esto quiere decir que está flotando sobre el contenido de la página y por eso no ocupa ningún espacio entre el código anterior y posterior.

para que se cubra ese espacio hay que poner esos "hacks", que son los estilos clear:(both, right o left);

no hay más formas de hacerlo, a no ser que encuentres otra forma de colocar esa capa sin que quede flotando a la izquierda.

saludos.
  #3 (permalink)  
Antiguo 23/08/2008, 16:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Solucionar crecimiento de capa padre

Puedes hacerlo poniendo a tu caja padre un overflow: auto;, ya que al no tener tamaño de alto, esto le hará crecer a pesar de que su contenido esté flotado.

No obstante, dar un corte no es ningún "hack", es un recurso muy utilizado y muy práctico, que nada tiene que ver con "trucos raros".
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 23/08/2008, 18:40
 
Fecha de Ingreso: noviembre-2003
Ubicación: Frente a la PC
Mensajes: 120
Antigüedad: 14 años
Puntos: 0
Respuesta: Solucionar crecimiento de capa padre

Gracias por las respuesta amigos, me han servido mucho para entender esos conceptos que los tenia no muy claros.
__________________
Sin sombra no hay luz...
  #5 (permalink)  
Antiguo 24/08/2008, 17:35
 
Fecha de Ingreso: abril-2008
Mensajes: 122
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Solucionar crecimiento de capa padre

Solo te doy una recomendación, en tu código CSS hay muchos colores con los hexa repetidos

poner color: #FFFFFF es igual que color: #FFF , solo si los 3 hexa primeros se tepiten
  #6 (permalink)  
Antiguo 25/08/2008, 15:10
Avatar de Erebus  
Fecha de Ingreso: junio-2008
Mensajes: 52
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Solucionar crecimiento de capa padre

Cita:
Iniciado por Mikmoro Ver Mensaje
No obstante, dar un corte no es ningún "hack", es un recurso muy utilizado y muy práctico, que nada tiene que ver con "trucos raros".
Se me hizo bastante insolito que considerara "clear:both" como un hack.
Digo, yo lo uso para todo; las personas de las que he aprendido lo usan casi como un standard no escrito.
Anyways, saludos. (:
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 00:42.