Foros del Web » Creando para Internet » HTML »

Espacio entre cuerpo principal y "laterales y pié"

Estas en el tema de Espacio entre cuerpo principal y "laterales y pié" en el foro de HTML en Foros del Web. Estoy haciendo un sitio, la idea es que tenga un encabezado, abajo una barra de navegación, seguida de un lateral a cada costado de la ...
  #1 (permalink)  
Antiguo 25/11/2012, 15:46
 
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 9 años, 7 meses
Puntos: 0
Espacio entre cuerpo principal y "laterales y pié"

Estoy haciendo un sitio, la idea es que tenga un encabezado, abajo una barra de navegación, seguida de un lateral a cada costado de la parte principal y abajo un pié.
El problema es que en Internet Explorer entre la parte principal y los laterales, queda un pequeño espacio y el el Monzilla Firefox queda un espacio grande entre la parte principal y el pié.
He buscado en Internet y no encontré repuesta.
Abajo dejo el código.

Desde ya muchas gracias.
Saludos


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>titulo</title>

<style type="text/css">
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px 0px 10px 0px;
text-align: center;
/* background-color: #ebebeb;*/
background-color : #95D079;
}
#contenedor{
text-align: left;
width: 1000px;
margin: auto;
background-color : #ffffff;


}
#cabecera{


background: url(general/cabecera.gif ) no-repeat ;
background-color:#137C72;
width: 1000px ;
float:left ;
height:134px;
min-height:134px;
}




#navegacion {background-color:#085049;
width:1000px;
height:40px;
float:left;
min-height:35px;

}




#navegacion ul{padding:0px;
margin:0px;
list-style:none;
}

#navegacion li{padding:0px;
margin: 4px 5px 0px 5px;
list-style:none;
float:left;
}

#navegacion li a{font-family:tahoma;
font-size:12px;
color:#313131;
font-weight:bold;
text-decoration:none;
text-align:center;
line-height:35px;
float:left;
width:105px;
height:35px;
background: url(general/button-bg.gif) no-repeat;
background-position:bottom;
padding:1px 4px 0px 4px;
}

.activo {font-family:tahoma;

font-size:12px;
color:#313131;
font-weight:bold;
text-decoration:none;
text-align:center;
float:left;
width:105px;
height:36px;
line-height:35px;
background: url(general/button-bg-white.gif) no-repeat; background-position:bottom;
padding:14px 4px 0px 4px;



}


#navegacion li a:hover{height:35px; text-decoration:underline; color:#313131;}h1 {
font-family: Times;
font-size: 24px;
color: #094738;
line-height: 20px;
text-decoration: none;
text-align: left;
margin-top: 0px;
margin-bottom: 7px;
font-style: italic;
}




#cuerpo{
margin: 0px 0px 0px 0px;
height:1334px;
background-color : #FFFFFF:

}
#lateral{
width: 250px;
float:left;
background-color : #FFFF00;
height:1334px;
}



#principal{
margin-left: 250px;
background-color: #79A5D0;
padding: 4px 4px 4px 4px;
width: 494px;
height:1334px;
}

#otrolado{
width: 250px;
float: right;
background-color :#FF0000;
height:1334px;
}


#pie{
background-color:#00CDFF;
padding: 3px 10px 3px 10px;
text-align:center;
height:200px;
clear: both;
}
</style>

</head>

<body>

<div id="contenedor">
<div id="cabecera">

</div>

<div id="navegacion">
<ul>
<li class="activo">uno</li>

<li><a href="dos.html">DOS</a></li>
<li><a href="tres.html">TRES</a></li>
<li><a href="cuatro.html">CUATRO</a></li>
<li><a href="cinco.html">CINCO</a></li>

<li><a href="seis.html">SEIS</a></li>
<li><a href="siete.html">SIETE</a></li>

<li><a href="ocho.html">OCHO</a></li>
</ul>
</div>

<div id="cuerpo">
<div id="lateral">
Lateral
<p>
<img src="bannerlateral.gif" width="120" height="600" alt="">
<p>

<tr>
<td
style="vertical-align: top;"><img src="uno.gif" width="105" height="98" alt=""><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;"><img src="dos.gif" width="105" height="98" alt=""><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;"><img src="tres.gif" width="105" height="98" alt=""><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;"><img src="cuatro.gif" width="105" height="98" alt=""><br>
</td>
</tr>


</div>
<div id="otrolado">
Otro Lado
<p>
<img id="img1" src="bannerlateral.gif" width="120" height="600" alt="" ; >

<p>

<tr>
<td
style="vertical-align: top;"><img src="uno.gif" width="105" height="98" alt=""><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;"><img src="dos.gif" width="105" height="98" alt=""><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;"><img src="tres.gif" width="105" height="98" alt=""><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top;"><img src="cuatro.gif" width="105" height="98" alt=""><br>
</td>
</tr>


</div>
<div id="principal">



<h1>Pagina principal</h1>
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos

<p>
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
<p>
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
<p>
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
balabnalañaña babale a ll¡wwwkk mansns - ppapas mammsjs a ekika mlal sioan ssn aklaksiiu ahshhsia suiujabn siui ckjoaos pom,solso mmskks k,ks aks, kskma mismc l, soosksksksn ,a lsos aosmms s allalasd i e,eeeejd ajalxc, c, kaksnddkpoam,,.sñsppos
<p>

</div>





</div>
<div id="pie">
Sitio
</div>
</div>

</body>
</html>
  #2 (permalink)  
Antiguo 25/11/2012, 21:46
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 11 años, 10 meses
Puntos: 306
Respuesta: Espacio entre cuerpo principal y "laterales y pié"

Hola
Primero, usa el Highlight para el código.
Segundo, tienes una Tabla mutilada dentro del código (falta <table>...)
Tercero, IE no se comporta igual que los demás navegadores con respecto a margenes y paddind, bah, IE apesta ya que hace lo que se le canta.
Cuarto, usa al inicio del css un reset css (margin:0, padding:0; etc etc), busca en San google.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 29/11/2012, 06:56
 
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Espacio entre cuerpo principal y "laterales y pié"

Gracias C2am,
- solucioné los espacios en blanco que me quedaban poniendo en las <div> el código: style="width:XXXXpx; height: XXXXXpx; float:XXXXX ;" con los valores adecuados, se ve bien en IE y FF.
- Veré lo que me comentas de la falta de a<table>.
- Lo del código Highlight, veré como suarlo, voy a investigar en google.

Muchas gracias por todo.
Saludos

Etiquetas: cuerpo, espacio, laterales, pie, principal
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 02:30.