[Ovillo] li invertido

Juan Jorge Muñoz Herrero jjmh399 en gmail.com
Dom Abr 15 16:03:03 UTC 2007


¿Por qué no es recomendable el float? Uno puede usar tantas cosas como le
deje hacer el CSS estándar.
Es cuestión de analizar el caso, si pones como bloques los elementos li
puedes usar el float como te de la gana, ten en cuenta que para elementos al
mismo nivel con float:left; se irán poneiendo uno al lado de otro hasta que
acaben con el espacio horizontal que tengan, en ese momento empezarán a
ponerse debajo, tras el elemento más alto que haya (en caso de no tener
todos la misma altura).
Por otro lado, el list-style-type:none; lo puedes sustituir por
list-style:none; aunque de todas formas en el momento que se le da el float
ya lo pierden de forma automática en los navegadores buenos, no haciéndolo
en IE.

En el ahorro de código también puedes optimizar un poco:
<div id="menuhorizontal">
<div id="bajo">
<ul>
<li><a href="quienessomos.html" target="_parent">Presentación</a></li>
<li><a href="servicios.html">este acceso</a></li>
<li><a href="convenios.html">Carres&nbsp;ciclicas</a></li>
<li><a href="aula.html">Postgrados</a></li>
<li><a href="departamento.html">Tulaciones</a></li>
<li><a href="suscripcion.html">enla Empresa</a></li>
<li><a href="solicita.html">I000<span class="iminuscula">i</span></a></li>
<li><a href="actualidad.html">Conveios </a></li>
<li><a href="actualidad.html">Conveios </a></li>
<li><a href="actualidad.html">Conveios </a></li>
</ul>
</div>
</div>

Eso es demasiado redundante, lo puedes sustituir por algo como:

<ul id="menuhorizontal">
<li><a href="quienessomos.html" target="_parent">Presentación</a></li>
<li><a href="servicios.html">este acceso</a></li>
<li><a href="convenios.html">Carres&nbsp;ciclicas</a></li>
<li><a href="aula.html">Postgrados</a></li>
<li><a href="departamento.html">Tulaciones</a></li>
<li><a href="suscripcion.html">enla Empresa</a></li>
<li><a href="solicita.html">I000<span class="iminuscula">i</span></a></li>
<li><a href="actualidad.html">Conveios </a></li>
<li><a href="actualidad.html">Conveios </a></li>
<li><a href="actualidad.html">Conveios </a></li>
</ul>
En ese caso podrías partir de una base mas o menos así en el CSS:

#horizontal{
    display:block;
    width:700px;
    height:30px;
    margin:0 auto;
    padding:0;}
#horizontal li{
    display:block;
    padding:0 2px;
    float:left;
    text-align:center;
    list-style:none;}

La cosa es que cuando tu pones un float en el ul lo que haces es desplazar
el bloque entero y por eso se te va mas a la izquierda, eso lo tenías que
aplicar a las li, pero claro, se te cambia el orden.
En el código que has puesto he visto otros errores o cosas no recomendables,
así que te aconsejaría revisarlo bien antes de dejarlo definitivo, espero
que haya suerte.
-- 
Juan J. Muñoz


Más información sobre la lista de distribución Ovillo