Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Poner una imagen al lado de otra

Estas en el tema de Poner una imagen al lado de otra en el foro de CSS en Foros del Web. Me gustaria poner 3 imagenes, facebook, twitter, youtube. El problema es que solo me aparece la de facebook y todo el contenedor me aparece para ...
  #1 (permalink)  
Antiguo 04/08/2013, 11:54
 
Fecha de Ingreso: marzo-2012
Mensajes: 180
Antigüedad: 12 años, 8 meses
Puntos: 2
Poner una imagen al lado de otra

Me gustaria poner 3 imagenes, facebook, twitter, youtube. El problema es que solo me aparece la de facebook y todo el contenedor me aparece para apretar e ir a al facebook

El header lo tengo partido en 3 partes, espacio izquierdo, espacio centro y derecho, en la parte derecha es donde pongo el social y solo aparece facebook

Dejo el codigo

css
Código PHP:
.social{
    
float:left;
    
width:100%;
    
height:100%;
    
overflow:hidden;
    
displayblock;
}

.
facebook {background:url('../images/facebook.png'no-repeatfloat:left;}
.
twitter {background:url('../images/twitter.png'no-repeatfloat:left;}
.
youtube {background:url('../images/youtube.png'no-repeatfloat:left;} 
header
Código PHP:
                <div id="head_spaceright">
                        <
div class="social facebook" style="cursor: pointer;" onclick="location.href='https://www.facebook.com/';"></div>
                        <
div class="social twitter" style="cursor: pointer;" onclick="location.href='https://twitter.com/';"></div>
                        <
div class="social youtube" style="cursor: pointer;" onclick="location.href='https://youtube.com/';"></div>
                </
div
  #2 (permalink)  
Antiguo 04/08/2013, 12:17
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: poner una imagen al lado de otra

1.- que estilos tiene head_spaceright
2.- comprueba existan las imágenes y la extensión sea correcta.
3.- porque usas javascript para abrir los links? es muy mala practica.
  #3 (permalink)  
Antiguo 04/08/2013, 14:12
 
Fecha de Ingreso: marzo-2012
Mensajes: 180
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: poner una imagen al lado de otra

1.- solo tiene puesto esto
Código PHP:
#head_spaceright {width:20%; height:80px; float:left; margin:0;} 
2.- el nombre de las imagenes y extension correctar, tambien existen las imagenes en el lugar correcto
3.- y que forma me aconsejas para abrirlos?
  #4 (permalink)  
Antiguo 04/08/2013, 14:27
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: poner una imagen al lado de otra

cuando coloques código trata de usar el Highlight correcto, en base al CSS mostrado considero que tus botones si se están mostrando pero al decirles que ocupen el 100% tanto ancho como alto, superan el tamaño del contenedor y quedan ocultos por algún otro elemento o CSS, para solventarlo deberás aplicar overflow:auto al contenedor, de esa forma aparecerá un scrollbar que te permitirá deslizarte y ver el resto de los elementos.

la otra es que replantees tu estructura y la corrijas, el como aconsejo abrir los links no es que yo lo diga simplemente solo hay una forma correcta de hacerlo y es mediante <a> , cualquier otro método se utilizara a reserva de que la ocasión lo amerite/necesite.
  #5 (permalink)  
Antiguo 04/08/2013, 15:22
 
Fecha de Ingreso: marzo-2012
Mensajes: 180
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Poner una imagen al lado de otra

Si que aparecen, siguiendo tus consejos. Pero aparecen uno debajo del otro con una separacion y a mi me gustaria uno al lado del otro de forma horizontal

Gracias
  #6 (permalink)  
Antiguo 04/08/2013, 15:26
 
Fecha de Ingreso: marzo-2012
Mensajes: 180
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Poner una imagen al lado de otra

Vale gracias por todo solucionado, al poner una altura y anchura fijas aparecen correctamente. Gracias
  #7 (permalink)  
Antiguo 04/08/2013, 15:28
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: Poner una imagen al lado de otra

claro aparecerán uno abajo del otro mientras no les digas lo contrario, si ocupan el 100% del ancho nunca aparecerán como los quieres y sumado a eso estas usando elementos de bloque, cámbialos por <a> este es elemento de linea, o bien flotalos.

pasa a leer sobre HTML y CSS para que entiendas a que me refiero.
http://librosweb.es

Etiquetas: imagenes, lado
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:53.