Fecha actual 25 May 2013 14:58

Todos los horarios son UTC + 1 hora




Nuevo tema Responder al tema  [ 4 mensajes ] 
Autor Mensaje
NotaPublicado: 11 Nov 2011 20:34 
Desconectado
Aprendiz
Aprendiz
Avatar de Usuario

Registrado: 31 Ago 2011 04:38
Mensajes: 15
De la web de Eric Meyer he extraído este sencillo pero vistoso menú realizado única y exclusivamente con css, sin javascript alguno. Espero que esté a la altura del hilo. Saludos.

Código css (a colocar entre las etiquetas head):
Código:
    <style type="text/css">
<!--
body {position: relative; background: #000140; margin: 30; padding: 0;}

div#links {position: absolute; top: 20px; left: 20; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
   padding: 5px 10px; margin: 0 0 1px; border-width: 0;
   text-decoration: none; color: #FFC; background: #444;
   border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; background: #22232F;
   font: 13px Verdana, sans-serif; padding: 10px;
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
-->

</style>

           

Código html (entre las etiquetas body):
Código:
    <div id="links">
<a href="#">Home<img alt="intro_css" src="http://cdn1.iconfinder.com/data/icons/Vista-Inspirate_1.0/128x128/filesystems/folder_home.png" height="160" width="116" /></a>
<a href="#">Links<img src="http://cdn5.iconfinder.com/data/icons/sharp_folder_icons_by_folksnet/128/links.png"></a>
<a href="#">Online<img src="http://cdn2.iconfinder.com/data/icons/humano2/128x128/apps/gnutella.png"></a>
<a href="#">Fútbol<img src="http://cdn3.iconfinder.com/data/icons/ballcons/png/classic.png"></a>
<a href="#">Contactar<img src="http://cdn3.iconfinder.com/data/icons/blackblue/128/AddressBook.png"></a>
<a href="#">Sorpresa<img src="http://www.smileysnetwork.com/avatars-sexy/babes_69.jpg"></a>
</div>   

Fuente: pure css popups :8):

_________________
Si la vida te da la espalda, tócale el culo.


Arriba
 Perfil  
 
NotaPublicado: 11 Nov 2011 22:03 
Desconectado
Moderador
Moderador
Avatar de Usuario

Registrado: 29 Dic 2008 17:37
Mensajes: 1542
Ubicación: Seras cotilla ¬¬
Está bien, pero hay una cosa que sobra en el código, concretamente en el la primera parte:
Código:
body {position: relative; background: #000140; margin: 30; padding: 0;}

No hace daño este código ni nada, pero para mi gusto, sobra :;):
Saludos!

_________________
MichanForo! http://michanforo.net/ Foro de entretenimiento, webmaster... Puedes promocionar tu sitio web!
Síguenos en Twitter http://twitter.com/#!/michanforo


Arriba
 Perfil  
 
NotaPublicado: 12 Nov 2011 13:36 
Desconectado
Aprendiz
Aprendiz
Avatar de Usuario

Registrado: 31 Ago 2011 04:38
Mensajes: 15
Se agradece la observación.

_________________
Si la vida te da la espalda, tócale el culo.


Arriba
 Perfil  
 
NotaPublicado: 14 Ene 2012 14:53 
Desconectado
Administrador
Administrador
Avatar de Usuario

Registrado: 18 Nov 2005 16:09
Mensajes: 2803
Ubicación: Barcelona,España
buen aporte ::D:

_________________
Imagen

http://www.ckgrafico.com


Arriba
 Perfil  
 
Mostrar mensajes previos:  Ordenar por  
Nuevo tema Responder al tema  [ 4 mensajes ] 

Todos los horarios son UTC + 1 hora


¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro
No puede enviar adjuntos en este Foro

Buscar:
Saltar a:  
Powered by phpBB® Forum Software © phpBB Group
Traducción al español por Huan Manwë para phpbb-es.com