Ene 15, 2009

Escrito por Joselite | 0 Comentarios

Menú Descriptivo con CSS

Esta es una buena manera de reducir el peso de tu página Web, ya que éste menú no usa Javascript, se hace todo con CSS. Ver demo

  1. Creamos una lista con una pequeña descripción del contenido que contiene el vínculo del botón del menú.


    2. ?Ver código HTML
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

     <div class="baseofmenu">  
 <ul class="boxedmenu">  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci t leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Entertainment</small>Celeb Gossip</a></li>  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Technology</small>Softwares</a></li>  
 <li><a href="#">  
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt. Cras fermentum orci ut leo. Cras malesuada quam sed nibh interdum accumsan. Suspendisse magna arcu, blandit nec, placerat vitae, bibendum eu, tortor. Ut sapien sapien, tempus eget, sodales ut, facilisis ut, ante.  
 
 <small>Sports</small>Live Cricket</a></li>  
 </ul>  
 </div>


  2. Éste es el CSS que convierte nuestra lista en un menú / desplegable.
    3. ?Ver código CSS
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

    <br \>
 body {  
     font-family:Georgia, "Times New Roman", Times, serif;  
 }  
 .baseofmenu{  
     height:104px;  
     background-color:#99CC33;  
     -moz-border-radius: 10px;  
     -webkit-border-radius: 10px;  
     width: 760px;  
 }  
 .boxedmenu {  
     list-style-type:none;  
     display:block;  
     margin: 0px;  
     padding: 0px 5px 0px 5px;  
     position: absolute;  
     width: 750px;  
 }  
 .boxedmenu li{  
     display:inline  
 }  
 
 /* Styling A link START */  
 .boxedmenu li a, .boxedmenu li a:link, .boxedmenu li a:visited{  
     display: inline;  
     text-decoration:none;  
     font-size: 25px;  
     background-color: #339966;  
     color: #a3e9c6;  
     margin: 10px 5px;  
     padding: 10px;  
     letter-spacing: 3px;  
     border: 1px solid #306F4F;  
     -moz-border-radius: 10px;  
     -webkit-border-radius: 10px;  
     float:left;  
     width: 29%;  
 }  
 .boxedmenu li a:hover, .boxedmenu li a:active{  
     background-color: #206442;  
     border-color: #a3e9c6;  
     color: #fff;  
 }  
 /* Styling A link END */  
 
 /* Styling SMALL text item START */  
 .boxedmenu small{  
     display:block;  
     font-size:16px;  
     background-color: #206442;  
     padding: 0px 10px;  
     margin: 0px -10px 5px -10px;  
     line-height: 25px;  
     color: #339966;  
     letter-spacing: 8px;  
 }  
 .boxedmenu li a:hover small, .boxedmenu li a:active small{  
     background-color: #339966;  
     color: #206442;  
 }  
 /* Styling SMALL text item END */  
 
 /* Styling Paragraph within each menu item START */  
 .boxedmenu li a p {  
     font-size: 11px;  
     padding: 5px;  
     margin: 0px;  
     display: none;  
 }  
 .boxedmenu li a:hover p, .boxedmenu li a:active p{  
     display: block;  
 }  
 /* Styling Paragraph within each menu item END */

Visto en: Witty Sparks

Leer Más
Ene 14, 2009

Escrito por Joselite | 0 Comentarios

Subastar una patada en tus partes

Un usuario de Ebay en Valencia ha subastado una patada en sus testículos para que el ganador pudiera desahogarse de cualquiera de sus problemas. El “vendedor” estaba dispuesto a representar a la persona que el ganador de la puja desease, un jefe, un amigo, la pareja, … además de poder propinar la patada descalzo o con calcetines mientras el tiene las piernas separadas. No estába permitido tomar carrerilla.

La subasta acabó con un ganador, a pesar de que finalmente el “artículo” subastado fué invalidado, quedando el ganador desamparado. Se dice que lo han visto hace unas horas dando patadas a las farolas.

Visto en: Comunidad Ebay

Leer Más
Ene 12, 2009

Escrito por Joselite | 0 Comentarios

Comprobar la seguridad de tu blog

Hay algunas plantillas de Word Press que pueden tener vulnerabilidades de seguridad, las cuales pueden exponer tu blog a posibles spammers, hackers, …

BlogSecurity ofrece un “Wordpress Theme Scanner“, el cual comprobará si tu tema es vulnerable a:

  • Comprobará la versión de tu WP.
  • Realizará un test a tus plantillas para comprobar si tu blog está expuesto a posibles ataques XSS
  • Enumerará los plugins. En futuras versiones se realizarán comprobaciones sobre estos.

Leer Más
Ene 11, 2009

Escrito por Joselite | 0 Comentarios

Las mentiras de los atentados del 11- S

Sin ánimo de remover el tema, aquí dejo un link que me resultó muy curioso donde se desmienten algunas de las leyendas que corren sobre los atentados del 11 – s en New York.

Enlace: Leyendas Urbanas

Leer Más
Ene 10, 2009

Escrito por Joselite | 0 Comentarios

Inaguración DotNetClub UOC

Ayer se inaguró el DotNetClub de la UOC. Os animo a todos que os paséis por allí (actualmente está en fase de desarrollo el portal) , y muy pronto, todos los que tengáis ganas de aprender cosas nuevas, aportar conocimientos, asistir a charlas, … Seréis bienvenidos. Aquí encontraréis información sobre lo que és un DotNetClub, y en esta otra dirección están todos los DotNetClubs de las distintas universidades.

Leer Más
Ene 9, 2009

Escrito por Joselite | 0 Comentarios

Récord De descargas de WordPress 2.7

Impresionante la cifra de descargas que lleva en 1 mes la nueva versión de WordPress 2.7:  1.005.7111.

Aquí os dejo la imagen que lo corrobora. Esta imagen habla por si sola y demuestra lo muy de moda que está WordPress, así como el gran trabajo de su equipo y la gran evolución que está sufriendo la plataforma.

contador_descargas_wp1

Leer Más
Ene 8, 2009

Escrito por Joselite | 0 Comentarios

Función ClearTimeOut() Javascript

La función ClearTimeOut() sirve para desactivar una llamada a una función que se llama a través del método setTimeOut(). Es muy útil esta función, lo único que se debe tneer en cuenta es que debemos tener un id con el identificar de la llamada al método setTimeOut().

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
<!--
var id;
 
function timeOut ()
{
  id = setTimeout("muestra_capa()", 4500);
}
 
function anulaTimeOut ()
{
  clearTimeout(id);
}
 
function muestra_capa() ()
{
  document.getElementById("capaPrueba").style.display = "block";
}
//-->
</script>

Leer Más
Página 16 de 30« Primero...«1415161718»...Último »