Foros del Web » Creando para Internet » CSS »

Espacio en blanco, ayuda :(

Estas en el tema de Espacio en blanco, ayuda :( en el foro de CSS en Foros del Web. Hola, tengo estos estilos CSS, le podrian echar un ojo y decirme que me falta ? porque me quedan mal , Me queda un espacio ...
  #1 (permalink)  
Antiguo 16/08/2008, 17:58
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
Exclamación Espacio en blanco, ayuda :(

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> 
  #2 (permalink)  
Antiguo 16/08/2008, 19:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Espacio en blanco, ayuda :(

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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 16/08/2008, 19:29
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
Respuesta: Espacio en blanco, ayuda :(

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 !
  #4 (permalink)  
Antiguo 16/08/2008, 19:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Espacio en blanco, ayuda :(

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 16/08/2008, 19:55
Avatar de valenti77  
Fecha de Ingreso: julio-2008
Ubicación: Berisso, Buenos Aires
Mensajes: 244
Antigüedad: 9 años, 5 meses
Puntos: 4
Respuesta: Espacio en blanco, ayuda :(

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!
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 05:44.