Foros del Web » Creando para Internet » CSS »

Espacio en Blanco entre imagenes

Estas en el tema de Espacio en Blanco entre imagenes en el foro de CSS en Foros del Web. Hola. quisiera que me ayudaran a saber que pasa con mi codigo.. Tengo en el footer de mi pagina dos columnas que a su vez ...
  #1 (permalink)  
Antiguo 22/05/2008, 13:58
Avatar de uokesita  
Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 214
Antigüedad: 9 años, 11 meses
Puntos: 17
Espacio en Blanco entre imagenes

Hola. quisiera que me ayudaran a saber que pasa con mi codigo..

Tengo en el footer de mi pagina dos columnas que a su vez tienen una imagen top para el borde superior una imagen q se repite para el contenido y una imagen inferiror para el borde de abajo..

Pero algo me esta saliendo mal. ya que entre el borde superior y el contenido deja un espacio en blanco y esto no sucede con la parte inferior.. aca la pagina para que lo vean
http://usuarios.lycos.es/uokesita/2.0/index.php

De verdad que no veo donde tengo el fallo, entonces a ver si me hechan una mano y me dicen donde tengo el error



estilo del footer css
Código HTML:
div.footer {
	width:1000px;
	height:auto;
	margin-left:100px;
	margin-top:30px;
}
div.footest {
	float:right;
	width:200px;
	height:auto;
}
div.foot1 {
	float:left;
	width:350px;
	height:auto;
}
div.foot2 {
	float: right;
	width:350px;
	height:auto;
	margin-left:500px;
}
div.foottop {
	background: url(img/foottop.png);
	background-repeat:no-repeat;
	height:10px;
	width:350px;
}
div.footbg {
	background:url(img/footbg.png);
	background-repeat: repeat-y;
	width:340px;
	height:auto;
}
div.footbottom {
	background:url(img/footbottom.png);
	background-repeat:no-repeat;
	height:10px;
	width:340px;
}

parte del archivo footer.php
Código PHP:


     
<div class="footer">
          <
div class="footest">
               <
div class="sidetop"
                    <
span class="gris">
                    <
center>
                         
Estadisticas
                    
</center>
                    </
span
               </
div>
               <
div class="sidebg">
                    <
center>
                    <
center>
               </
div>
               <
div class="sidebottom"></div>
          </
div>
          
          <
div class="foot1">
               <
div class="foottop"></div>
               <
div class="footbg">
               <
center>
               <
span class="gris">
               
Espacio disponible para publicidad
               
</span>
               </
center>
               </
div>
               <
div class="footbottom"> </div>
          </
div>
          
          <
div class="foot2">
                  <
div class="foottop"></div>
                    <
div class="footbg">
                       <
center>
                       <
span class="gris">
                       
Espacio disponible para publicidad
                       
</span>
                       </
center>
                    </
div>
                    <
div class="footbottom"> </div>
         
          </
div>
          
          <
div class="creditos">
          <
span class="negro">
          
Todos Los Derechos Reservados &copy2008  || Conacto Web: <a href="mailto:[email protected]">uoke[email protected]hotmail.com</a>
          </
span>
          </
div>
          
     </
div

otra cosa.. como hago para solucionar el problema que se ve cuando abro la pag en firefox. es decir el footer queda inmediatamente pegado donde termina el contenido central de la pag.. haciendo que la columna de estadisticas se monte sobre la de publicidad :S en internet explorer se ve tal cual como lo quiero (las pocisiones)

Última edición por uokesita; 22/05/2008 a las 15:53
  #2 (permalink)  
Antiguo 22/05/2008, 16:27
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 entre imagenes

El primer problema y su solución te van a parecer increibles: la cosa es que como tu pones un div vacío para foottop, IE6 considera que ahí vas a poner texto. De esa menra, como el tamaño heredado es mayor que 10px, reserva el tamaño mínimo para el texto. Si pones:

font-size: 10px;

en ese div se solucionará.

Otra solución sería poner tu imagen en la parte interior, es decir:

div.foottop {
background: url(img/foottop.png) no-repeat center bottom;
height:10px;
width:340px;
}

Prueba a ver la que ás te guste.

El otro problema ahora miro a ver qué se ve.

Mikel.
  #3 (permalink)  
Antiguo 22/05/2008, 16: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 entre imagenes

Creo que para el segundo problema deberías añadir un clear: both a footer(para que se vea como en IE6), porque si no sale al mismo nivel que el contenido de la izquierda. Esto sería.

div.footer {
width:1000px;
height:auto;
margin-left:100px;
margin-top:30px;
clear: both;
}

Ya probarás a ver y contarás.

Mikel.
  #4 (permalink)  
Antiguo 22/05/2008, 19:27
Avatar de uokesita  
Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 214
Antigüedad: 9 años, 11 meses
Puntos: 17
Respuesta: Espacio en Blanco entre imagenes

jajaja chanfles muchisimas gracias por tu ayuda.

probe con colocar el tamaño de letra, pero aun en 10px m dejaba espacio en blanco y lo reduje a 5px.. ahora ya no muestra ningun espacio... me pregunto porq si en las propiedades del borde inferior nunca especifique el tamaño de letra, con ese no me da problemas y lo muestra sin ningun espacio?

con respecto a lo de clear:both; me funciono tambien pero me deja la comlumna de estadisticas por fuera abajo (solo con firefox) me hechas otra mano?

gracias
  #5 (permalink)  
Antiguo 23/05/2008, 01:59
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 entre imagenes

Mira, lo de los 10px que dices que con la imagen de abajo no te ocurre es lo siguiente: como te expliqué, esos dos bloques miden unos 16px cada uno (en IE), y tu imagen mide 10px. La de abajo te sale bien porque aunque su contenedor es mayor, si no le indicas otra cosa, el fondo se coloca en la parte superior de la caja, y por eso, aunque sea más grande la caja, la imagen sale pegada arriba.
Con la de arriba pasa lo mismo, pero como la tienes pegada a la parte superior de la caja, al no rellenarla deja un espacio vacío debajo. Podrías comprobarlo fácilmente probando la segunda solución que te di, es decir, pegando la imagen de fondo a la parte inferior de la caja:

div.foottop {
background: url(img/foottop.png) no-repeat center bottom;
height:10px;
width:340px;
}

y verás que se ajusta sin usar lo de los 5px.

El otro asunto le echo un vistazo luego a ver si se ve qué pasa.

Mikel.
  #6 (permalink)  
Antiguo 23/05/2008, 15:51
Avatar de uokesita  
Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 214
Antigüedad: 9 años, 11 meses
Puntos: 17
Respuesta: Espacio en Blanco entre imagenes

ahhhhh cierto.. gracias por explicarme
  #7 (permalink)  
Antiguo 23/05/2008, 16:07
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 entre imagenes

Hola otra vez.

En cuanto al problema pendiente, mi dificultad para ayudarte es que no sé cómo quieres que quede. Yo ahora lo veo prácticamente igual en IE6 que en FF. No sñe cuál debe ser el resulado final, así que es difícil saber.

Mikel.
  #8 (permalink)  
Antiguo 23/05/2008, 22:10
Avatar de uokesita  
Fecha de Ingreso: enero-2008
Ubicación: Maracaibo
Mensajes: 214
Antigüedad: 9 años, 11 meses
Puntos: 17
Respuesta: Espacio en Blanco entre imagenes

Si tienes razon ya se ven iguales... solo que ayer no se veian iguales.. :s pero bueno.. ya esta arreglado muchas gracias por tu ayuda
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 08:03.