Cuando estamos maquetando una web, muchas veces nos vemos en la necesidad o en la comodidad de aplicar estilos a etiquetas o clases hijas directamente pero a veces esto puede convertirse en un problema. Normalmente cuando se maqueta se suele seleccionar directamente todas las etiquetas hija de un tipo por ejemplo, todos los p que haya dentro de un div con una clase, pero que pasa si tenemos una estructura un tanto compleja y no queremos que todas se comporten de una misma manera, como por ejemplo usando listas y sublistas y queremos que las sublistas tengan un margen que la lista normal no queremos que tenga.

En CSS hay varias formas de seleccionar etiquetas hija, la mas común es la de seleccionar todos los hijos de un tipo, como seria el ejemplo:

.clase ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

Con esto decimos que todos los li contenidos dentro de un ul, tengan un estilo, pero ¿Y si queremos hacer un listado mas complejo, con sublistados? Lo que debemos de hacer es decirle que aunque los li dentro de ul se comporten de una forma concreta, los primeros li queremos que se comporten de otra forma. En el siguiente ejemplo se usa para formar un listado con li y ul donde queremos que los primeros li no tengan margen alguno, pero que el resto de li que haya tengan un margen a la izquierda para simular un sangrado automático:

.sidebarBox ul > li > ul {
    margin-left: 25px;
}

Y el html sería el siguiente:

 
<div class="clase">
<ul>
<li>lista1</li>
<li>
<ul>
<li>lista2</li>
</ul>
</li>
</ul>
</div>
 

Con esto lista1 no tendra sangrado pero lista2 tendra un sangrado de 25px hacia la izquierda. Espero que os sirva de ayuda.

Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el "como centrar texto verticalmente sin valign". Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.

Os dejo un ejemplo de como se utilizaría:

Ejemplo del html:

 
<div id="menu">
<div class="menuOption">Inicio</div>
</div>
 

Ejemplo del css:

#menu {
  height: 50px;
}
 
.menuOption {
  line-height: 50px;
  text-align: center;
}

Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.

En un proyecto importante en el que estoy trabajando tenemos que añadir una serie de nuevas funcionalidades a una aplicación muy grande y eso supone también modificar la web que visitan cientos de miles de personas al día. Al ver que mis compañeros de HTML están más bien peladitos me ofrecí voluntario para hacerla ya que daban libertad dentro de unos limites.

Al apañar la web para las nuevas características me encuentro con que esta hecha con el diseñador de webforms de Visual Studio, y me encuentro con cosas como align="absBottom" en una imagen para centrarla verticalmente.

Como aparte de las modificaciones que debía de hacer y como me sobraba tiempo y me aburría, convertí la web de formato indefinido a XHTML correcto con CSS, tenia que arreglar ese tipo de cosas, así que el alineamiento de la imagen se puede hacer con CSS con el estilo vertical-align que tomaría los siguientes valores

• top
• left
• right
• middle
• bottom

El código seria este:

  <img src="..." align="absBottom">

El nuevo código sería:

  <img src="..." class="middle" title="...."
 alt="...." />

Y la clase CSS seria:

  .middle {
    vertical-align: middle;
    /* Valores: top, left, right, middle, bottom */
  }