Siguiendo las recomendaciones de los expertos listeros he modificado el
código y ya he resuelto el problema y ya se ve correctamente en firefox.
El código que utilizo es el siguiente:
<h3>Menú</h3>
<ul>
<li>Opcion1</li>
<li>Opcion2</li>
<li>Opcion3</li>
</ul>
El CSS:
#menu {
position:absolute;
top:180px;
left:35px;
width:180px;
color:#000;
background: #D6E4d6 url(images/menu_fin.gif) bottom center no-repeat;
padding:0 0 22px 0;
}
#menu h3 {
margin:0; padding:0; border:0;
text-indent:-99999px;
color:#309;
background: #D6E4D6 url(images/menu.gif) top center no-repeat;
width:180px;
height:33px;
}
Muchas gracias a todos por vuestra ayuda,
Nacho
> Hola:
> Nacho creo que se te han dado muy buenas opciones aquí en la lista de
> hecho Abel me ha enseñado algo que tenía en mente pero no sabía como
> usarlo. En la solución que propones aún mantienes el mismo error que me
> autocritique y por ende otros de la lista también me criticaron. Chequea
> eso ;)
>
> Salu2
> --
> ReynierPM | Linux User:#310201 Hay dos cosas infinitas: el Universo y la
> estupidez humana. Y del Universo no estoy seguro.
>
>
>> -----Mensaje original-----
>> De: [EMAIL PROTECTED] [mailto:ovillo-
>> [EMAIL PROTECTED] En nombre de [EMAIL PROTECTED]
>> Enviado el: Thursday, July 13, 2006 11:14 AM
>> Para: Ovillo, la lista de CSS en castellano
>> Asunto: Re: [Ovillo] Modificar el texto del <ul>
>>
>> Ya lo he logrado en parte, no me había dado cuenta que no había puesto
>> px
>> en el text-indent. Al poner text-indent:-99999px; se me salió de la
>> pantalla todo el menú incluidos los <li>. Lo arreglé poniéndo en los
>> <li>
>> text-align:0px;
>>
>> Ahora me encuentro con otro problema y es que en IE se ve bien la imágen
>> y
>> los colores de fondo el problema es que en firefox no se ve ni las
>> imágenes, ni el color de fondo. Sólo se ven los <li> "a pelo".
>>
>> Este es el código XHTML:
>>
>> <div id="menu">
>> <ul>Menú
>> <li>Empresa</li>
>> <li>Soluciones</li>
>> <li>Servicios</li>
>> <li>Productos</li>
>> <li>Información Útil</li>
>> <li>Contacta</li>
>> </ul>
>> </div>
>>
>> y el código CSS:
>>
>> #menu {
>> position:absolute;
>> top:180px;
>> left:35px;
>> width:180px;
>> color:#000;
>> background: #D6E$d6 url(images/menu_fin.gif) bottom center no-
>> repeat;
>> padding:0 0 22px 0;
>> }
>>
>> #menu ul {
>> margin:0; padding:0; border:0;
>> text-indent:-99999px;
>> color:#309;
>> background: #D6E4D6 url(images/menu.gif) top top no-repeat;
>> width:180px;
>> height:33x;
>> list-style:none;
>> }
>>
>> #menu li {
>> text-indent:0px;
>> }
>>
>> Un saludo,
>>
>> Nacho
>>
>>
>>
>>
>> > Y esto, ¿que pensais?
>> >
>> > <dl class="navegacion">
>> > <dt>Menu</dt>
>> > <dd>
>> > <ul>
>> > <li>Item 1</li>
>> > <li>Item 2</li>
>> > <li>Item 3</li>
>> > <li>Item N</li>
>> > </ul>
>> > </dd>
>> > </dl>
>> >
>> >
>> > Hugo A. Valencia wrote:
>> >> Podrías hacer algo así :
>> >>
>> >> <div id="menu">
>> >> <h3>Menú</h3>
>> >> <ul>
>> >> <li>Opción 1</li>
>> >> <li>Opción 2</li>
>> >> <li>Opción 3</li>
>> >> <li>Opción 4</li>
>> >> </ul>
>> >> </div>
>> >>
>> >> Lo de *h3* es optativo y depende de el resto de las etiquetas
>> >> que tengas, podés ponerles etiquetas desde *h1* a *h6*.
>> >> Esto te facilitará darle estilos a la palabra *Menú*
>> >> en forma independiente de los
>> >> ítems del mismo. sin poner una imágen de fondo.
>> >> Si, de todas maneras quieres ponerle una imágen
>> >> de fondo y posicionarla, también será más fácil.
>> >> El problema que tenías es que le estabas dando estilos
>> >> a la lista entera, por eso no funcionaba.
>> >>
>> >> El 13/07/06, Nacho F. Carreño<[EMAIL PROTECTED]> escribió:
>> >>
>> >>> Hola a [EMAIL PROTECTED],
>> >>>
>> >>> Estoy creando un menú con listas y me encuentro con un problemilla.
>> El
>> >>> código que tengo es el siguiente:
>> >>>
>> >>> <div id="menu">
>> >>> <ul>Menú
>> >>> <li>Opción 1</li>
>> >>> <li>Opción 2</li>
>> >>> <li>Opción 3</li>
>> >>> <li>Opción 4</li>
>> >>> </ul>
>> >>> </div>
>> >>>
>> >>> Lo que quiero es poder dar formato a la palabra menú con CSS pero
>> soy
>> >>> incapaz. La idea que tengo es sustituir el texto por una imágen.
>> Para
>> >>> ellos había pensado en poner un text-indent:-99999 y poner la imagen
>> de
>> >>> la que hablo como fondo (dandolo su correspondiente tamaño con el
>> Width
>> >>> y Height)
>> >>>
>> >>> Estoy haciendo una cosa así pero no me funciona:
>> >>>
>> >>> #menu ul {
>> >>> text-indent:-99999;
>> >>> color:#000;
>> >>> background: #FFF url(images/menu.gif);
>> >>> height:75px;
>> >>> Width:180px;
>> >>>
>> >>> Un saludo,
>> >>>
>> >>> Nacho
>> >>> _______________________________________________
>> >>> Lista de distribución Ovillo
>> >>> Para escribir a la lista, envia un correo a [email protected]
>> >>> Puedes modificar tus datos o desuscribirte en la siguiente
>> dirección:
>> >>> http://ovillo.org/mailman/listinfo/ovillo
>> >>>
>> >>>
>> >>
>> >>
>> >>
>> >
>> > _______________________________________________
>> > Lista de distribución Ovillo
>> > Para escribir a la lista, envia un correo a [email protected]
>> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> > http://ovillo.org/mailman/listinfo/ovillo
>> >
>>
>>
>> _______________________________________________
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a [email protected]
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://ovillo.org/mailman/listinfo/ovillo
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
