Foros del web, para los que viven de bits

cali7 · 29-nov-2005, 17:25

Tengo el mismo problema que otro chaval que escribio sobre el mismo tema.

Lo que pasa es que a mi eso no me ha solucionado nada.

Tengo un menu que es una lista, bueno os dejo el codigo y a ver si sois capaces de hacerme ver mi error.

Os dejo el codigo para que le echeis un vistazo. Yo lo que quiero es que el menu (lista) ocupe todo el espacio del div menu (180px). He puesto el fondo del div menu en rojo para que os deis cuenta de que no se rellena completamente.

<html>
<head>
<title>Prueba menu con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#container
{
text-align: left;
width: 770px;
background-color: #FFFFFF;
margin: auto;
}
#bordemenu
{
border: 1px solid #CCCCCC;
}
#menu
{
padding-top: 5px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
width: 180px;
background-color:#FF0000;
}
#menu ul
{
width: 180px;
list-style:none;
margin: 0px auto;
}
#menu ul li
{
background-color: #F5F7F9;
padding: 6px;
text-align:left;
vertical-align:middle;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
#menu ul li.cabeceraMenu
{
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #123344;
padding: 6px;
text-align:center;
vertical-align:middle;
height:10px;
border-top: 1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}

#menu ul li a,a:link,a:visited,a:active{
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #123344;
text-decoration: none;
}

#menu ul li a:hover{
font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #00FF00;
text-decoration: none;
}
</style>
</head>

<body>
<div id="container">
<div id="menu">
<ul>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li class="cabeceraMenu">Cabecera1 </li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>
</body>
</html>

jorpcolombia · 29-nov-2005, 20:25

Yo tampoco le encontré el error, pero puede hacerlo encajar con lo siguiente:

Código HTML:

#menu ul
{
width: 180px;
list-style:none;
margin-left: -40px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
}

Es una solución mediocre pero funciona...El resto de código lo dejas como lo tenías y listo...Suerte!

Seppo · 29-nov-2005, 20:51

Con firefox hice una modificación similar a la que te pasaron recién y anduvo... sigo peleando con IE...

Código HTML:

#menu ul
{
width: 180px;
list-style:none;
margin: 0px auto;
padding-left:0;
}

Seppo · 29-nov-2005, 21:07

Comprobado con FF & IE... Me está emepzando a gustar CSS auqnue veo q es jodido... como js cada browser hace lo q quiere

Código HTML:

#menu ul
{
width: 180px;
list-style:none;
margin: 0px auto;
padding-left:0px;
margin-left:0px;
}

29-nov-2005, 17:25	#1 (permalink)
cali7 Fecha de Ingreso: agosto-2004 Mensajes: 15	Problema con menu, no encuentro el error!!!!!!!!! Tengo el mismo problema que otro chaval que escribio sobre el mismo tema. Lo que pasa es que a mi eso no me ha solucionado nada. Tengo un menu que es una lista, bueno os dejo el codigo y a ver si sois capaces de hacerme ver mi error. Os dejo el codigo para que le echeis un vistazo. Yo lo que quiero es que el menu (lista) ocupe todo el espacio del div menu (180px). He puesto el fondo del div menu en rojo para que os deis cuenta de que no se rellena completamente. <html> <head> <title>Prueba menu con css</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> #container { text-align: left; width: 770px; background-color: #FFFFFF; margin: auto; } #bordemenu { border: 1px solid #CCCCCC; } #menu { padding-top: 5px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; width: 180px; background-color:#FF0000; } #menu ul { width: 180px; list-style:none; margin: 0px auto; } #menu ul li { background-color: #F5F7F9; padding: 6px; text-align:left; vertical-align:middle; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } #menu ul li.cabeceraMenu { font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; background-color: #123344; padding: 6px; text-align:center; vertical-align:middle; height:10px; border-top: 1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } #menu ul li a,a:link,a:visited,a:active{ font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #123344; text-decoration: none; } #menu ul li a:hover{ font: bold 10px Verdana, Geneva, Arial, Helvetica, sans-serif; color: #00FF00; text-decoration: none; } </style> </head> <body> <div id="container"> <div id="menu"> <ul> <li class="cabeceraMenu">Cabecera1 </li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="cabeceraMenu">Cabecera1 </li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="cabeceraMenu">Cabecera1 </li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="cabeceraMenu">Cabecera1 </li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="cabeceraMenu">Cabecera1 </li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="cabeceraMenu">Cabecera1 </li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </body> </html>

29-nov-2005, 20:25	#2 (permalink)
jorpcolombia Fecha de Ingreso: junio-2005 Ubicación: Bogotá Mensajes: 105	Yo tampoco le encontré el error, pero puede hacerlo encajar con lo siguiente: Código HTML: #menu ul { width: 180px; list-style:none; margin-left: -40px; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; } Es una solución mediocre pero funciona...El resto de código lo dejas como lo tenías y listo...Suerte! __________________ :pensando:¡No a lo inaccesible! ¡Sí a lo simple!:pensando

29-nov-2005, 20:51	#3 (permalink)
Seppo Fecha de Ingreso: marzo-2005 Ubicación: Buenos Aires, Argentina Mensajes: 1.282	Con firefox hice una modificación similar a la que te pasaron recién y anduvo... sigo peleando con IE... Código HTML: #menu ul { width: 180px; list-style:none; margin: 0px auto; padding-left:0; } __________________ http://desarrollophp.blogspot.com/

29-nov-2005, 21:07	#4 (permalink)
Seppo Fecha de Ingreso: marzo-2005 Ubicación: Buenos Aires, Argentina Mensajes: 1.282	Comprobado con FF & IE... Me está emepzando a gustar CSS auqnue veo q es jodido... como js cada browser hace lo q quiere Código HTML: #menu ul { width: 180px; list-style:none; margin: 0px auto; padding-left:0px; margin-left:0px; } __________________ http://desarrollophp.blogspot.com/

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado