Para hacer un Menú desplegable, lo primero que se nos viene a la cabeza es, usar una solución basada en la combinación de HTML, CSS y Javascript, lo cual casi siempre nos resuelve nuestros problemas.

Sin embargo yo hace tiempo pensé en que tal vez se podría hacer sin tener que usar Javascript(Claro sin efectos ), y teniendo esto en mente me dispuse a buscar una solución para esto.

Y la encontré la solución, no recuerdo bien donde (Si logro encontrar el recurso podre el link), insisto no es mío este tip, pero me pareció útil compartirlo, y claro tiene una ventaja muy grande, la cual es, que es muy fácil de configurar y de usar.

Primero que nada necesitaremos una lista, la cual estará integrada así.

La lista principal será el menú, las listas de segundo nivel serán los submenus que estarán ocultos y puede contener hasta un tercer nivel, y se desplegaran de la siguiente forma, menú principal en horizontal, submenu segundo nivel vertical (oculto), submenu tercer nivel derecha.

La único que necesitara nuestra lista  es un id y con eso nos será suficiente.

<ul id="navmenu-h">
 <li>
 <a href="/">Inicio</a> <!-- Este es un uno de los menus -->
 </li>
 <li>
 <a href="/servicios">Servicios</a>
 <ul>              <!-- Esta es la lista del submenu, los li son los submenus -->
 <li>            <!-- Este es un uno de los submenus -->
 <a href="/noticias">Noticias</a>
 </li>
 </ul>
 </li>
 <li>
 <a href="/ventas">Ventas</a>
 <ul>
 <li>            <!-- Este es un uno de los submenus -->
 <a href="/reportes">Reportes</a>
 </li>
 <li>
 <a href="/categoria">categoria</a>
 <ul>              <!-- Esta es la lista del submenu 3er Nivel, los li son los submenus -->
 <li>            <!-- Este es un uno de los submenus3 Nivel -->
 <a href="/sucursal1">Surcursal 1</a>
 </li>
 <li>            <!-- Este es un uno de los submenus3 Nivel -->
 <a href="/sucursal2">Surcursal 2</a>
 </li>
 <li>            <!-- Este es un uno de los submenus3 Nivel -->
 <a href="/sucursal3">Surcursal 3</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

Y ha dicha lista agregaremos el siguiente css 

Css Cascading Style Sheet

Sabemos que cada día nos estamos especializando mas en la mejora de nuestro código, y leo en el blog de Andres(aka Anieto2K), que Aloe Studio, se han puesto a trabajar con el ordenamiento de las propiedades css,  agrupadas en secciones para comprenderlas mejor.

• Display y flujo
• Posición
• Dimensiones
• Margenes, Padding, Border,…
• Tipografía
• Background
• Opacidad,Cursores,…

Aunque entra en conflicto otra técnica que supe hace poco y consistía en ordenar todas las propiedades css por orden alfabético, por ejemplo (“border,display,font,z-index,etc“).

Sin bien estas técnicas no lograran que corra mejor nuestro sitio, si nos pueden ayudar a organizar y hasta disminuir nuestro código de una manera muy eficiente, usando alguna de ellas.
Ejemplo de como se vería un código con este tipo de orden.

el {
display: ;
visibility: ;
float: ;
clear: ;

position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;

width: ;
min-width: ;
max-height-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;

margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;

border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;

border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
outline: ;
list-style: ;

table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;

font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;

background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
opacity: ;
cursor: ;
content: ;
quotes: ;
}

Y coincido dice Andres, creo que esta es un mejor opcion que la que comente anteriormente(la de ordenar css alfabeticamente).

Creo que cada dia, iremos programando mejor.

Via  | Ordenación del CSS

Esta creo que es una “noticia”, un poco pasada pero sirve de mucho.

El bug en cuestión,que no estoy tan seguro si es un bug real o solo es problema de mi “tema”, consistía en que cuando insertaba una imagen, esta aparecía con un formato definido(CSS), con bordes grises, y con un texto en la parte inferior de dicha imagen, pero esto solo se veía cuando yo editaba o escribía el post, mas cuando lo publicaba solo aparecia la imagen y el texto pero sin formato, ni alineación, busque un par de veces la solución hasta que di con ella.

Dicha solución esta posteado en los foros de WordPress, en ingles, así que pongo aquí los pasos que seguí para solucionar dicho problema.

Solo agregamos el siguiente código a nuestro css

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Y listo, no hay nada mas que hacer, cabe recordar que aunque en el foro de wordpress, se vean diferentes opciones, esta fue la que mas me convenció y me gusto.

Con esto ya podemos ver nuestra imágenes con un formato mas fácil de usar y mas presentables

Nota: este mes y hasta mi boda, este blog va a estar un poco desatendido, por cuestiones obvias pero prometo escribir, lo mas seguido que pueda.

Fuente | WordPress 2.6 Image Aligntment Problems: What Doesn’t Work (7 posts)

Leyendo smashingmagazine, me encuentro con unos 30 themes(temas) para wordpress de una muy buena calidad, y en serio que solo por que este tema, me ha encantado, no he procedido a cambiarlo.

Aquí les pongo una probadita de estos temas, para que vean la calidad.

1. Colourise
   

   Theme Colourise

2. Twilight Saga WordPress Theme
   

   Twilight Saga WordPress Theme

3. Guzel Magazine WordPress Theme
   

   Guzel Magazine WordPress Theme

4. NewsWeek WordPress Theme
   

   NewsWeek WordPress Theme

Por supuesto si desean ver mas temas, osea ver todos los 30, los encontraran en | 30 Free High Quality WordPress Themes

Diseñas usando CSS, es bastante complicado, sobre todo si no conocemos todos o muchos atributos y valores que se le pueden asignar  a cada elemento de nuestra pagina.

Yo en lo personal ha veces me cuesta mucho trabajo, hacerle pequeñas modificaciones, ya que a veces es difícil recordar el valor o el atributo a modificar.

Lo mismo ha veces me ha pasado con Javascript, por lo cual hace tiempo me propuse hacer un framework, para trabajar con Javascript pero en “ESPAÑOL”, osea en ves de usar.

document.getElemntByID(elemento); cambiarlo a documento.obtenerElementoPorClave(elemento);

Suena algo tonto, pero algo así era mi idea, pero con tantas cosas en mente, decante por no hacerlo ya no que representaba ningún, beneficio(aparte del idioma).

Alguien también se le ocurrió, proponer de ¿porque no había un CSS, en castellano?, ¿suena tan descabellada la idea,? no creo. veamos como quedaría

[Css]

#menu{
ancho:300px;
alto:130px;
margen: 10 auto;
fuente: Arial, Helvetica, sin-serifa 0.7em gorda;
texto-adornado:subrayado;
flotacion:izquierda;
interlineado:0.9em;
espacio-entre-letritas:0,3em;
disponer:poco 60%;
}

[/Css]

Creo que seria bastante interesante, ojala y nos oiga la W3C, y nos tome en cuenta, y aunque esto suene gracioso, no hay que olvidar que no debemos dejar morir a nuestro querido idioma español/castellano.

Vía | CSS con humor

Y ya que estamos entrados con esto de las listas les dejo también unos diseños de formularios que están muy impresionantes, a mi me gustaron bastante inclusive me he inspirado para hacer algunos en un par de proyectos.

Creo que a veces no tomamos en cuenta esta parte sin embargo esta parte es algo sumamente fundamental para interactuar con los usuarios, de lo contrario, sentirán como si el sitio fuera algo raro o no muy amigable.

Nuevamente les pongo algunos diseños y enlaces de los que mas me han gustado, el resto lo encontraran en la pagina de quien hizo esta recopilación que ahora si son de smashinmagazine, en donde también hay otros, diseños pero me gustaron mucho mas estos.

Como sabrán me gusta estar rediseñando mi blog muy seguido, esto no es con el afán de molestarlos ni mucho menos, pero me gusta experimentar, salir de lo habitual.

El nuevo theme, mes esta costando trabajo diseñarlo, pero como lo prometí sera muy simple, mientras trato de estilizar mi tema, me dispuse a buscar diseños para los comentarios, y vi unos que realmente me impresionaron, y aunque no lo crean esta lista de formularios no esta en smashinmagazine, para muestra ayer cuando quise verlo de nuevo, tuve que leer todos los posts de este blog para descubrir donde estaba y por mas que pude no lo localicé hasta hoy, entonces no dejemos de perder la oportunidad, de mostrarselos.

Les recuerdo que, son diseños de inspiración o sea no son temas completos para descargar o algo así, son puros diseños de comentarios, bueno aquí se los dejo.

Hay un total de 30 diseños claro no puse todos aquí solo algunos que me gustaron, me inspirare en alguno para mi blog, eso tenganlo por seguro.

Mas diseños en | 30 Must See Comment Designs for Web Designers