Crear barra flotante HTML estilo "Series.ly"

[imborx]

Hola, quería crear una barra flotante como la que usan en http://series.ly/scripts/ o http://bazzinga.es/vote (que tenga varios iconos y cada uno de ellos enlace a una url especifica). ¿Como puedo hacerlo?

Un saludo y gracias :D

[fede5426]

En esas webs que pasaste, es un contenedor <div> con position fixed. Dentro del div hay una lista, cada item con su respectivo enlace.

Este es el código que tiene series.ly

[imborx]

Iniciado por fede5426

En esas webs que pasaste, es un contenedor <div> con position fixed. Dentro del div hay una lista, cada item con su respectivo enlace.

Este es el código que tiene series.ly

Gracias!!

Soy novato total, lo del contenedor <div> quieres decir que es HTLM? PHP? En que parte del codigo tendria que meterlo?

Un saludo

[GemliosG]

Hola.

El codigo div va en el html.

Por ejemplo, aqui te voy a mostrar la división de un menú:

<div></div>

Eso para dividirlo, pero deben tener un identificador o una clase, aqui es cuando entra el css

id, es el master por así decirlo

class. es por si quieres que algun objeto dentro del div master tenga un diseño un poco diferente

En CSS cuando vas a darle forma a los dos es así:

ID:

#nombredelid{ las características que quieres tener, ya sea color, lineas, etc}

Class

.nombredelaclase{ lo mismo que arriba}

Es facil, ejemplo de un menú superior con id y uno de sus sub menús con class.

Código:

<div id="menu">
<ul>
<li>Home</li>
<li>Sobre nosotros</li>
<li class="menu1">AAA</li>
</ul>
</div>

Ahora después de esto en el CSS pon

Código:

#menu{ background: black;}
 .menu1{ background: red;}

Más o menos lo que hice fue que el menú tenga de fondo el color negro pero AAA tenga de fondo rojo.

Otra cosa que se me olvidaba.

En mi caso yo siempre creo un divisor para contenido, ya sabes donde pondré etiquetas form p h1 ul , etc

al crear el div le pongo con, pero para no tener que ponerle class a cada elemento que quiero diferente. Simplemente en el CSS declaro

#nombredelid p {}

Esto me modificará todas las etiquetas p del contenido o de la etiqueta que mongas.

Espero que te sea de utilidad

[GemliosG]

Mire tengo una duda, los efectos de cuando le paces por encima de alargarse es con CSS o con javascript, si es con alguno me puede recomendar donde puedo aprenderlos

[fede5426]

En este caso en particular, está hecho con CSS.. Con la propiedad transition.
Por ejemplo

#capsule-widget ul li a{
Width: 52px; //definimos el ancho
Height: 52px; //definimos el alto
Transition: width 0.5s; //definimos la propiedad que queremos alterar y el tiempo, en este caso 0.5 segundos.
}

Y despues:

#capsule-widget ul li a:hover{
Width: 80px;
}

Con esto indicamos que queremos que al pasar el mouse por encima, el enlace pase de tener 52px a 80px.

[fede5426]

Iniciado por GemliosG

Mire tengo una duda, los efectos de cuando le paces por encima de alargarse es con CSS o con javascript, si es con alguno me puede recomendar donde puedo aprenderlos

Donde aprender, hay infinidad de lugares. Hay cursos básicos, cursos avanzados, de pago, gratuitos, en videos, en libros digitales, etc.. eso hablando de estudiar desde tu casa, seguramente en tu ciudad o en cercanias hay alguna institucion donde dicten clases de diseño y programacion web.