Ayuda con css y XHTML

07/07/2005 - 11:30 por Josu Garai | Informe spam
Hola a todos y todas:

Tengo un menu con listas al q doy un estilo con css, viene a ser algo como:
<ul>
<li id='Menuseleccionado'><div>Menu1</div>
<ul id='ul1'>
<li id='SubmenuSeleccionado'>SubMenu1<li>
<li id='SubmenuNoSeleccionado'><a
href='loquesea12.asp'>SubMenu2</a><li>
<li id='SubmenuNoSeleccionado'><a
href='loquesea13.asp'>SubMenu3</a><li>
</ul>
</li>
<li id='MenuNoSeleccionado'>< a href='loquesea2.asp'>Menu2</a></li>
<li id='MenuNoSeleccionado'>< a href='loquesea3.asp'>Menu3</a></li>
</ul>

El menu se genera dinamicamente tomando datos de una base de datos y
dependiendo de en que pagina se encuentre uno, el menu expandido sera
uno u otro, en este caso es Menu1. El texto del menu seleccionado
siempre va dentro de un <div>, ya que este texto tiene que ese texto
tiene que tener bordes y si se lo doy a su <li> los bordes se añadirian
a sus submenus por encontrarse dentro del mismo <li>

me seguis, no?

El caso es que el Menu1 aparece tal que asi:
-
menu1

sospecho que realiza esto por ser div un elemento de bloque, con lo que
en el css a los div que aparezcan dentro de Menuseleccionado le añado
display:inline;. Lo que hace que aparezca en la linea, pero que no tenga
en cuenta el valor de width, limitandose el div unicamente al tamaño del
texto.

A alguien se le ocurre algo?

Sin mas un saludo.
 

Leer las respuestas

#1 Miguel Gonzalez
07/07/2005 - 12:40 | Informe spam
Hola Josu.

De entrada, señalarte que tienes varios elementos con el mismo ID. El
DOM requiere que cada indentificador (ID) sea único en el documento.

Para marcar bloques tipo "inline" tienes el elemento <SPAN>, en vez del
<DIV>.

Ten encuenta que a los elementos "inline" no se les aplica la propiedad
"width". Por tanto, si cambias el "display" del <DIV> a "inline" no
podrás especificarle un ancho.

Para lo que quieres hacer, una especie de título con borde y ancho fijo,
lo mejor sería utilizar un <DIV> con el valor natural de su propiedad
"display": "block".

Lo que no entiendo es que te haga un "salto" entre el marcador del <LI>
y el <DIV> (no debería hacerlo. De hecho, si muestro el código que
envías en el navegador se ve correctamente).

¿Es posible que la generación dinámica te esté alterando el resultado?

Genera la página y examina el código fuente resultante a ver si hay algo
extraño.

Saludos!
Miguel

Josu Garai escribió:
Hola a todos y todas:

Tengo un menu con listas al q doy un estilo con css, viene a ser algo como:
<ul>
<li id='Menuseleccionado'><div>Menu1</div>
<ul id='ul1'>
<li id='SubmenuSeleccionado'>SubMenu1<li>
<li id='SubmenuNoSeleccionado'><a
href='loquesea12.asp'>SubMenu2</a><li>
<li id='SubmenuNoSeleccionado'><a
href='loquesea13.asp'>SubMenu3</a><li>
</ul>
</li>
<li id='MenuNoSeleccionado'>< a href='loquesea2.asp'>Menu2</a></li>
<li id='MenuNoSeleccionado'>< a href='loquesea3.asp'>Menu3</a></li>
</ul>

El menu se genera dinamicamente tomando datos de una base de datos y
dependiendo de en que pagina se encuentre uno, el menu expandido sera
uno u otro, en este caso es Menu1. El texto del menu seleccionado
siempre va dentro de un <div>, ya que este texto tiene que ese texto
tiene que tener bordes y si se lo doy a su <li> los bordes se añadirian
a sus submenus por encontrarse dentro del mismo <li>

me seguis, no?

El caso es que el Menu1 aparece tal que asi:
-
menu1

sospecho que realiza esto por ser div un elemento de bloque, con lo que
en el css a los div que aparezcan dentro de Menuseleccionado le añado
display:inline;. Lo que hace que aparezca en la linea, pero que no tenga
en cuenta el valor de width, limitandose el div unicamente al tamaño del
texto.

A alguien se le ocurre algo?

Sin mas un saludo.

Preguntas similares