Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/01/2008, 16:07
fjchavez
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 17 años, 10 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