[SOLUCIONADO] Poner una imagen al lado de otra

[manelmanel8]

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; 
    display: block; 
} 
 
.facebook {background:url('../images/facebook.png') no-repeat; float:left;} 
.twitter {background:url('../images/twitter.png') no-repeat; float:left;} 
.youtube {background:url('../images/youtube.png') no-repeat; float: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>  
   

[ArturoGallegos]

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.

[manelmanel8]

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?

[ArturoGallegos]

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.

[manelmanel8]

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

[manelmanel8]

Vale gracias por todo solucionado, al poner una altura y anchura fijas aparecen correctamente. Gracias

[ArturoGallegos]

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