Menu con imágenes de dos tipos

[aggi8]

Hola a todos, como andan?

Quería debatir que tipo de menu con imágenes es mejor pensando en la optimización del código.

1- voy a poner como ejemplo el menu que encontré en el sitio de Matt Mullenweg (creador de wordpress), donde en el menu mediante un text-indent corre el texto.

Código:

.menu {
	background: transparent url(layout/menu.png) repeat scroll 0 0;
	height: 85px;
	left: 529px;
	margin: 0;
	padding: 0;
	position: relative;
	top: 449px;
	width: 482px;
}

.menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

.menu li,.menu a {
	height: 85px;
	display: block;
	border: 0;
	text-indent: -9999px;
}

#btn_home {
	left: 0;
	width: 110px;
}

2-Mediante la utilización del span, para mandar el span para arriba con un position absolute, que pude ver en varios sitios. Sin ir más lejos creo que es lo que utilizan en el logo de forosdelweb.

Código:

<li class="nav_press"><a href="/briefing_room/" class="nav_item"><span>The Briefing Room</span></a>

Saludos a todos!
Aggi

[aggi8]

Cuál elegirían ustedes? O creen que puede llegar a ser penalizado?

[RBZ]

aggi8 has una página con cada ejemplo, así es más fácil que tengas respuestas no todos los dias hay tiempo para ir revisando el código... así a simple vista no veo el problema.

[aggi8]

Iniciado por RBZ

aggi8 has una página con cada ejemplo, así es más fácil que tengas respuestas no todos los dias hay tiempo para ir revisando el código... así a simple vista no veo el problema.

Van los ejemplos RBZ , Saludos!

Ejemplo 1- Sitio de Matt Mullenweg www. ma .tt - botonera principal

HTML:

Código:

<ul class="menu page_home">
      <li id="btn_home" class="selected"><a href="/"></a></li>
      <li id="btn_about" ><a href="/about/">About</a></li>
      <li id="btn_archives" ><a href="/archives/">Archives</a></li>
      <li id="btn_photos" ><a href="/category/gallery/">Photos</a></li>
      <li id="btn_contact" ><a href="/contact/">Contact</a></li>
</ul>

CSS:

Código:

.menu {
	background: transparent url(layout/menu.png) repeat scroll 0 0;
	height: 85px;
	left: 529px;
	margin: 0;
	padding: 0;
	position: relative;
	top: 449px;
	width: 482px;
}

.menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

.menu li,.menu a {
	height: 85px;
	display: block;
	border: 0;
	text-indent: -9999px;
}

#btn_home {
	left: 0;
	width: 110px;
}

Ejemplo 2- Sitio de Foros del web - logo (si bien no es un menu sirve para explicar el ejemplo numero 2 (con span)

HTML:

Código:

<h1><a href="http://www.forosdelweb.com/" title="Foros del Web"><span class="logo">Foros del web, para los que viven de bits</span></a></h1>

CSS:

Código:

.logo {left: -9999em; position:absolute;}

#header h1 a {display:inline; height:90px; position:absolute; top:0; width:361px; background:transparent url(http://static.forosdelweb.com/fdwtheme/logo-reflejo.png) no-repeat left top; }

En el segundo caso, el span parece estar de más, tal vez el primer caso en ese sentido es mejor. Ustedes utilizarían esto? Es igual a hacerlo directamente con texto? Mi pregunta viene por que visitando los sitios de los grandes y famosos seos, ninguno usa esta técnica, y todos usan texto directamnete. El tema es que a veces en rubros donde la estética del sitio es importante, resulta inevitable agregar algo extra.

Pero, hasta que punto google puede tomar como malintencionado hacer esto? A pesar de que uno tenga buenas intenciones como el crear un buen código accesible para todos?

Saludos!
Aggi

[Daniel Ulczyk]

Iniciado por aggi8

Pero, hasta que punto google puede tomar como malintencionado hacer esto? A pesar de que uno tenga buenas intenciones como el crear un buen código accesible para todos?

Tal vez te resulte interesante, leer acerca de lo que oportunamente se habló en el Debate CSS vs SEO Black Hat puntual

Además, en otro tópico, el tema se tocó en CSS o IMG para accesibilidad y SEO