Sistema de navegación por franjas con CSS

0 COMENTARIOS -  Publicado hace 31 meses -  Clasificado en: , , ,

En el artículo "A Stripe of List Style Inspiration" muestran como, únicamente con CSS, se pueden realizar estructuras de navegación complejas a partir de listas. En su caso han realizado un sistema de navegación horizontal, con franjas que se expanden para mostrar el contenido de las mismas. Un sistema de navegación muy útil para enlazar a distintas secciones y crear explicaciones sobre lo que se va a encontrar el usuario dentro de cada una de las secciones.

El ejemplo que muestro a continuación está basado en el anteriormente citado artículo, pero creo que es interesante porque se implementa la utilización de imágenes dentro de las franjas -cosa que creo muy útil para un sistema de navegación de este tipo-. También muestra de una forma más clara el código empleado, así como la posibilidad de descargar un fichero con el mismo. CSS 

ul.franjas {
	width:485px;
	height:200px;
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
}

ul.franjas li {
	display:inline; 
	margin:0; 
	padding:0;
}

ul.franjas li a {
	display:block; 
	height:200px; 
	width:30px; 
	border-right:1px solid #f6f6f6; 
	text-align:justify;
	float:left; 
	outline:none; 
	text-decoration:none;
}

ul.franjas li a b {
	display:block; 
	font-size:11px;
	text-transform:uppercase;
	margin-bottom:10px;
}

a.s1 {background-color:#a0a0a0; color:#FFF;}
a.s2 {background-color:#868645; color:#FFF;}
a.s3 {background-color:#ddbd58; color:#FFF;}
a.s4 {background-color:#dd904e; color:#FFF;}
a.s5 {background-color:#dd6e45; color:#FFF;}


ul.franjas li a span {
	display:none; 
	padding:20px; 
	text-align:justify;}

ul.franjas li a:hover {
	width:350px;}

ul.franjas li a:hover span {
	display:block;}

ul.franjas img {
	float: left; 
	margin-right:15px;
	margin-bottom:60px;
	border:6px solid F2F2F2;
}

HTML 

<ul class="franjas">
     <li>
         <a href="#" class="s1"><span>
         <img src="http://www.webintenta.com/franjas1.jpg">
         <b>Enlace 1</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
         </span></a></li>
    <li>
         <a href="#" class="s2"><span>
         <img src="http://www.webintenta.com/franjas2.jpg">
         <b>Enlace 2</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
         </span></a></li>
    <li>
         <a href="#" class="s3"><span>
         <img src="http://www.webintenta.com/franjas3.jpg">
         <b>Enlace 3</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
         </span></a></li>
    <li>
         <a href="#" class="s4"><span>
         <img src="http://www.webintenta.com/franjas4.jpg">
         <b>Enlace 4</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
         </span></a></li>
    <li>
         <a href="#" class="s5"><span>
         <img src="http://www.webintenta.com/franjas5.jpg">
         <b>Enlace 5</b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras leo magna, congue a, suscipit et, dictum vitae, nulla. Vestibulum cursus metus sed neque. Phasellus ornare erat. Nam at dui. Ut tortor libero, bibendum quis, varius vel, aliquam id, velit. Curabitur imperdiet quam eu dui. Quisque vel nulla sit amet mi varius malesuada.
         </span></a></li>
</ul>

Resultado

Creo que, para aquellos que tengan algo de experiencia trabajando con CSS, la personalización del sistema de navegación es bastante evidente. Podeis descargar también un fichero con el ejemplo en un fichero .html.

Descargar archivo » »

Algunas entradas relacionadas:

 

CSS inicial de Eric Meyer

0 COMENTARIOS -  Publicado hace 34 meses -  Clasificado en: ,

Por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Estos estilos, generalmente son los ocasionantes de algunos de los problemas más comunes a la hora de verse bien en todos los navegadores. Una opción es resetear los estilos. Eric Meyer nos aporta su hoja de estilos inicial así como algunas razones que le han llevado a utilizarla.

La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. [...] Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding… [...] Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto.
Seguir leyendo »»

La hoja es: 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Vía Eric Meyer » »

Algunas entradas relacionadas:

 

Añadir notas en imágenes con CSS

0 COMENTARIOS -  Publicado hace 35 meses -  Clasificado en: , , ,

Cualquiera que haya utilizado Flickr alguna vez debe conocer la opción para agregar notas dentro de una imagen (Add Note), esta opción muchas veces es ideal para señalar o comentar dentro de la foto. Con un poco de CSS se puede lograr algo similar, funcional en Internet Explorer, Firefox y Opera.
Seguir leyendo »»

Notas CSS

Algunas entradas relacionadas:

 

8 menús web que no te puedes perder

0 COMENTARIOS -  Publicado hace 36 meses -  Clasificado en: , , ,

La realización del menú es una de las partes fundamentales en la concepción general de un sitio web. En esta página podemos encontrar 8 menús en CSS muy bien elaborados y de los que nos podemos descargar el fuente. Un recurso a descargar.

8menus

8 web menus you just can't miss » »

Algunas entradas relacionadas:

 

freecsstemplates.org: plantillas css gratuitas

0 COMENTARIOS -  Publicado hace 37 meses -  Clasificado en: , ,

Creía que ya había mencionado este sitio pero parece ser que no. Freecsstemplates.org ofrece multitud de plantillas web gratuitas y realizadas con CSS y XHTML. Un recurso a tener en cuenta.

Freecsstemplates

Otras entradas sobre plantillas CSS en este blog:

Algunas entradas relacionadas:

 

Añadir un icono a los enlaces con CSS

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , ,

Con esta técnica CSS podemos identificar cada link con su correspondiente icono, dando información sobre lo que se puede encontrar el internauta al otro lado del enlace. La técnica está testada con Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & Internet Explorer 7 (6 no funciona.)

Links

Algunas entradas relacionadas:

 

Forzar el salto de página con CSS

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: ,

Este ejemplo muestra como añadir un salto de página, que será utilizado a la hora de imprimir nuestra página web.

Ver ejemplo » » CSS 

.saltopagina {
      page-break-after: always;
}
HTML 
<h1>Primera Pagina</h1><br /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><br /><br class="saltopagina" /><br /><h1>Segunda pagina</h1><br /><p>Texto segunda pagina...</p><br /><br class="saltopagina" /><br /><h1>Tercera pagina</h1><br /><p>Texto tercera pagina...</p>

Algunas entradas relacionadas:

 
Páginas: < Anterior 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Siguiente >