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

  • Autor Autor vickyepsilon
  • Fecha de inicio Fecha de inicio
V

vickyepsilon

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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
 
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
 
pagina1.webppagina2.webp

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;
}
 
vickyepsilon dijo:
Ver el archivo adjunto 8605Ver 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;
}
Hacer clic para expandir...


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 😉
 
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>
<!--fin de logo-->

<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>
<!--fin de nav-->

<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>
<!--fin de buscar-->

</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>
<!--fin de slider-->

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

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

<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>
<!--fin de afiliados-->


<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>
<!--fin de lacteos-->

<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>
<!--fin de cereales-->

<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>
<!--fin de ganado-->

</div>
<!--fin de pagina-->

<footer>
<!--fin de pie-->
</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>
 
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...
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

H
Cómo corregir una penalización de Google y mejorar tu página web
Respuestas
2
Visitas
172
Pixafree
Pixafree
ramonjosegn
Problema con anuncios automáticos de Adsense, espacio en blanco extra
Respuestas
4
Visitas
608
ramonjosegn
ramonjosegn
horseguards
¿Cómo corregir el error de redirección en el link de Facebook a mi web?
Respuestas
2
Visitas
416
Sindulfo Santacruz
S
Atrás
Arriba