Foros del Web » Creando para Internet » CSS »

Cree una capa flotante y no se ven los botones

Estas en el tema de Cree una capa flotante y no se ven los botones en el foro de CSS en Foros del Web. Quiero hacer en un sitio que estoy trabajando una barra flotante con íconos de social media. Probé el código en el Dreamweaver localmente y funcionó. ...
  #1 (permalink)  
Antiguo 26/03/2011, 08:27
 
Fecha de Ingreso: febrero-2011
Mensajes: 11
Antigüedad: 6 años, 10 meses
Puntos: 0
Pregunta Cree una capa flotante y no se ven los botones

Quiero hacer en un sitio que estoy trabajando una barra flotante con íconos de social media. Probé el código en el Dreamweaver localmente y funcionó. Pero cuando meto el código en Joomla, sólo se ven los puntos de la lista con la que quiero hacer el menú. Lo estoy tratando de hacer con sprites. Cabe aclarar que el sitio en el que estoy trabajando es [URL="http://ozzio.com.ar"]http://ozzio.com.ar[/URL] y lo que no se ven son las redes sociales


Paso a continuación el código html:

<div id="flotante">
<ul>
<li><a class="facebook" href="http://www.facebook.com/profile.php?id=100002080938644#!/profile.php?id=100002080938644" title="Seguinos en Facebook"></a></li>
<li><a class="twitter" href="http://twitter.com/OzzioDeco" title="Seguinos en Twitter"></a></li>
<li><a class="flickr" href="http://www.flick.com/photos/ozzio" title="Seguinos en Flickr"></a></li>
<li><a class="rss" href="http://ozzio.com.ar/index.php/blog.feed?type=rss" title="RSS Feed"></a></li>
<li><a class="youtube" href="http://www.youtube.com/user/OzzioDeco" title="Nuestro Canal de Youtube"></a></li>
<li><a class="newsletter" href="http://www.ozzio.com.ar/index.php/contacto.html" ></a></li>
</ul>

</div>

Código CSS

#flotante {
font-family: "arial narrow black";
font-size: 10px;
font-style: normal;
color: #000;
background-color: #280000;
text-align: center;
vertical-align: baseline;
clear: none;
float: right;
height: auto;
width: 25px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 10px;
overflow: visible;
position: fixed;
visibility: visible;
z-index: 1;
right: 0;
top: 110px;
margin-top: 35px;
margin-right: 0px;
margin-bottom: 35px;
margin-left: 25px;
border: 3px solid #fff;
border-right: none;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
a
/* Add the drop shadow */
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);
}

#flotante ul li {
display: block;
list-style:none;
margin-bottom:5px;
width:32px;
border: 2px outset #FFF;
}

#flotante a {
display:block;
width:32px;
background-image: url(../images/sprites.png);
margin: 0 auto;
}

.facebook {
background-repeat: no-repeat;
background-position: 0px 0px;
height: 32px;
width: 32px;
}

.facebook:hover {
background-repeat: no-repeat;
background-position: 0px -32px;
height: 32px;
width: 32px;
}

.twitter {
background-repeat: no-repeat;
background-position: 0px -64px;
height: 32px;
width: 32px;
}

.twitter:hover {
background-repeat: no-repeat;
background-position: 0px -96px;
height: 32px;
width: 32px;
}

.flickr {
background-repeat: no-repeat;
background-position: 0px -128px;
height: 32px;
width: 32px;
}

.flickr:hover {
background-repeat: no-repeat;
background-position: 0px -160px;
height: 32px;
width: 32px;
}

.rss {
background-repeat: no-repeat;
background-position: 0px -192px;
height: 32px;
width: 32px;
}

.rss:hover {
background-repeat: no-repeat;
background-position: 0px -224px;
height: 32px;
width: 32px;
}

.youtube {
background-repeat: no-repeat;
background-position: 0px -256px;
height: 32px;
width: 32px;
}

.youtube:hover {
background-repeat: no-repeat;
background-position: 0px -288px;
height: 32px;
width: 32px;
}

.newsletter {
background-repeat: no-repeat;
background-position: 0px -320px;
height: 32px;
width: 32px;
}

.newsletter:hover {
background-repeat: no-repeat;
background-position: 0px -352px;
height: 32px;
width: 32px;
}

A la espera de sus comentarios, les agradezco de antemano
  #2 (permalink)  
Antiguo 26/03/2011, 09:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cree una capa flotante y no se ven los botones

Así lo veo yo en ff:



¿cómo debería verse?
  #3 (permalink)  
Antiguo 28/03/2011, 00:24
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Cree una capa flotante y no se ven los botones

Lo veo igual que kseso? en Google Chrome.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: botones, flotante, ven, capas
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 02:24.