Pues siguiendo con mis estudios y mis estúpidas preguntas de CSS, permitidme que os traslade un problema que estoy teniendo ahora mismo.
Estoy creando una página con 4 divs, para hacer una barrita superior, una lateral, un logo en la zona superior izquierda (¿convendría que lo incluyese en alguna de las dos barras?) 'enmarcando' el área de contenidos (en negro).
Tengo 2 menús (código general extraído del manual de librosweb), uno vertical, en la barra lateral y otro horizontal, en la barra superior.
Hasta aquí todo bien, pero ahora llega el atasco:
1.- Soy completamente incapaz de centrar este menú dentro del div superior. Lo he intentado con margin, padding, en px, en %, ... no sé de dónde me toma la altura. Si le pongo height: 50%; margin: 25% 0 debería hacerlo bien, no? pues no...
2.- Quiero fijar el ancho de los enlaces del menú horizontal, de tal forma que cuando lleguen al límite de tamaño, rompan el texto de dentro en varias líneas. (El menú se cargará posterior con Ajax, si los dioses del web me lo permiten, así que el tamaño del texto no es conocido a priori, ni tampoco el número de opciones del menú).
Mediante margin 0 X% consigo separar los enlaces a lo ancho, pero no consigo que el texto se desplace hacia abajo, sino que los enlaces siguen creciendo a lo ancho y desplazan al resto.
Por cierto, que he intentado aplicar max-width a los <a> y a los <li> pero no me lo coge bien. Además, tendría que encontrar el hack correspondiente para IE, ¿verdad? y no tengo idea de cómo es, todos los que veo son para el tamaño de la ventana...
Básicamente, lo que me gustaría conseguir es un menú superior centrado, que si cargo una lista de 4 elementos, quede en el medio, repartido por todo el ancho de la barra y que si cargo 10 elementos, quede también centrado y repartido.
¿Es posible realizar esto, sólo con CSS? ¿O tendré que incluir parte de los estilos dentro del código?
Espero haberme explicado bien.
Aquí teneis el código. Si veis cualquier cosa, aunque no tenga que ver con esto, por favor, decirlo, que es malo coger vicios cuando se está aprendiendo...
Muchas gracias por todo.
Un saludo.
Código:
<html>
<head>
<title>Enter the title of your XHTML document here</title>
<style type="text/css">
/* Limpieza de estilos */
* {
margin: 0; padding: 0; border: 0; outline: 0;
font-size: 100%; position: relative; text-decoration: none;
}
/* Estilos generales por etiquetas */
BODY{
min-width: 800px;
width: expression(document.body.clientWidth > 800? "auto" : "800px");
}
/* Estilos de menus verticales */
ul.menu_vertical {
width: 180px; list-style: none; margin: 0;
padding: 0; border-left: 1px solid #7C7C7C;
}
ul.menu_vertical li {
border-bottom:1px solid #7C7C7C; border-top: 1px solid #FFF; background: #F4F4F4;
}
ul.menu_vertical li a {
padding: .2em 0 .2em .5em; display:block;
text-decoration: none; color: #333;
}
/* Estilos de menus horizontales */
ul.menu_horizontal {
clear: both; float: left; width: 99%; height: 99%;
border: 0px solid yellow; text-align: center;
}
ul.menu_horizontal li {
float: left; margin: 0 2px;
border: 1px solid white; height: 50%
}
ul.menu_horizontal li a {
display: block; color: red;
text-align: center;
max-width: 100px;
}
ul.menu_horizontal li a:hover , ul.menu_horizontal li a:active {
color: orange;
}
ul.menu_horizontal li a:link , ul.menu_horizontal li a:visited {
}
/* Estilos de etiquetas particulares por ID */
#contenido {
background-color: silver; height: 99.5%; width: 99.5%;
position:relative; top: 0.25%; left: 0.25%;
}
#sup_izq {
background-color: green; position: absolute; top:0; left:0; width: 10%; height: 10%;
}
#superior {
background-color: green; position: absolute; top:0; right:0; width: 90%; height: 10%;
}
#lateral {
background-color: green; position: absolute;
bottom:0; left:0; width: 10%; height: 90%;
}
#datos {
background-color: black; position: absolute;
bottom:0; right:0; width: 90%; height: 90%;
}
</style>
</head>
<body>
<div id="contenido">
<div id="sup_izq">
</div>
<div id="superior">
<ul class="menu_horizontal">
<li><a href="#" title="Enlace 1">Elemento 1 crece a lo ancho</a></li>
<li><a href="#" title="Enlace 2">Elemento 2</a></li>
<li><a href="#" title="Enlace 3">Elemento 3</a></li>
<li><a href="#" title="Enlace 4">Elemento 4</a></li>
<li><a href="#" title="Enlace 5">Elemento 5</a></li>
<li><a href="#" title="Enlace 6">Elemento 6 <br/>esto es lo que<br/> quiero pero sin <br/>br</a></li>
<li><a href="#" title="Enlace 7">Elemento 7</a></li>
<li><a href="#" title="Enlace 8">Elemento 8</a></li>
<li><a href="#" title="Enlace 9">Elemento 9</a></li>
<li><a href="#" title="Enlace 10">Elemento 10</a></li>
<li><a href="#" title="Enlace 11">Elemento 11</a></li>
<li><a href="#" title="Enlace 12">Elemento 12</a></li>
</ul>
</div>
<div id="lateral">
<ul class="menu_vertical">
<li><a href="#" title="Enlace 1">Elemento 1</a></li>
<li><a href="#" title="Enlace 2">Elemento 2</a></li>
<li><a href="#" title="Enlace 3">Elemento 3</a></li>
<li><a href="#" title="Enlace 4">Elemento 4</a></li>
<li><a href="#" title="Enlace 5">Elemento 5</a></li>
<li><a href="#" title="Enlace 6">Elemento 6</a></li>
</ul>
</div>
<div id="datos">
</div>
</div>
</body>
</html>