¿Cómo corregir el espacio en blanco extra en mi página web?

vickyepsilon · 28 Sep 2012

Hola a todos!

Me pidieron que creara una web utilizando codigos html y css solamente para un trabajo universitario.
Hasta ahora venia relativamente bien, determine que el ancho de la pagina fuera de 960px y ubico el diseño dentro de este tamaño, pero cada vez que hago la previsualizacion en firefox, chrome y explorer se genera a la derecha un espacio en blanco, mas alla de los 960px que determine al principio.

alguien sabe como se puede corregir este problema?
Por cierto, estoy trabajando con el dreamweaver

Vzk91 · 28 Sep 2012

Has aplicado alguna otra regla de CSS ? Igual estas aplicando un padding que te esta ensanchando el elemento....

Si mostrases parte de ese codigo y/o una captura del problema podriamos ayudarte mejor

vickyepsilon · 28 Sep 2012

Esas serian las imagenes de como esta quedando... en una me hace ese espacio blanco y la otra es como deberia estar...

este es el css:

margin:auto;
}

header{ position:relative;
width:960px;
}

div#logo{
position:absolute;
left:294px;
top:61px;
height:109px;
border:none;

}

div#nav{ position:absolute;
background-color:#FFCF20;
width:710px;
height:50px;
left:35px;
top:209px;
}

#nav li{
float:left;
display:block;
margin-top: 3px;
margin-left: 15px;
margin-bottom: 10px;
margin-right: 15px;
}

#nav li a{
font-family: "Myriad Pro";
color: #000000;
text-decoration:none;
font-size:15px;
}

#nav ul{ list-style:none;
position:absolute;
}

div#buscar{
position:relative;
left:758px;
top:215px;
}

div#buscar img{
position:absolute;
}

body{ position:relative;}

div#slider{
position:absolute;
width:539px;
height:299px;
left:73px;
top:297px;
padding:1px;
background-color:#FFCF20;
}

div#slider h3{ font-family:"Myriad Pro";
font-size:18px;
margin:5px;
padding:2px;}

div#estadisticas{
position:absolute;
background-color:#FFCF20;
width:539px;
height:211px;
left:73px;
top:649px;
}

div#estadisticas img{
position:relative;
left:20px;
top:5px;
border:none;
}

div#estadisticas h4{
font-family:"Myriad Pro";
font-size:18px;
margin:5px;
padding:2px;}

div#pronostico{background-color:#ffcf20;
position:absolute;
width:220px;
height:515px;
top:285px;
left:661px;
background-color:#FFCF20;
display:block;
float:right;
padding:20px;
}

div#pronostico h1{font-family:"Myriad Pro";
font-size:18px;
text-align:center;
}

div#afiliados{ position:absolute;
width:251px;
height:308px;
top:856px;
background-color:#FFCF20;
left:661px;
}

div#afiliados h2{font-family:"Myriad Pro";
font-size:18px;
text-align:center;
}

div#afiliados ul{list-style:none;
text-align:left;
}

div#afiliados li{
display:block;
margin:25px;
font-family: "Myriad Pro"; }

div#afiliados a{
display:block;
margin:37px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
float:left;
}

div#lacteos{ position:absolute;
width:167px;
height:279px;
top:889px;
background-color:#FFCF20;
left:73px;
display:block;
}

div#lacteos img {
position:relative;
left:7px;
top:11px;
display:block;
}

div#lacteos li{
display:block;
padding:7px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
font-size:12px;
margin-left: -18px;
}

div#cereales{position:absolute;
width:167px;
height:279px;
top:889px;
background-color:#FFCF20;
left:270px;
}

div#cereales img {
position:relative;
left:7px;
top:11px;
display:block;}

div#cereales li{
display:block;
padding:7px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
font-size:12px;
margin-left: -18px;
}

div#ganado{ position:absolute;
width:167px;
height:279px;
top:889px;
background-color:#FFCF20;
left:463px;
}

div#ganado img { position:relative;
left:10px;
top:11px;
display:block;
}

div#ganado li{
display:block;
padding:7px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
font-size:12px;
margin-left: -18px;
}

ecoal95 · 29 Sep 2012

vickyepsilon dijo:
Ver el archivo adjunto 8605 Ver el archivo adjunto 8606

Esas serian las imagenes de como esta quedando... en una me hace ese espacio blanco y la otra es como deberia estar...

este es el css:

margin:auto;
}

header{ position:relative;
width:960px;
}

div#logo{
position:absolute;
left:294px;
top:61px;
height:109px;
border:none;

}

div#nav{ position:absolute;
background-color:#FFCF20;
width:710px;
height:50px;
left:35px;
top:209px;
}

#nav li{
float:left;
display:block;
margin-top: 3px;
margin-left: 15px;
margin-bottom: 10px;
margin-right: 15px;
}

#nav li a{
font-family: "Myriad Pro";
color: #000000;
text-decoration:none;
font-size:15px;
}

#nav ul{ list-style:none;
position:absolute;
}

div#buscar{
position:relative;
left:758px;
top:215px;
}

div#buscar img{
position:absolute;
}

body{ position:relative;}

div#slider{
position:absolute;
width:539px;
height:299px;
left:73px;
top:297px;
padding:1px;
background-color:#FFCF20;
}

div#slider h3{ font-family:"Myriad Pro";
font-size:18px;
margin:5px;
padding:2px;}

div#estadisticas{
position:absolute;
background-color:#FFCF20;
width:539px;
height:211px;
left:73px;
top:649px;
}

div#estadisticas img{
position:relative;
left:20px;
top:5px;
border:none;
}

div#estadisticas h4{
font-family:"Myriad Pro";
font-size:18px;
margin:5px;
padding:2px;}

div#pronostico{background-color:#ffcf20;
position:absolute;
width:220px;
height:515px;
top:285px;
left:661px;
background-color:#FFCF20;
display:block;
float:right;
padding:20px;
}

div#pronostico h1{font-family:"Myriad Pro";
font-size:18px;
text-align:center;
}

div#afiliados{ position:absolute;
width:251px;
height:308px;
top:856px;
background-color:#FFCF20;
left:661px;
}

div#afiliados h2{font-family:"Myriad Pro";
font-size:18px;
text-align:center;
}

div#afiliados ul{list-style:none;
text-align:left;
}

div#afiliados li{
display:block;
margin:25px;
font-family: "Myriad Pro"; }

div#afiliados a{
display:block;
margin:37px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
float:left;
}

div#lacteos{ position:absolute;
width:167px;
height:279px;
top:889px;
background-color:#FFCF20;
left:73px;
display:block;
}

div#lacteos img {
position:relative;
left:7px;
top:11px;
display:block;
}

div#lacteos li{
display:block;
padding:7px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
font-size:12px;
margin-left: -18px;
}

div#cereales{position:absolute;
width:167px;
height:279px;
top:889px;
background-color:#FFCF20;
left:270px;
}Shoot to kill; CSS selector intent — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

div#cereales img {
position:relative;
left:7px;
top:11px;
display:block;}

div#cereales li{
display:block;
padding:7px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
font-size:12px;
margin-left: -18px;
}

div#ganado{ position:absolute;
width:167px;
height:279px;
top:889px;
background-color:#FFCF20;
left:463px;
}

div#ganado img { position:relative;
left:10px;
top:11px;
display:block;
}

div#ganado li{
display:block;
padding:7px;
text-decoration:none;
font-family: "Myriad Pro";
color: #000000;
font-size:12px;
margin-left: -18px;
}

No sé cómo ayudarte porque no veo el código HTML: ¿puedes subirlo a algún hosting gratuito, o a dropbox?

Sobre el css: No deberías sobrecualificar los selectores. Cuando haces div#ganado, sobra con hacer #ganado (leer más).
Además usar ID's por lo general son malas (hacen que no sea reutilizable y hacen que las reglas aplicadas tomen una importancia que sólo podrías sobreescribir con !important).

Pero si subes el código podremos ayudarte 😉

vickyepsilon · 29 Sep 2012

Codigo

<!DOCTYPE html><head>
<meta charset="utf-8" />
<title> UBA</title>
<script type="text/javascript" src="5elementos.js"> </script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="tp.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="pagina">
<header>
<div id="logo"><a href="index.html"> <img src="imagenes/logo.png"/></a> </div>


<div id="nav">
<nav>
<ul> <li> <a href="quienes somos.html"> Quienes Somos </a> </li>
<li> <a href="noticias.html"> Publicaciones </a> </li>
<li> <a href="unite a nosotros.html">Unite a Nosotros </a> </li>
<li> <a href="productos.html"> Productos </a> </li>
<li> <a href="Estadisticas.html"> Estadisticas </a> </li>
<li> <a href="usuarios.html"> Usuarios </a> </ul> </li>
</nav>
</div>


<div id="buscar">
<table width="180" border="0" cellspacing="3px">
<tr>
<td><form name="form2" method="post" action="">
<label>
<input type="submit" name="button" id="button" value="Buscar">
</label>
</form>
</td>
<td><form name="form1" method="post" action="">
<label>
<input type="text" name="textfield" id="textfield">
</label>
</form>
</td>
</tr>
</table>
</div>


</header>

<div id="slider">
<h3>Noticias</h3>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','498','height','246','title','slider','src','imagenes/slide','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','imagenes/slide' ); //end AC code
</script>
<noscript>
<object classid="clsid😀27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="498" height="246" title="slider">
<param name="movie" value="imagenes/slide.swf">
<param name="quality" value="high">
<embed src="imagenes/slide.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="498" height="246"></embed>
</object>
</noscript>
</div>


<div id="estadisticas">
<h4>Estadisticas</h4>
<a href="Estadisticas.html"> <img src="imagenes/estadisticas_index.png"/> </a></div>


<div id="pronostico"> <h1> Pronostico </h1> <img src="imagenes/mapa_pronostico.png"/></div>


<div id="afiliados">
<h2> Afiliados </h2>
<ul>
<li> Tambos Villa Rosa </li>
<li> Tambos La Lucila </li>
<li> Campo Santa Silvina </li>
<li> Criadero El Nacional </li>
</ul>

<p><a href="#" id="mas"> Más </a>
<a href="unite a nosotros.html" id="unite"> Afiliate </a></p>
</div>


<div id="lacteos">
<img src="imagenes/lacteos.png"/>
<ul>
<li>Tipos de lacteos</li>
<li>Donde se producen</li>
<li>Noticias</li>
<li>Avances Tecnológicos</li>
<li>Más</li>
</ul>
</div>


<div id="cereales">
<img src="imagenes/cereales.png"/>
<ul>
<li>Tipos de cereales</li>
<li>Donde se producen</li>
<li>Noticias</li>
<li>Avances Tecnológicos</li>
<li>Más</li>
</ul>
</div>


<div id="ganado">
<img src="imagenes/ganado.png"/>
<ul>
<li>Tipos de carnes</li>
<li>Donde se producen</li>
<li>Noticias</li>
<li>Avances Tecnológicos</li>
<li>Más</li>
</ul>
</div>


</div>


<footer>

</footer>
<div id="pie">
<ul>
<li> <a href="http://inta.gob.ar/"> INTA </a> </li>
<li> <a href="http://www.inti.gob.ar/"> INTI </a> </li>
<li> <a href="http://www.indec.com.ar"> Indec </a> </li>
<li> <a href="http://www.siia.gov.ar/"> SIIA </a> </li>
<li> <a href="http://www.notiagropecuarias.com.ar/"> Notiagropecuarias </a> </li>
</ul>
</div>
</body>

</html>

ecoal95 · 30 Sep 2012

Le he estado echando un vistazo, y creo que no puedes sostener tu página en position: absolute;. Además, no usaría <div>'s para el footer y el header, teniendo en cuenta que usas elementos semánticos como <footer>.
Suplantaría el logo y los encabezados con CSS por eso de las semánticas también. (hay mucho escrito sobre el tema).

Duplicas un formulario con el mismo nombre, y lo alineas con tablas (muy a lo siglo pasado).

Pero bueno, supongo que lo que quieres es solucionar rápido el problema, y se solucionará con

Insertar CODE, HTML o PHP:

#pagina {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

Pero sinceramente hay mucho que cambiar en esa página...

¿Cómo corregir el espacio en blanco extra en mi página web?

vickyepsilon

Vzk91

vickyepsilon

ecoal95

vickyepsilon

ecoal95

Temas similares

Privacidad y transparencia

Privacidad y transparencia