como insertar logo? duda de principiante

[moixcruz]

Una dudilla, espero que facililla para los que manejais CSS, yo me estoy iniciando.

A la hora de introducir un logo en mi pagina he visto que hay varias opciones, utilizar text-indent con un tamaño muy pequeño, display:none, ... ¿cual de ellas es mejor? ¿por q, existe alguna diferencia?

Bueno, supongamos que me decido por una, por ejemplo estoy intentandolo hacer con display:none, os pongo un ejemplo que se entiende mejor:

Código HTML:

<h1 class="logo">logo</h1> 

y en el CSS:

Código HTML:

.logo{display:none;background: url("...");}

¿q es lo que esta mal? lo he repasado mil veces y no encuentro el fallo, cuando visualizo la pagina en el navegador el texto sigue apareciendo (igual con text-indent). La cosa es que muchas paginas que visito consulto el código y lo tienen hecho asi, ... no lo entiendo.
Gracias de antemano, un saludo

[Daniel Ulczyk]

Te dejo un enlace sobre un artículo de CSS Tricks:
Nine Techniques for CSS Image Replacement


Espero te sea útil. Saludos.

[safe]

Si haces eso que pones obviamente no vas a ver nada por el hecho que estas diciendo que el elemento no se muestre (display = none).
Si solo queres usar un elemento html (que es lo que yo te recomiendo) lo mejor es usar text-indent:-9999px; asi el texto "desaparece" (adicionalmente deberias definir el tamaño con height y width).

<h1 class="logo">logo</h1>
.logo{background: url("..."); height:33px;text-indent:-9999px; width:33px;}

[Mikmoro]

¿Pero dice en alguna parte que quiere que el logo desaparezca?. Me parece que no he entendido bien la consulta.

Mikel.

[Eleazan]

Iniciado por safe

Si haces eso que pones obviamente no vas a ver nada por el hecho que estas diciendo que el elemento no se muestre (display = none).
Si solo queres usar un elemento html (que es lo que yo te recomiendo) lo mejor es usar text-indent:-9999px; asi el texto "desaparece" (adicionalmente deberias definir el tamaño con height y width).

<h1 class="logo">logo</h1>
.logo{background: url("..."); height:33px;text-indent:-9999px; width:33px;}

y no sería más fácil simplemente poner "&nbsp;" ?

Yo, como css, pondria

.logo {
background-image: url(...); /*SIN COMILLAS :)*/
background-repeat: no-repeat; }

[moixcruz]

gracias por contestar

perdon Mikmoro, creo que no se entendio bien la pregunta. Yo no quiero que desaparezca el logo (si el objetivo es ponerlo), lo que quiero es que desaparezca el texto y solo se vea el logo.

safe, precisamente me pasa al contrario, se que deberia de desaparecer pero es que me sigue saliendo todo, la imagen background (logo) y el texto encima, no se por que no funciona el display:none. Con text-indent me ocurre lo mismo. Por cierto si que pongo el tamaño de la imagen, no lo puse por no aburrir

Eleazan, ese es el css que pongo mas lo comentado del tamaño y demas. Probablemente poniendo nbsp se arreglaria sin problemas, la verdad ni lo pense, pero no me gusta mucho la solucion ya que si alguien entra en la pagina y por cualquier causa tiene desactivado css (conexion lenta, navegador antiguo o algun tipo de discapacidad, por ejemplo que sea ciego y utilice un lector de pantalla), vera en lugar del logo un espacio en blanco, y me gustaria al menos que fuera un encabezado en html puro (por eso puse h1), en plan "alt" de las imagenes

[Mikmoro]

Iniciado por moixcruz

gracias por contestar

perdon Mikmoro, creo que no se entendio bien la pregunta. Yo no quiero que desaparezca el logo (si el objetivo es ponerlo), lo que quiero es que desaparezca el texto y solo se vea el logo.

No, si eso es precisamente lo que digo, que al poner el display none la gente entendió que querías esconder tu logo, pero yo no lo ví por ningún lado.

Lo que tampoco se puede deducir de tu pregunta es que quisieras hacer desaparecer ningún texto. Concretamente preguntas: "A la hora de introducir un logo en mi pagina..." ¿Cómo vamos a imaginar que tienes un texto, que quieres que este desaparezca y que sea sustitudo por un logo? Aunque sin haberlo mencionado, dices "el texto se sigue viendo". Yo al menos no lo he entendido.

En fin, si pones concretamente el código o las imágenes de lo que quieres hacer seguramente alguien te podrá indicar mejor.

Mikel.