Ayuda con css y XHTML

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.

Miguel Gonzalez(e)k dio:

Hola Josu.

Hola Miguel:

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

Ya lo se, el codigo que habia mandado estaba escrito al vuelo, pero
gracias por la apreciacion

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).

Yo tampoco lo entiendo, de todas formas, posteo el codigo html que se
genera a ver si veis algo que a mi se me este pasando:

<ul class="ul1">
<li class="nothispage1"><a
href="index.asp?id&amp;lang=es">COLEGIO</a></li>
<li class="nothispage1"><a
href="index.asp?id&amp;lang=es">SERVICIOS</a></li>
<li class="thispage1"><div class="hautatua1">PROCEDIMIENTOS
ADMINISTRATIVOS</div>
<ul class="ul2">
<li class="thispage2">REQUISITOS PARA EL ALTA / BAJA COLEGIAL</li>
<li class="nothispage2"><a
href="index.asp?id7&amp;lang=es">CERTIFICACIONES</a></li>
<li class="nothispage2"><a
href="index.asp?id8&amp;lang=es">MODIFICACION DE LOS DATOS
PERSONALES</a></li>
<li class="nothispage2"><a
href="index.asp?id9&amp;lang=es">EXENCIÓN DE CUOTA COLEGIAL</a></li>
<li class="nothispage2"><a
href="index.asp?id0&amp;lang=es">TALONARIO DE ESTUPEFACIENTES</a></li>
<li class="nothispage2"><a href="index.asp?id1&amp;lang=es">GUIA
PARA ABRIR UNA CONSULTA MEDICA</a></li>
<li class="nothispage2"><a
href="index.asp?id2&amp;lang=es">FUNDACIÓN PATRONATO DE HUÉRFANOS
PRÍNCIPE DE ASTURIAS</a></li>
</ul>
</li>
<li class="nothispage1"><a
href="index.asp?id1&amp;lang=es">FORMACIÓN</a></li>
<li class="nothispage1"><a
href="index.asp?id7&amp;lang=es">PUBLICACIONES</a></li>
</ul>


y en el css:

.ul1 {
font-size: 8pt;
width: 218px;
vertical-align: middle;
list-style-position: inside;
border-right: 3px solid rgb(230,242,232) ;
border-bottom: 3px solid rgb(230,242,232) ;
}

.ul2 {
list-style-type: none !important;
list-style: none;
font-size: 8pt;
width: 163px;
vertical-align: middle;
list-style-position: inside;
background-color: rgb(247,251,248);
border-left: solid 1px rgb(239,178,68);
margin-left: 20px;
border:none;
}

.hautatua1{
padding-top: 0px;
margin-left:15px;
font-weight: bold;
border-bottom: solid 2px rgb(239,178,68);
border-top: solid 1px rgb(230,242,232);
background: rgb(230,242,232);
min-height: 16px;
width: 189px !important;
display:block;
}


.nothispage1 {
vertical-align: middle;
list-style-image: url(/Irudiak/bull_hautatua_ez1.png);
font-weight: bold;
color: rgb(0,98,170);
font-size: 8pt;
margin-top: 4px;
padding-top: 0 !important;
padding-left: 22px !important;
border-right:3px solid rgb(230,242,232) ;
width: 198px;
background: rgb(230,242,232);

}
.nothispage1 a{
color: rgb(0,98,170);
padding: 0px !important;
margin-top: 0 !important;
vertical-align: center;
}
.thispage2 {
vertical-align: middle;
font-weight: bold;
font-size: 8pt;
padding: 0;
color: rgb(0,98,170);
margin-bottom: 2px;
margin-top: 3px;
width: 147px;
min-height: 19px;
list-style-type: none;
}
.hautatua2{
position: relative;
background: transparent url(/irudiak/hautatua2.png) repeat-y;
margin-left:0;
background-position: left;
border-bottom:1px solid rgb(214,235,216);
border-right:1px solid rgb(214,235,216);
border-top:1px solid rgb(214,235,216);
padding-left: 22px;
min-height: 19px;
width: 147px !important;
vertical-align: middle;
list-style-type: none;
}

.nothispage2 a {
color: rgb(153,153,153);
vertical-align: middle;
}


.nothispage2 {
vertical-align: middle;
font-weight: bold;
font-size: 8pt;
color: rgb(153,153,153);
background: transparent url(/irudiak/hautatua_ez2.png) repeat-y;
background-position: left;
border-bottom:1px solid rgb(214,235,216);
border-right:1px solid rgb(214,235,216);
border-top:1px solid rgb(214,235,216);
min-height: 19px;
padding-left: 22px;
margin-bottom: 2px;
margin-top: 5px;
width: 147px;
list-style-type: none;
}

-

Saludos y gracias

Hola Josu.

El problema tiene que ver con la propiedad "list-style-position" al
establecer su valor como "inside". Al comenzar el contenido del <li> con
un <div> los navegadores no acaban de dibujarlo correctamente.

Una alternativa sería establecer para la clase "thispage1" (el <li> que
contiene el <div>) "list-style-type" a "none" y acabar de ajustar los
márgenes.

Saludos!
Miguel


Josu Garai escribió:

Miguel Gonzalez(e)k dio:

Hola Josu.

Hola Miguel:

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

Ya lo se, el codigo que habia mandado estaba escrito al vuelo, pero
gracias por la apreciacion

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).

Yo tampoco lo entiendo, de todas formas, posteo el codigo html que se
genera a ver si veis algo que a mi se me este pasando:

<ul class="ul1">
<li class="nothispage1"><a
href="index.asp?id&amp;lang=es">COLEGIO</a></li>
<li class="nothispage1"><a
href="index.asp?id&amp;lang=es">SERVICIOS</a></li>
<li class="thispage1"><div class="hautatua1">PROCEDIMIENTOS
ADMINISTRATIVOS</div>
<ul class="ul2">
<li class="thispage2">REQUISITOS PARA EL ALTA / BAJA
COLEGIAL</li>
<li class="nothispage2"><a
href="index.asp?id7&amp;lang=es">CERTIFICACIONES</a></li>
<li class="nothispage2"><a
href="index.asp?id8&amp;lang=es">MODIFICACION DE LOS DATOS
PERSONALES</a></li>
<li class="nothispage2"><a
href="index.asp?id9&amp;lang=es">EXENCIÓN DE CUOTA COLEGIAL</a></li>
<li class="nothispage2"><a
href="index.asp?id0&amp;lang=es">TALONARIO DE ESTUPEFACIENTES</a></li>
<li class="nothispage2"><a
href="index.asp?id1&amp;lang=es">GUIA PARA ABRIR UNA CONSULTA
MEDICA</a></li>
<li class="nothispage2"><a
href="index.asp?id2&amp;lang=es">FUNDACIÓN PATRONATO DE HUÉRFANOS
PRÍNCIPE DE ASTURIAS</a></li>
</ul>
</li>
<li class="nothispage1"><a
href="index.asp?id1&amp;lang=es">FORMACIÓN</a></li>
<li class="nothispage1"><a
href="index.asp?id7&amp;lang=es">PUBLICACIONES</a></li>
</ul>


y en el css:

.ul1 {
font-size: 8pt;
width: 218px;
vertical-align: middle;
list-style-position: inside;
border-right: 3px solid rgb(230,242,232) ;
border-bottom: 3px solid rgb(230,242,232) ;
}

.ul2 {
list-style-type: none !important;
list-style: none;
font-size: 8pt;
width: 163px;
vertical-align: middle;
list-style-position: inside;
background-color: rgb(247,251,248);
border-left: solid 1px rgb(239,178,68);
margin-left: 20px;
border:none;
}

.hautatua1{
padding-top: 0px;
margin-left:15px;
font-weight: bold;
border-bottom: solid 2px rgb(239,178,68);
border-top: solid 1px rgb(230,242,232);
background: rgb(230,242,232);
min-height: 16px;
width: 189px !important;
display:block;
}


.nothispage1 {
vertical-align: middle;
list-style-image: url(/Irudiak/bull_hautatua_ez1.png);
font-weight: bold;
color: rgb(0,98,170);
font-size: 8pt;
margin-top: 4px;
padding-top: 0 !important;
padding-left: 22px !important;
border-right:3px solid rgb(230,242,232) ;
width: 198px;
background: rgb(230,242,232);

}
.nothispage1 a{
color: rgb(0,98,170);
padding: 0px !important;
margin-top: 0 !important;
vertical-align: center;
}
.thispage2 {
vertical-align: middle;
font-weight: bold;
font-size: 8pt;
padding: 0;
color: rgb(0,98,170);
margin-bottom: 2px;
margin-top: 3px;
width: 147px;
min-height: 19px;
list-style-type: none;
}
.hautatua2{
position: relative;
background: transparent url(/irudiak/hautatua2.png) repeat-y;
margin-left:0;
background-position: left;
border-bottom:1px solid rgb(214,235,216);
border-right:1px solid rgb(214,235,216);
border-top:1px solid rgb(214,235,216);
padding-left: 22px;
min-height: 19px;
width: 147px !important;
vertical-align: middle;
list-style-type: none;
}

.nothispage2 a {
color: rgb(153,153,153);
vertical-align: middle;
}


.nothispage2 {
vertical-align: middle;
font-weight: bold;
font-size: 8pt;
color: rgb(153,153,153);
background: transparent url(/irudiak/hautatua_ez2.png) repeat-y;
background-position: left;
border-bottom:1px solid rgb(214,235,216);
border-right:1px solid rgb(214,235,216);
border-top:1px solid rgb(214,235,216);
min-height: 19px;
padding-left: 22px;
margin-bottom: 2px;
margin-top: 5px;
width: 147px;
list-style-type: none;
}

-

Saludos y gracias