Foros del Web - Ver Mensaje Individual

cristian_cena · #2 (**permalink**) 25/08/2009, 09:31

Aqui va mi granito de arena, aunque soy nuevo en css:

Si te entendi bien quieres un menu centrado con una altura definida por el contenido de el elemento de lista (<li>;)
1 - quite de tus cuatro divs (#sup_izq, #superior, #lateral y #datos ) la propiedad position (porque no se trabajar perfectamente con esta propiedad todavía).

y luego ...

#superior {width: 80%; height: 10%; clear:both; margin:auto;}
#superior .menu_horizontal { background-color: green; width:80%; margin-left:10%; margin-right:10%;} con estos valores lo centras definitivamente.
Pero como hay una lista anidada entonces definimos su width ...

#superior .menu_horizontal ul {width:100%;}

2 - Con el menu centrado pasamos a definir el width de los items de lista <li>:

#superior .menu_horizontal li {width:8.08%; list-style:none; overflow:hidden; margin-left:auto; margin-right:auto;}

Con overflow:hidden le decimos que si el texto supera el contenedor entonces que no lo muestre, elije la opción que prefieras.

La propiedad width te dará el ancho por lo que si quieres agregar otro ítem tendras que modificarlo:

Si cargas una lista de cuatro items suma sus cuatro anchos y si por ejemplo estos te dan un resultado de 40% (10% c/item) entonces le das un margin-left:30% y un margin-right:30%;

30% + 30% + 40% = 100%

Recuerda que si quieres cambiar los width de tus elementos este width dependera de la suma de margin + padding + width.

3 - Disculpa, pero que quieres hacer con:
#sup_izq, #lateral (div donde esta tu menu izquierdo) y #datos.

Postealo por favor y te ayudamos

Espero que te sirva la respuesta.

Saludos!

Aqui va el codigo para que copies y pegues:

<html xmlns="http://www.w3.org/1999/xhtml">
<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%;
}

#superior {
width: 100%; height: 10%; clear:both;
}
#superior .menu_horizontal { background-color:green; width:80%; margin-left:10%; margin-right:10%;}
#superior .menu_horizontal ul {width:100%;}

#superior .menu_horizontal li {width:8.08%; list-style:none; overflow:hidden; margin-left:auto; margin-right:auto;}

#sup_izq {
background-color: green; width: 10%; height: 10%; clear:left;
}

#lateral {
background-color: green; width: 10%; height: 90%; float:left;
}

#datos {
background-color: #CCCCCC; width: 80%; height: 90%; float:left;
}

</style>
</head>
<body>
<div id="contenido">

<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 - la altura crecera todo lo que quieras hacia abajo | la altura crecera todo lo que quieras hacia abajo</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="sup_izq">
<p>div sup_izq</p>
</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">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:1em; padding:1em;">
Aqui va mi granito de arena, aunque soy nuevo en css:<br /><br />
Si te entendi bien quieres un menu centrado con una altura definida por el contenido de el elemento de lista (‹li›)
1 - quite de tus cuatro divs (#sup_izq, #superior, #lateral y #datos )la propiedad position (porque no se trabajar perfectamente con esta propiedad todavía).<br /><br />
y luego ...<br /><br />
#superior {width: 80%; height: 10%; clear:both; margin:auto;} <br />
#superior .menu_horizontal { background-color: green; width:80%; margin-left:10%; margin-right:10%;} con estos valores lo centras definitivamente. Pero como hay una lista anidada entonces definimos su width ...<br />
#superior .menu_horizontal ul {width:100%;} <br /><br />

2 - Con el menu centrado pasamos a definir el width de los elementos de lista (li): <br /><br />
#superior .menu_horizontal li {width:8.08%; list-style:none; overflow:hidden; margin-left:auto; margin-right:auto;} con overflow:hidden le decimos que si el texto supera el contenedor entonces que no lo muestre, elije la opción que prefieras. El width te dará el ancho por lo que si quieres agregar otro ítem tendras que modificarlo. <br /><br />
Si cargas una lista de cuatro items suma sus cuatro anchos y si por ejemplo estos te dan un resultado de 40% (10% c/item) entonces le das un margin-left:30% y un margin-right:30%; 30% + 30% + 40% = 100% <br /><br />
Recuerda que si quieres cambiar los width de tus elementos este width dependera de la suma de margin + padding + width. <br /><br />
3 - Disculpa, pero que quieres hacer con #sup_izq, #lateral(div donde esta tu menu izquierdo) y #datos. Postealo por favor. Espero que te sirva la respuesta.
</p>
</div>

</div>
</body>
</html>