Como "Flotar" los botones sociales con CSS

[merino_renato]

Hola a todos:

Disculpen si este no es el lugar para preguntar, pero ya busqué en el histórico del foro y nada, me gustaría poder poner una imagen a flotar y que mis botones sociales de facebook y google+1 se muevan o más bien que se queden fijos aunque se baje el scroll como en la siguiente web:

http://ciudadblogger.com/2011/07/botones-flotantes-para-compartir-de.html

Lo malo es que el código que puso es para un blog, ya googlee algo respecto a los float en css pero no me queda muy claro los pasos, tengo que poner en css algo y luego en el html, algun link o ayuda por aqui, por favor?

Solo encontré esto:

<div id="leftFloat">A left-floated div</div>
<div id="rightFloat">A right-floated div</div>

.
.
.

#leftFloat
{
float: left;
width: 100px;
}

#rightFloat
{
float: right;
width: 100px;
}


Rules to remember
If you want to have a right-floated box, you need to put the HTML for the

floated box before the non-floated content (not after as you might

expect).
In the original CSS version 2 spec you had to specify a width for all

floated elements (though the width could be relative, such as a percentage

width). In the new CSS2 spec, however, an explicit width is not required.
If you need to have content after a float that shouldn't run alongside the

float, use the clear property.


EJEMPLOS



<div style="float: right; width: 100px;">



Saludos y gracias por la ayuda

[xFantaSx]

Hola merino_renato, lo que debes hacer es crear un div contenedor de estos botones, este div, para que quede de la forma que desees basta con ponerle una propiedad position:fixed y con los un right:0 quedará fijo al lado izquierdo de la página, ahora tendrías que variar la posición de altura con top o bottom variando los valores hasta que encuentres el lugar que deseas.
Luego le pones adentro tus botones.

debería quedar algo así:
el css

Código CSS:

div {
    position:fixed; /*Aquí lo dejas fijo */
    left: 0px; /* Aquí especificas la distancia respecto al margen izquierdo */
    top: 170px; /* Especificas la distancia respecto al margen superior de la página */
    z-index: xx; /*Dependiendo si tienes algo que lo superponga */
}
 

Código HTML:

<div> <!-- Tus botones de compartir --> </div>
 

[merino_renato]

Iniciado por xFantaSx

Hola merino_renato, lo que debes hacer es crear un div contenedor de estos botones, este div, para que quede de la forma que desees basta con ponerle una propiedad position:fixed y con los un right:0 quedará fijo al lado izquierdo de la página, ahora tendrías que variar la posición de altura con top o bottom variando los valores hasta que encuentres el lugar que deseas.
Luego le pones adentro tus botones.

debería quedar algo así:
el css

Código CSS:

div {
    position:fixed; /*Aquí lo dejas fijo */
    left: 0px; /* Aquí especificas la distancia respecto al margen izquierdo */
    top: 170px; /* Especificas la distancia respecto al margen superior de la página */
    z-index: xx; /*Dependiendo si tienes algo que lo superponga */
}
 

Código HTML:

<div> <!-- Tus botones de compartir --> </div>
 

Muchas gracias xFantaSx:

En realidad lo que me gustaría es "fijar" con la técnica que mencioné en mi primer mensaje, los botónes de "necesita ayuda para reservar?" junto con el cuadro para buscador y el boton +1 de google que aparecen en el lado derecho del área header de la web que pongo en mi firma...

Supongo que el código que me pusiste me servirá, y que lo único que debo hacer después de pegar el código en el css invirtiendo el lado para que quede en el lado derecho, será pasar el html del div que tengo actualmente al nuevo div que voy a crear con el codigo que me proporcionaste, no es así?

Y la regla esa que leí que el float se pone al principio del body aplica en este caso?

Tienes el codigo o algun link? ya estuve googleando y no halle nada...

Muchas gracias por la ayuda te debo una

Saludos

[xFantaSx]

No entiendo lo del float, para lo que quieres no es necesario aplicarla.
Si lo que quieres es dejar los botones fijos en el lugar en el que están en tu web, pues sólo aplica una propiedad position:fixed y van a quedar fijos en el lugar que los tienes.

No sé si eso es lo que quieres, o no te estoy entendiendo :S.
Si quieres deja una imagen con lo que deseas.

[merino_renato]

Hola a todos:

Pues finalmente pude poner el div como queria, este código me funcionó a mi, pero no se si mi css está mal, porque con herramientas como SEO Quake, mi div "salta" y se ve muy mal

Este código lo puse en el css style:

#div-ejemplo {
position:fixed;
width:250px;
top: 2%;
right: 22px;
}

Y en el html se pone esto, solo se deben meter los div que quieres que se queden fijos dentro de esto:

<div id="div-ejemplo">en este espacio se meten los demás div que contengan botones de facebook, google+1, contacto, imagenes, etc.</div>

Habrá algún atributo en css que me falte poner?

y que siempre lo mantenga a la altura de donde se visualiza el header?

para que no se distorsionen mi "div-ejemplo" con herramientas como SEO Quake?

Saludos

[xFantaSx]

Podrías dejar una imagen de cómo se ve con/sin la barra de Seo-quake?, no sé qué es lo que pasa, entro a tu web y la veo sin los botones fijos.

[merino_renato]

Iniciado por xFantaSx

Podrías dejar una imagen de cómo se ve con/sin la barra de Seo-quake?, no sé qué es lo que pasa, entro a tu web y la veo sin los botones fijos.

Hola xFantaSx:

Lo que pasa es que puse el código en un archivo de prueba es que me quedó

muy malo el diseño pero ya pronto lo voy a poner, pero si tu tienes instalado el pluggin de SEO QUAKE para Chrome y lo fijas en la parte de arriba de las páginas, el div que creé se sube...

Bueno a más tardas estará mañana...

Gracias por la ayuda

Saludos