Foros del Web » Creando para Internet » CSS »

Problemas con la maquetación

Estas en el tema de Problemas con la maquetación en el foro de CSS en Foros del Web. hola, tengo un problema con la maquetación, resulta que tengo mi header, mi content y foot, pero el foot me queda encima del content. Tengo ...
  #1 (permalink)  
Antiguo 29/05/2009, 16:55
 
Fecha de Ingreso: junio-2006
Mensajes: 330
Antigüedad: 11 años, 6 meses
Puntos: 4
Problemas con la maquetación

hola, tengo un problema con la maquetación, resulta que tengo mi header, mi content y foot, pero el foot me queda encima del content. Tengo mis identificadores:

#principal => sería el contenedor principal.
#body_center => sería donde va la imagen que se ve a los lados, como el efecto de sombra.
#header y #header2 => iría las propiedades del header.
#footer => iría las propiedades del pie de página.
#content_left => sería el contenedor del lado izquierdo.
#content_right => contenedor lado derecho.

Si le coloco en el height un valor fijo, por ejemplo:
height: 768px;
pero si lo coloco 100%, para que se adapte al contenido no me lo toma.

Realmente lo que necesito es que me ayuden a adaptarse según el contenido que tenga, ya que en unas páginas sobrepasa los 768px, y entonces queda mal.

Aquí coloco el link donde muestro la página:

http://74.208.97.55/prueba/prueba.php

Vayan a ver código que dentro de la misma página coloque los elementos de estilos.


Gracias a los que me puedan ayudar.
  #2 (permalink)  
Antiguo 29/05/2009, 17:18
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: Problemas con la maquetación

Prueba a añadir un overflow: auto a l selector #body_center.
Tanto el contenido izquerdo como el derecho estñan flotados, y por eso el contendor no crece con ellos.

P.D.: el height auto no tiene ninguna utilidad.
  #3 (permalink)  
Antiguo 29/05/2009, 17:57
 
Fecha de Ingreso: junio-2006
Mensajes: 330
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Problemas con la maquetación

Excelente!! Gracias...

Dejaré aquí el código final, por si a alguien que está aprendiendo a maquetar web con css le sirva.


<!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>Prueba CSS</title>

<style type="text/css">
body {
font-family: "Century Gothic", Tahoma, Arial;
font-size: 12px;
text-align: center;
background-repeat: repeat-x;
background-position: top left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#principal {
text-align:left;
width: 967px;
margin: auto;
}

#body_center {
width: 967px;
text-align: center;
padding-bottom:100px;
overflow: auto;
}


#header2{
width: 967px;
height: 253px;
background-color: #CCCCCC;
}

#footer {
width: 957px;
height: 80px;
margin: auto;
background-color: #CCCCCC;
}

#footer a:link, a:visited {
font-size:13px;
color: #FFFFFF;
text-decoration:none;
}

#footer a:hover {
font-size:13px;
color: #FFFFFF;
text-decoration:underline;
}

.text_footer {
text-align: center;
padding:22px 0px 0px 0px;
font-size:11px;
color: #FFFFFF;
}

.text_select_idio {
padding:12px 0px 0px 0px;
margin:0;
text-align:right;
font-size:10px;
font-weight:normal;
width: 920px;
}

#content_left {
width: 208px;
float:left;
height: auto;
margin-top: 3px;
padding-left: 15px;
padding-top: 6px;
/*border:1px solid #000000;*/
}

#content_right {
float:right;
width: 705px;
margin-top: 3px;
margin-right: 12px;
/*border:1px solid #000000;*/
line-height: 1.5em;
text-align:justify;
padding-right: 8px;
padding-top: 6px;
}
</style>
</head>

<body>
<div id="principal">
<div id="header2"></div>
<div id="body_center">
<div id="content_left">
cualquier texto o contenido
</div>

<div id="content_right">
cualquier texto o contenido
</div>
</div>

</div>

</div>
<div id="footer">
<div class="text_footer">
Menú y Dirección
<div>
</div>
</body>
</html>

Gracias!!!!
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 08:38.