Foros del Web » Creando para Internet » CSS »

Text-indent sin efecto en <ul>

Estas en el tema de Text-indent sin efecto en <ul> en el foro de CSS en Foros del Web. Buenas a todos: Estoy diseñando una plantilla en XHTML estricto y no sé por qué me está fallando el text-indent que asigno a una de ...
  #1 (permalink)  
Antiguo 19/06/2010, 09:47
 
Fecha de Ingreso: marzo-2008
Mensajes: 207
Antigüedad: 9 años, 9 meses
Puntos: 0
Text-indent sin efecto en <ul>

Buenas a todos:

Estoy diseñando una plantilla en XHTML estricto y no sé por qué me está fallando el text-indent que asigno a una de las listas.

Os dejo el código del HTML y el CSS asignado al mismo:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
  2.  
  3. <html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="es" lang="es" >
  4.  
  5.   <head profile="http://gmpg.org/xfn/11">
  6.  
  7.   ...etc...
  8.    
  9.   </head>
  10.  
  11.   <body>
  12.      
  13.   <div id="contenedor">
  14.     <div id="header">
  15.       <ul id="perfiles">
  16.           <li><a title="titulo" href="#" id="boton-blog">enlace</a></li>
  17.           ...etc...
  18.       </ul>
  19.       ...etc...  
  20.   </body>
  21.  
  22. </html>


Código CSS:
Ver original
  1. /* Botonera de aplicaciones y perfiles */
  2. #perfiles {
  3.   display: block;
  4.   width: 712px;
  5.   height: 50px;
  6.   float: right;
  7.   padding: 0px;
  8.   margin: -22px 200px 0px -28px;
  9.   border: 0px;
  10.   text-align: right;
  11.   list-style-type: none;
  12.   text-indent: -9000px;  
  13. }
  14.  
  15. #perfiles li {
  16.   display: inline;    
  17.   text-indent: -9000px;                                              
  18. }
  19.  
  20. #perfiles li a {
  21.   float: left;
  22.   display: block;
  23.   border: 0px;
  24.   text-decoration: none;
  25.   padding: 0px;
  26.   margin: 0px 0px 0px 1px;
  27.   text-indent: -9000px;
  28.   cursor: pointer;
  29. }
  30.  
  31. #perfiles li #boton-blog {
  32.   width: 75px;
  33.   height: 50px;
  34.   background: #FFFFFF url('../imgs/boton-blog.png') no-repeat top left;
  35. }
  36.  
  37. #perfiles li a:hover {
  38.   background-position: bottom left !important;
  39. }

Si hay algún fallo, no lo encuentro, y no sé por qué no se asigna el text-indent, cuando en otras zonas de la web tengo asignado el mismo text-indent y sí que se asigna sin problemas :S ...

¿Alguien que me ilumine?

Muchas gracias por adelantado.


Un saludo.
  #2 (permalink)  
Antiguo 21/06/2010, 09:46
 
Fecha de Ingreso: marzo-2008
Mensajes: 207
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Text-indent sin efecto en <ul>

Leí por ahí la idea de meter los contenidos del los <li> en un <span style="display: hidden;">, pero no funciona, sólo funciona si pongo display:none; y no quiero poner eso porque no es nada SEO, de hecho creo recordar haber leído por ahí que se te puede penalizar por el uso indebido de esta propiedad...

¿Alguna idea de por qué no me hace caso el CSS? Llevo días pensando que quizás sea porque hay algo que no me deja sacar el texto fuera de los <li>, algo que haga de "muro" en el HTML o el CSS, pero lo he repasado ya bastantes veces y no se me ocurre qué pueda ser :S ...

La única solución que veo es dejar los enlaces así <a></a>, sin ningún contenido entre sus etiquetas, pero no lo veo nada correcto, la verdad....

¿Alquien que me ayude?

Muchas gracias por adelantado -.- ...


Un saludo.
  #3 (permalink)  
Antiguo 21/06/2010, 10:07
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Text-indent sin efecto en <ul>

es que "display: hidden" no es XD, como bien dices "display: none" te funciona por que es lo correcto.
lo mas importante, no explicas que quieres hacer... ocultar el texto?...
no estoy seguro si google o no penaliza por ocultar texto, si es cierto no importa que propiedad uses, si lo ocultas, sin importar el metodo pues ya es una falta supongo.
(quien quiere posicionar la palabra "home" o "servicios" o "contacto" :S ).

ahora... ok usas "text-indent: -9000px;" pero luego alineas el texto a la derecha "text-align: right;" mmm quieres que lo oculte o no?... :S, ya que por mucho identado que pongas luego lo contradices poniendo el texto hacia la derecha.
Código:
#perfiles {
  display: block;
  width: 712px;
  height: 50px;
  float: right;
  padding: 0px;
  margin: -22px 200px 0px -28px;
  border: 0px;
  text-align: right;
  list-style-type: none;
  text-indent: -9000px;  
}
explica que quieres hacer chao
  #4 (permalink)  
Antiguo 21/06/2010, 10:14
 
Fecha de Ingreso: marzo-2008
Mensajes: 207
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Text-indent sin efecto en <ul>

Dios, ya sabía yo que algo se me escapaba... Muchísimas gracias por la ayuda, ya he conseguido ocultar el texto.


Un saludo.

PD: Y sí, tienes razón, es display:none... La mitad de las veces, en vez de poner visibility:hidden, termino poniendo, no sé por que manía, display:hidden, pero igualmente me has resuelto el problema con lo del text-align: right ;) .
  #5 (permalink)  
Antiguo 21/06/2010, 10:41
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Text-indent sin efecto en <ul>

que bueno

Etiquetas: efecto, text-indent
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:25.