Foros del Web » Creando para Internet » CSS »

problemas con el maquetado

Estas en el tema de problemas con el maquetado en el foro de CSS en Foros del Web. Hola a todos como podria hacer con este codigo para que pueda calzar el div#pie debajo del div#cuerpo (el cual contiene a los div #menu_izq,#contenido ...
  #1 (permalink)  
Antiguo 13/01/2008, 18:09
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
problemas con el maquetado

Hola a todos como podria hacer con este codigo para que pueda calzar el div#pie debajo del div#cuerpo (el cual contiene a los div #menu_izq,#contenido y #menu_der).
Ademas como hacer para que div #menu_izq,#contenido y #menu_der tengan la misma altura, es decir que sea de acuerdo al texto, puse height:100% pero cada uno va independiente y queda como en la imagen.
Actualmente el aspecto de mi plantilla es así:


Código:
#cuerpo{
        position:absolute;left:0;
}

#menu-izq {
        position:absolute;left:0;
        top:199px;width:180px;
        background: url(../images/menu_izq.gif);
}

#contenido {
        position:absolute;left:180px;
        top:199px;width:411px;
        background: url(../images/cuerpo.gif);
}

#menu-der {
        position:absolute;left:591px;
        top:199px;width:189px;
        background: url(../images/menu_der.gif);
}

#pie {
        position:absolute;left:0;
        width:780px;
        background: url(../images/pie.jpg);
}
Código HTML:
 <div id="cuerpo">
             <div id="menu-izq"></div>
             <div id="contenido"></div>
             <div id="menu-der"></div>
        </div>
        <div id="pie"></div> 
  #2 (permalink)  
Antiguo 22/01/2008, 13:14
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: problemas con el maquetado

Yo soluciono mi problema de altura en las columans iguales de la siguiete manera.
Genero una columna contenedora, para las 3 columnas, con el color de las columnas lateras. A las columnas laterales no les doy color, pero si a la columna central. De esta manera me ha resultado bastante bien.
He probado varias técnicas para alargar columnas, pero hasta el momento ninguna me convence 100 %. Pero si quieres seguir aprendiendo te dejo un tutorial bastante bueno http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/#contenido.

Saludos..
  #3 (permalink)  
Antiguo 22/01/2008, 16:07
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
Re: problemas con el maquetado

Sí, muy buen enlace, lo solucioné en el acto.
Ahora tengo otro problema, en IE 6 para Windows se me desacomoda ligeramente la página y queda así



mientras k en firefox esta bien todo.

Código CSS

body{
text-align: center; /*para centrarlo en internet explorer*/
}

#cuerpo, #contenedor, #header{
width:780px;
margin: 0 auto;/* Es necesario poner un ancho o alto para que IE "limpie" el elemento automaticamente */
}

#header {
padding: 0;
margin:0;
}

#top-enlace {
float:left;
width:364px;
height:28px;
overflow:hidden;
background: url(images/top_enlace.gif) no-repeat;
}

#top-fig-1 {
float:left;
width:227px;
height:28px;
background: url(images/top_fig_1.gif) no-repeat;
}

#top-buscar {
float:right;
width:189px;
height:44px;
background: url(images/top_buscar.gif) no-repeat;
}

#top-medio-izq {
float:left;
width:180px;
height:142px;
overflow:hidden;
background: url(images/top_medio_izq.gif) no-repeat;
}

#logo {
float:left;
width:411px;
height:142px;
background: url(images/logo.gif) no-repeat;
}

#top-medio-der {
float:right;
width:189px;
height:142px;
overflow:hidden;
background: url(images/top_medio_der.gif) no-repeat;
}

#top-abajo-path {
float:left;
width:423px;
height:29px;
background: url(images/top_abajo_path.gif) no-repeat;
}

#top-fig-2 {
float:left;
width:168px;
height:29px;
background: url(images/top_fig_2.gif) no-repeat;
}

#top-fig-3 {
float:right;
width:189px;
height:13px;
background: url(images/top_fig_3.gif) no-repeat;
}

#top-contenido{
clear:both;
width:780px;
height:10px;
background: url(images/top_contenido.gif) no-repeat;
}


#contenedor {
overflow: hidden;
}

/* Limpiamos el contenedor para los navegadores que si funcionan como deben */
#contenedor:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}

#izquierda, #central, #derecha {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;

}
#izquierda {
width: 180px;
background: url(images/menu_izq.gif) repeat-y;
}

#central {
width: 420px;
background: url(images/contenido.gif) repeat-y;
}

#derecha {
width: 180px;
background: url(images/menu_der.gif) repeat-y;
}

#bottom-contenido{
clear:left;
width:780px;
height:10px;
background: url(images/bottom_contenido.gif) no-repeat;
}

#footer {
clear: left;
width:780px;
height:40px;
margin: 0;
padding: 0;
background: url(images/pie.gif) no-repeat;
}

Código HTML

<div id="cuerpo">

<div id="header">
<div id="top-enlace"></div>
<div id="top-fig-1"></div>
<div id="top-buscar"></div>
<div id="top-medio-izq"></div>
<div id="logo"></div>
<div id="top-medio-der"></div>
<div id="top-abajo-path"></div>
<div id="top-fig-2"></div>
<div id="top-fig-3"></div>
</div>

<div id="top-contenido"></div>

<div id="contenedor">

<div id="izquierda">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
<div id="central">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
<div id="derecha">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>

</div>

<div id="bottom-contenido"></div>


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

</div>

Última edición por fjchavez; 22/01/2008 a las 16:12
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 22:33.