Espacio en blanco, ayuda :(

valenti77 · #1 (**permalink**) 16/08/2008, 16:58

Hola, tengo estos estilos CSS, le podrian echar un ojo y decirme que me falta ? porque me quedan mal

,
Me queda un espacio blanco entre POSTS y el HEADER, asi como en esta imagen:

http://img119.imageshack.us/my.php?image=esquemapagvd5.png

agradeceria si pudieran ayudarme, muchas gracias, saludos!

Código:

body{background-color:#FFFFFF; font:80%; text-align:center}

#posts {background: #FFFFFF url(Images/fondito.png)  repeat-x; 
float: right; 
width:550px;
text-align:left;
color: #FFFFFF;
}
	 
#container {
width:800px;
text-align:left;
margin:0 auto;
}	
 
#header {
      height:auto;
      background-image:url(Images/header_index.gif);
	  background-repeat:repeat-x;
	  width:800px;
	 }
	 
#menuv {
	border: 2px solid #00AA00;
	border-width: 0px 1px 0 1px;
	width: 245px;
	font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
	float:left;
	
}
#menuv ul, li {
	list-style-type: none;
}

#menuv ul {
	margin: 0;
	padding: 0;
}

#menuv li {
	border-bottom: 3px solid #009933;
}

#menuv a {
	text-decoration: none;
	color: #FFFFFF;
	background: #66CC33;
	display: block;
	padding: 3px 6px;
	width: 245px;
}

#menuv a:hover {
	background: #66CC66;
	border:3px solid #009933;
	border-width:3px 3px 0px 3px;
}
#header_wraper {
width:100px;
height:145px;
postition:relative;
top:0px;
left:1px;
overflow:visible;
z-index:2;
}

#footer {
margin:0;padding:5px 10px; width:800px;clear:both;}

#footer_left{
width:50%;
height:15px;
background: #CCFFCC url(Images/footer.gif) repeat-x; 
text-align: left;
word-spacing:-0.1em;
padding: 10px 0px 10px 0px;
color: #FFFFFF;
text-decoration:none;
font: bold Arial, Helvetica, sans-serif;
font-size:80%}

#footer_right{
width:400px;
height:15px;
background: #CCFFCC url(Images/footer.gif) repeat-x; 
text-align: left;
word-spacing:-0.1em;
padding:0;
color: #FFFFFF;
text-decoration:none;
font: bold Arial, Helvetica, sans-serif;
font-size:80%;
}
a {
  outline: none;
}

.rollover {
  float: right;
  display: block;
  width: 47px;
  height: 28px;
  background: url(Images/logo_emp.gif) no-repeat;
  text-indent: -9999px;
}

a.rollover:link, a.rollover:visited, a.rollover:active {
  background: url(Images/logo_emp.gif) no-repeat;
}

a.rollover:hover {
  background-position: -47px;
}

.titulopost{
                 background: url(Images/titulo.gif) no-repeat; 
                 padding:35px 0px 20px 0px; 
                 text-align:center; font:Arial, Helvetica, sans-serif bold; color: #E9E9E9} 

#noticias {width:250px; 
                 height:300px;
                 border:1px 1px 1px 1px #CCCCCC dashed; 
                 display:block;  
                 float:left; 
                 clear:both; 
                 overflow:scroll;}

y organizado de esta manera:

Código HTML:

<body><div id="container">
<div id="header"><div id="header_wraper"><img src="Images/logo.png" /></div></div>
<div id="menuv">
<ul>
		<li>
		  <div align="left"><a href="#menuv"><strong>Foro</strong></a></div>
		</li>
		<li>
		  <div align="left"><a href="#menuv"><strong>Juegos</strong></a></div>
		</li>
		<li>
		  <div align="left"><a href="#menuv"><strong>Chat</strong></a></div>
		</li>
		<li>
		  <div align="left"><a href="#menuv"><strong>Fotos</strong></a></div>
		</li>
	</ul></div>
    <div id="noticias">
      <? PHP?>
 </div><div id="posts">
<table width="450" border="0" align="center">
  <tr>
    <td width="450"><div class="titulopost"><?PHP?></div></td>
  </tr>
</table><?PHP?>
 </div>
 <table id="footer" width="100%" border="0" cellspacing="0">
  <tr>
    <td id="footer_left"><a href="#" class="footer_link"> Foro-</a><a href="#" class="footer_link">Fotos-</a><a href="#" class="footer_link">Juegos-</a><a href="#" class="footer_link">Chat-</a></td>
    <td id="footer_right">
<a href="#" title="Chubicum Ideas" class="rollover">chubicum</a></td>
  </tr>
</table>
</div>
</body>

Mikmoro · #2 (**permalink**) 16/08/2008, 18:13

Te puede pasar esto:

Cita:

#container {
width:800px;
text-align:left;
margin:0 auto;
}

Cita:

#menuv {
border: 2px solid #00AA00;
border-width: 0px 1px 0 1px;
width: 245px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}

+

Cita:

#menuv a {
text-decoration: none;
color: #FFFFFF;
background: #66CC33;
display: block;
padding: 3px 6px;
width: 245px;
}

= 257px, +

Cita:

#posts {background: #FFFFFF url(Images/fondito.png) repeat-x;
float: right;
width:550px;
text-align:left;
color: #000;
}

= 807px

Es decir, si sumas los anchos de los dos bloques el resultado es mayor que el contenerdor.

valenti77 · #3 (**permalink**) 16/08/2008, 18:29

Acabo de probar en cambiar el ancho del container, ya que si es lo que vos decis se tendria que arreglar al haber mas espacio supongo que se tendria que arreglar eso, le puse 2000px jaja, pero se me hace mas ancha la pagina y POSTS sigue en la fila de NOTICIAS, abajo del menu pero mas tirado a la derecha

.

Lo reviso y reviso ero no entiendo porq me pasa eso.

Muchas gracias por tu ayuda !

Mikmoro · #4 (**permalink**) 16/08/2008, 18:36

Claro, tienes mal el orden:

primero tienes el div "menú", luego tienes el div "noticias", que va debajo con clear:both;, y luego tienes el div "post", de manera que este último nunca podría ir arriba, porque el corte (clear:both;) de noticias lo impide.

Cambia el orden en el html:

menú-post-noticias y debería ir a su sitio.

valenti77 · #5 (**permalink**) 16/08/2008, 18:55

ahh claro qe tonto soyy, ya le cambie el clear, y lo puse en left, cambiando el orden ahora si queda bien... y en el caso de que quisiera agregar otra capa mas debajo de NOTICIAS, solamente poniendo el div debajo del div noticias, y copiando las propiedades de noticias, quedaria bien?

Y a la derecha? tendria que ponerla antes de POSTS con float:right para que se vaya a la derecha, y posts qe ya tiene float:right se va a pegar a la columna o capa que acabo de poner no ? Bueno y ademas de corregir los padding y los anchos del contenedor y eso, para que no me pase lo que me decias hoy

Era esa duda que tenia y no te molesto mas, me siento una larva pidiendo ayuda siempre por aca jaja, Muchas gracias! Saludos!