RE: [Ovillo] problemas con display:block en menus de listas (ul)
Hola.
¿Has probado a darle un width a los li? Por ejemplo:
div#divMenu ul li{
width:10em;
}
Por cierto, quita el display:inline, no tiene mucho sentido declarar
display:inline y display:block en la línea siguiente ;-)
Espero que te sirva, tampoco me he parado a mirar mucho tu código.
... y tampoco te fíes mucho de todo lo que leas, que hay muchas
tonterías escritas por ahí ;-)
Cesar Perez escribió (Tue, 24 May 2005 12:45:57 +0200):
> Ok gracias, el problema (segun mi punto de vista) no creo que sea
> el tema del rollover el problema es que no puedo determinar la
> altura de linea ni la altura de los enlaces.
>
> De todos modos gracias y un saludo, la verdad es que he visto el
> tutorial por encima y me ha parecido un buena idea.
>
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia,
experiencia y comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
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
RE: [Ovillo] problemas con display:block en menus de listas (ul)
Ok gracias, el problema (segun mi punto de vista) no creo que sea el tema del rollover el problema es que no puedo determinar la altura de linea ni la altura de los enlaces. De todos modos gracias y un saludo, la verdad es que he visto el tutorial por encima y me ha parecido un buena idea. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of martin rodriguez Sent: Tuesday, May 24, 2005 12:41 PM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] problemas con display:block en menus de listas (ul) 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 > > > > > > > Transitional//EN" > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > http://www.w3.org/1999/xhtml";> > > > > content="text/html; > > charset=iso-8859-1" /> > > Documento sin título > > > >
Re: [Ovillo] problemas con display:block en menus de listas (ul)
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 > > > > > > > Transitional//EN" > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > http://www.w3.org/1999/xhtml";> > > > > content="text/html; > > charset=iso-8859-1" /> > > Documento sin título > > > >
Re: [Ovillo] problemas con display:block en menus de listas (ul)
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
>
>
> Transitional//EN"
>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> http://www.w3.org/1999/xhtml";>
>
>
> Documento sin título
>
>
> 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:#00;
>
> 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:#FF;
> 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/
Re: [Ovillo] problemas con display:block en menus de listas (ul)
> > Pd. Adjunto el codigo de la página con los estilos. Las imágenes empleadas > para los enlaces son de 41x31 px Supongo que la lista no soporta adjuntos, o sea que mejor escribe el código en el cuerpo del mensaje. -- Alejandro Lillo www.nordic-design.net ___ 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
[Ovillo] problemas con display:block en menus de listas (ul)
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
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>
Documento sin título
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:#00;
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:#FF;
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:#99;
pad
[Ovillo] problemas con display:block en menus de listas (ul)
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 ___ 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
