DIV semitransparente impide que texto contenido en él pueda ser leído por buscadores

6tel · #1 (**permalink**) 10/12/2011, 09:41

Estoy diseñando un sitio en CSS que tiene un texto principal encerrado en un DIV con fondo semitransparente. El enlace para ver esto:

http://www.pastaeldorado.com/pastaeldorado.html

El problema es que el CSS no está permitiendo que el texto pueda seleccionarse. Es como si el DIV semitransparente estuviese por encima del texto. Y esto no permitiría que los buscadores puedan leer mi sitio. Necesito que el texto esté por encima de esa DIV semitransparente.

En el HTML del DIV tengo la siguiente línea de código:

Código HTML:

<div id="container450">
<div class="transbox">
  <h2 class="letra_titulo">¿Qué es Pasta El Dorado?</h2>
  <p class="letra_contenido">Pasta El Dorado es la primera pasta alimenticia 100% a base de harina de maíz producida en Colombia.</p>
  <p class="letra_contenido">Es un producto dietético innovador que, por no tener gluten ofrece numerosos beneficios.</p>
</div>
</div>

En el CSS que complementa mi retícula HTML tengo:

Código:

div.transbox
  {
  width:450px;
  height:550px;
  margin:0px;
  padding:0px;
  background-color:#FFF;
  border:0px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position:relative;
  float:left;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  z-index:-2;
}
#container450 {
	width:450px;
	height:550px;
	margin:0px;
	padding:0px;
	position:relative;
	float:left;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 6px 6px 15px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    6px 6px 15px rgba(50, 50, 50, 0.25);
	box-shadow:         6px 6px 15px rgba(50, 50, 50, 0.25);
}
.letra_titulo {
	font-family: 'NillandBold', Arial, sans-serif;
	font-size:24px;
	color:#F58426;
	text-shadow:3px 3px 2px #E1E1E1;
	text-align:right;
	margin:12px 30px 30px 30px;
	z-index:4;
}
.letra_contenido {
	font-family: 'NillandBold', Arial, sans-serif;
	color:#000;
	text-align:justify;
	margin:12px 30px 0px 30px;
	z-index:4;
}

¿Cómo hago para permitir que el texto pueda seleccionarse y, además, puedan leerlo los buscadores? Necesito que este sitio sea SEO friendly y una de las cosas a corregir es esta situación...

emprear · #2 (**permalink**) 10/12/2011, 11:10

No veo que eso te tenga que afectar.
En primer lugar lo de la "no selección del texto" es un comportamiento de ciertos navegadores" (Chrome, Firefox), no de todos, y eso se aplica al uso del "mouse" solamente, si usases el el menu "Editar/Seleccionear todo" en Firefox (o su equivalente en el resto de los navegadores) verias como se seleccionan los diferentes elementos a los que opacity afecta. tal es así que los comandos copiar/pegar son completamente funcionales, y dudo mucho que Google utilice "el mouse" para seleccionar nada..
Saludos

6tel · #3 (**permalink**) 10/12/2011, 20:52

Hola Emprear. Muchas gracias por responder.

Bueno, aparte de lo del SEO, el problema más significativo para mí es que si tengo ese DIV por encima, con ese detalle que mencionaba de la semitransparencia por encima impidiendo la selección de texto, pensaba que se me haría imposible usar ese mismo espacio del DIV en otros HTML para colocar un formulario de contactos que pudiese ser llenado por algún visitante (el URL que coloqué para este ejemplo remite a un HTML sobre el que pienso crear una plantilla para el resto de los HTML del sitio, y uno de esos HTML llevaría el formulario de contacto del site)...

Lo otro es que en verdad no entiendo mucho lo que me dices. Obviamente me afecta porque no puedo seleccionar con el mouse ese texto. No puedo seleccionar ni copiar nada (al menos y nuevamente con el mouse, y creo que el ratón sería la principal herramienta para navegar que usará la mayoría de los visitantes de mi sitio. No tanto el otro método que sugieres, aunque es perfectamente válido...) No sé si con esto te estás refiriendo indirectamente a que esta situación no afecta el SEO...

Igual, te cuento que ya logré hacer que el texto pueda seleccionarse. No soy nada experta en CSS, pero al final tras mucho sufrir logro amañármelas. El problema estaba en la propiedad "Z-Index:-2" dentro del selector "div.transbox"... Eliminando eso me funciona a la perfección.

Mil gracias de igual manera.

emprear · #4 (**permalink**) 10/12/2011, 23:11

En realidad, dado la forma en que planteaste el tema originalmente, yo me orienté hacia tu problema en cuanto al SEO y si los motores de búsqueda podían acceder al texto de tu web para analizarlo. Lo otro, que por lo visto pudiste solucionar, es una cuestión de usabilidad y accebilidad por parte del cliente, y por supuesto mucho más apropiado si se puede usar el mouse, cosa que está fuera de toda discusión.

Saludos