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 

ul#navmenu-h
{
 display: block;
 background:#3399FF;
 list-style: none;
 margin-left:-1px;
 padding-left:3px;
 height:42px;
 /*position: relative;*/
}
ul#navmenu-h ul
{
 display: none;
 left: 0;
 list-style: none;
 margin: 0;
 position: absolute;
 top: 100%;
 width: 100px;
 margin-left:-40px;
 margin-top:1px;
}
ul#navmenu-h ul ul
{
 left: 100%;
 top: 0;
 z-index: 980;
 margin-top:-1px;
 margin-left:-40px;
}

ul#navmenu-h li
{
 display: inline;
 float: left;
 position: relative;
 z-index: 980;
 margin-top:4px;
}
ul#navmenu-h ul li
{
 display: block;
 width: 100%;
 z-index: 980;
 margin:0px;
 border: 1px solid #FFF;
}
ul#navmenu-h a
{
 color: #fff;
 display: block;
 float: left;
 font: bold 14px/23px Arial, sans-serif;
 height:25px;
 text-align:left;
 padding:6px 6px;
 text-decoration: none;
}
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a
{

 background:#33CCFF;
 color: #FFF;
 z-index: 980;
}
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a
{
 background:#999999;
 float: none;
 z-index: 980;
}
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a
{
 background:#a1c84f;
}
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a
{
 background: #A9D54D;
}
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a
{
 background:#a1c84f;
}
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a
{
 background: #666;
}
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover
{
 background: #333;
}
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul
{
 display: none;
}
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul
{
 display: block;

}

Y con ese CSS ya verán un menú desplegable completamente armado, si bien necesitaran personalizarlo, básicamente necesitaran cambiar, fondos, bordes, margin y padding.

Las primeras 50 líneas son de configuración principal y el resto es para terminar de decorar cada uno de los submenus, este CSS es muy práctico y funciona (Aunque usted no lo crea) en Internet Explorer 6, prácticamente al 100%(creo que lo que se modifica es el padding y ya).

Yo lo uso en la mayoría de mis proyectos y les puedo asegurar que funciona muy bien y no tiene que depender de algún Javascript como era de esperarse.

A continuación les dejo el link al demo para que vean que si funciona, si encuentro el link prometo ponerlo, pero en serio ya tiene como mas de 6 meses que me lo encontré y pues no recuerdo de donde aprendí esto.

Ver Demo

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

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)

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

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

#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%;
}

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

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.

La lista completa en | Web Form Design: Modern Solutions and Creative Ideas

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

La verdad quedo super bien y funciona en varios navegadores, y plataformas la imagen que acompaña este post, es la que hizo con CSS, claro que yo la puse en imagen para que no afectara la visualizacion del post.

Pueden ver la imagen en CSS aqui | Homer CSS

Hace tiempo cuando empece a aprender HTML, arendi muchas “tags”, center, b, i, font, etc, lo mismo tambien aprendi que tienen muchos atributos.Posteriormente segui, experimentando con mas cosa, imagenes, tablas entre otras cosas.

Jugue con Dreamweaver, y ahi fue donde empece a desarrollar un par de sitios web, sin embargo como fui aprendiendo, mas y conoci las capas o divs.

Llegue a pensar que usar para maquetar una web, ¿Tablas o Divs?.

Alguien algun dia dijo, las tablas son para volcar datos y los divs o capas son para pocisionar contenido, y pensemos por un momento WordPress usa divs, no tablas.

Un post de Maestros del web nos dice los siguiente respecto a el uso de las tablas

Las tablas fueron creadas para agregar contenido tabular en una página, no para acomodar elementos gráficos, ni para distribuir el contenido en tu layout. He tenido el infortunio de encontrarme con páginas que para conseguir su diseño final usan hasta 30 tablas anidadas. Recuerda que los navegadores consideran todo lo que está dentro de una tabla como un solo elemento, y no lo muestran hasta que se ha cargado por completo la tabla. Tus visitantes pueden ir a tomarse un café antes de que termine de cargar todo tu contenido.

Y en el mismo post dicen lo siguiente sobre los Divs o capas:

Esta etiqueta tiene un fin muy particular, sirve para identificar bloques de información que pertenecen a un mismo entorno lógico ó jerárquico. Por ejemplo <div id=”menu_principal”> ó <div id=”articulos”>. Desafortunadamente es muy común verlo utilizado para colorear backgrounds, o para escribir encabezados.La regla: Los DIV dividen tu página en sectores con uso ó contenido similar.

Sin duda, creo que no deberia haber paginas maquetadas con tablas, y les confieso yo aqui en este blog uso dos tablas para presentar diseño , no de todo el blog pero si de una pequeñita parte, prometo ir pensando a moverlas a Css y divs, pero como usar CSS, como es mas complejo y tambien por falta de tiempo no lo he hecho.

Bueno fue una reflexion y una ayuda apara los que van empezando y no saben que onda con esto de la maquetacion.

Fuente de la informacion | Definiendo Estandarización

Pero que al parecer en webkit ya se esta implementando.

@font-face se trata de que la fuente pueda ser descargada desde la web aunque el usuario no la tenga instalada la propiedad puede ser usada de la siguiente forma

[source:css]
@font-face {
font-family: “Kimberley”;
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format(“truetype”);
}
h1 { font-family: “Kimberley”, sans-serif }

[/source]

De esta forma descargamos la funente kimberley para que posteriormente la podamos usar en nuestros estilos.

Sin embargo esta especificacion solo la soporta Webkit.

Ojala y con la llegada del HTML 5 y el CSS 3 ya los navegadores soporten esta especificación, mmmm otra vez sufriremos con Iexplorer(me imagino), ya que…

Usen Firefox..

Visto en | Fuentes descargables en Webkit y @font-face