Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/12/2011, 09:41
6tel
 
Fecha de Ingreso: noviembre-2007
Mensajes: 9
Antigüedad: 16 años, 5 meses
Puntos: 0
Pregunta DIV semitransparente impide que texto contenido en él pueda ser leído por buscadores

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...

Última edición por 6tel; 10/12/2011 a las 10:00