compartecodigo.com

La forma correcta de realizar un menú en HTML es utilizar un formato de lista (ya sea UL o OL). Las listas por defecto se mostrarán en vertical, pero podemos hacer que nuestro menú tenga una semántica correcta y tener un menú horizontal.

Empezaremos con el menú más simple:
Código HTML para el menú:

<ul id="menu_uno">
	<li><a href="###">Empresa</a></li>
	<li><a href="###">Tiendas</a></li>
	<li><a href="###">Productos</a></li>
	<li><a href="###">Proyectos</a></li>
	<li><a href="###">Servicios</a></li>
	<li><a href="###">Contacto</a></li>
</ul>

Read the rest of this entry »

Imprimir la dirección de un link con CSS es una práctica muy recomendable. Si cuando nos imprimimos un artículo (ya sea en papel o en PDF) no podemos saber a dónde apunta cada enlace estamos perdiendo información que puede resultar importante.

Para conseguir que la URL de destino aparezca al lado del texto enlazado cuando realicemos una impresión tenemos que asignar primero un CSS para impresión de la siguiente manera:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

En nuestro print.css solamente tendremos que asignar a los enlaces la siguiente propiedad de CSS2 (teniendo en cuenta que esta propiedad Read the rest of this entry »

A la hora de maquetar con HTML y CSS siempre nos encontramos algunas diferencias entre navegadores (idealmente, ninguna…) y por eso necesitaremos alguna “sintaxi” para poder especificar que esa propiedad sólo debe afectar a un navegador (o versión de navegador en el caso de Internet Explorer). Ya vimos cómo hacer comentarios condicionales para Internet Explorer (que suelen ser los más comunes), pero a veces necesitamos hacer lo mismo con Opera o Safari. Para estos casos, el código es el siguiente:

Sintaxis de hacks para Opera y Safari

1
2
3
4

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
- Contenido -
}

Read the rest of this entry »

Para centrar un div horizontalmente a cualquier resolución de pantalla, sólamente le tenemos que asignar dos valores (como mínimo):

• Margin: tendrá que ser “auto” para los valores right y left
• Width: para centrar un div siempre necesitamos darle un ancho

1
2
3
4

div#container {
margin: 0 auto; /* Que es lo mismo que margin: 0px auto 0px auto; */
width: 700px;
}

La compatibilidad CSS de los navegadores es algo que conlleva problemas a diseñadores y programadores. Existen varias maneras para diferenciar el CSS que queremos asignar solamente a Internet Explorer en sus diferentes versiones.
Read the rest of this entry »