[SOLUCIONADO] Consulta etiquetas menú

[Jaimemartin]

Muy buenas.
Pese a más de un día buscando e intentando, no puedo ajustar las pestañas de un menu al 100% del ancho de la pagina.

He probado con todo, por más que intento no consigo hacerlo.

Mirad:

#contain ul.menu li {

margin-left: 50%;
margin-right: 50%;


}

Y también he probado en (em) y tampoco.

Alguien me puede iluminar?

Muchas gracias.

[pzin]

Usa highlight cuando pongas código, que se ve mejor.

¿Buscas algo así?

[Jaimemartin]

Supuestamente tu codigo es correcto pero no me funciona. Verás:

<div id="menu1">
<div id="container">

<ul class="menu">
<li id="1" class="active">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li id="6">6</li>
<li id="7">7</li>
<li id="8">8</li>
<li id="9">9</li>
</ul>
<span class="clear"></span>
<div class="content 1">1</div>
<div class="content 2">2</div>
<div class="content 3">3</div>
<div class="content 4">4</div>
<div class="content 5">5</div>
<div class="content 6">6</div>
<div class="content 7">7</div>
<div class="content 8">8</div>
<div class="content 9">9</div>
</div>
</div>

#container{


}

#container .menu{

display: table;
width: 100%;
table-layout: fixed;

}

#container ul{
list-style:none;
list-style-position:outside;
height: 34px;
display: table-row;
}
#container ul.menu li{
float:left;
margin-bottom:-1px;
display: table-cell;
text-align: center;
}
#container ul.menu li{
font-weight:700;
display:block;
padding:10px 26px;
background:#2C2B2B;
margin-bottom:-1px;
border-width:1px 1px 1px 1px;
position:relative;
color:#fff;
cursor:pointer;
font-size: 16px;

}
#container ul.menu li:hover{
color:#fff;
}
#container ul.menu li.active{
background:#FF0000;
border-bottom:0;
color:#fff;
}
/******* /MENU *******/

/******* CONTENT *******/
.content{
margin:0pt auto;
background:#efefef;
background:#171717;
text-align:left;
padding:1.3em;
padding-bottom:20px;
font-size:12px;
line-height:2em;
color:#8C8C8C;

}
.content h3{
line-height:1em;
vertical-align:middle;
height:48px;
padding:10px 10px 10px 52px;
font-size:32px;
color:#E4E1CD;
}
/******* /CONTENT *******/

/******* 1 *******/

.content.1{
display:block;
}
/******* /1 *******/

/******* 2 *******/

.content.2{
display:none;
}
/******* /2 *******/

/******* 3 *******/
.content.3{
display:none;
}
/******* /3 *******/

/******* 4 *******/

.content.4{
display:none;
}
.content.enlaces a{
color:#498BBF;
}
/******* /4 *******/

/******* 5 *******/
.content.5{
display:none;
}
/******* /5 *******/

/******* 6 *******/
.content.6{
display:none;
}
/******* /6 *******/

/******* 7 *******/
.content.7{
display:none;
}
/******* /7 *******/

/******* 8 *******/
.content.8{
display:none;
}
/******* /8 *******/

/******* 9 *******/
.content.9{
display:none;
}
/******* /9 *******/

Gracias Pzin!

[pzin]

Pero es que estás sobreescribiendo valores del código que puse en el otro tema:

Código CSS:

#container ul.menu li {
  float:left; /* sobra */
  margin-bottom:-1px;
  display: table-cell;
  text-align: center;
}
#container ul.menu li {
  font-weight:700;
  display:block; /* sobra */
 

Si flotas un elemento automáticamente el valor display se computa como un elemento de bloque. Que de todas formas, luego más abajo vuelves a declarar. ¿Para qué?

Si quitas esas dos cosas te funcionará.

Y si te aparece un extraño espacio a la izquierda, será que no usas ningún tipo de reset, entonces tendrías que ponerle a la lista:

Código CSS:

ul {
  padding: 0;
}
 

Luego repites mucho código. Si tienes la misma clase en varios elementos, puedes hacer:

Código CSS:

.content {
  display:none;
}
 

Siguiendo el principio DRY, es mejor no repetir las cosas.

[Jaimemartin]

Eres una puta makina no me habia dado cuenta, tampoco llevo tanto tiempo con esto.

Resuelto, no me aparece nada extraño.

Muchas gracias!