Se me olvidaba comentar que de esta forma no es
necesario crear un gif por cada imagen de menú. De
esta manera se ahorra tiempo en la carga de imágenes
ya que estan todas en un mismo gif.  :)


Lucía.


 --- martin rodriguez <[EMAIL PROTECTED]>
escribió:

> Hola,
> En Caotico Neutral
>
(http://simplelogica.net/caoticoneutral/index.php?p=26)
> hay un tutorial bastante bueno donde explica como
> hacer  enlaces con imagen, está cambia según su
> estado. No se si puede resolver tu problema ya que
> no
> habla del problema en ie, pero igual nos puede dar
> una
> idea.
> 
> saludos,
> Lucía.
> 
> 
> 
>  --- Cesar Perez <[EMAIL PROTECTED]> escribió:
> 
> > Hola, tengo que hacer la cabecera de una
> aplicación,
> > esta contiene 2 partes fundamentales, el logo, y
> el
> > menú principal. Me he puesto a hacerla a traves de
> > una lista desordenada ya que tiene elementos
> > anidados, digamos que el menú principal, debe
> estar
> > en posición horizontal, mientras que en posición
> > vertical deberan estar los elementos que cuelguen
> de
> > estos elementos principales, aparentemente, todo
> > funciona bien salvo un pequeño detalle, los
> > elementos principales tienen una imagen
> relacionada,
> > esta la he puesto como background, que sucede,
> pues
> > que estos (son simples enlaces) no me hacen caso
> en
> > cuanto a altura del elemento y altura de linea,
> por
> > lo tanto la imagen se ve cortada, para solucionar
> > este problema les indico que su display sea block.
> > 
> > Una vez hecho esto firefox lo visualiza todo
> > correctamente, pero Explorer pone un elemento
> encima
> > de otro, así pues no me sirve la solución,
> > 
> > He provado muchas cosas y al final no ha habido
> > manera de solucionarlo, si alguien tiene alguna
> > propuesta estare tremendamente agradecido.
> > 
> > Gracias y un saludo
> > 
> > Pd. Adjunto el codigo de la página con los
> estilos.
> > Las imágenes empleadas para los enlaces son de
> > 41x31  px
> > 
> > 
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
> > Transitional//EN"
> >
>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> > <head>
> >     <meta http-equiv="Content-Type"
> content="text/html;
> > charset=iso-8859-1" />
> >     <title>Documento sin t&iacute;tulo</title>
> >     
> >     <style type="text/css">
> >             body
> >             {
> >                     font-family:arial,helvetica,sans-serif;
> >                     background-image:url(images/page_back.gif);
> >                     background-repeat:repeat;
> >                     font-size:small;
> >                     margin-top:20px;
> >                     margin-bottom:20px;
> >                     text-align:left;
> >                     color:#000000;
> >                     
> >                     padding:0px 0px 0px 0px;
> >                     margin:0px 0px 0px 0px;
> >             }
> >             
> >             div#divHeader
> >             {
> >             
> > background-image:url(images/backgroundHeader.gif);
> >                     background-repeat:no-repeat;
> >                     background-position:left top; 
> >                     height:74px;
> >                     width:774px;
> >                     
> >                     margin:0px;
> >                     padding:0px;
> >             }
> >     
> >             div#divHeader div#divHeaderLogo
> >             {
> >                     float:left;
> >                     width:129px;
> >                     height:70px;
> >             }
> >                             
> >             div#divHeader div#divMenu
> >             {
> >                     float:left;
> >                     margin:0px;
> >                     padding:0px;
> >             }
> >             
> >             div#divHeader div#divMenu ul
> >             {
> >                     padding:0px;
> >                     margin:0px;
> >                     list-style: none;
> >             }
> >             
> >             div#divHeader div#divMenu ul li{
> >                     display:inline;
> >                     display:block;
> >                     float:left;
> >                     
> >             }
> >             
> >             div#divHeader div#divMenu ul li div
> >             {
> >                     /*display:block; */
> >             }
> >             
> >             li>ul { 
> >                     top: auto;
> >                     left: auto;
> >             }
> >             
> >             div#divHeader div#divMenu ul li a{
> >                     font-family:Arial, Helvetica, sans-serif;
> >                     color:#FFFFFF;
> >                     font-weight:bold;
> >                     font-size:12px;
> >                     text-decoration:none;
> >                     background-repeat:no-repeat;
> >                     background-position:left top;
> >                     
> >                     display:block; /* DISPLAY DE LA DISCORDÍA
> > COMENTAR Y DESCOMENTAR PARA VER EL PROBLEMA */
> >                             
> >                     overflow:visible;
> >                     height:31px;
> >                     line-height:31px;
> >                     padding-left:41px;
> >                     vertical-align:top;
> >             }
> >             
> >             div#divMenu ul li
> >
>
a#item1{background-image:url(images/top_item1Off.gif);
> > }
> >             div#divMenu ul li
> >
>
a#item2{background-image:url(images/top_item2Off.gif);
> > }
> >             div#divMenu ul li
> >
>
a#item3{background-image:url(images/top_item3OFF.gif);
> > }
> >             div#divMenu ul li
> >
>
a#item4{background-image:url(images/top_item4Off.gif);
> > }
> >             div#divMenu ul li
> >
>
a#item5{background-image:url(images/top_item5Off.gif);
> > }
> >             
> >             div#divMenu ul li#copyright{
> >                     font-size:8px; 
> >                     font-weight:normal; 
> >                     color:#CCCC99;
> >                     
> >                     padding-left:5px;
> >                     padding-right:5px;
> >             }
> >             
> >             div#divHeader div#divMenu ul li ul{
> >                     position:relative;
> >                     list-style-type:none;
> >                     padding-left:15px;
> >                     list-style-type:circle;
> >             }
> >             
> >             div#divHeader div#divMenu ul li ul li{
> >                     display:block;
> >                     float:none;
> >                     list-style-type:disc;
> >             }
> >             
> >             div#divHeader div#divMenu ul li ul li a{
> >                     color:#666666;
> 
=== message truncated ===



                
______________________________________________ 
Renovamos el Correo Yahoo! 
Nuevos servicios, más seguridad 
http://correo.yahoo.es
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a