Problema con los <li>

Jaimemartin · #1 (**permalink**) 29/06/2013, 14:21

Muy buenas cracks!
Tengo un pequeño problema con el que estoy todo el día, y ni buscando en google ni intentandolo de todas las formas, no consigo lo siguiente.

Un poco dificil de explicar:

HTML

Quisiera centrarlo con la pagina pero no puedo.

Código HTML:

<div class="es" id="menu-principal">
     <ul>
       <li><a href="1.html">1</a></li>
       <li><a href="2.html">2</a></li>
       <li><a href="3.html">3</a></li>
       <li><a href="4.html">4</a></li>
       <li><a href="5.html">5</a></li>
       <li><a href="6.html">6</a></li>
       <li><a href="7.html">7</a></li>
       <li><a href="8.html">8</a></li>
       <li><a href="9.html">9</a></li>
     </ul>
    </div>

CSS

Código HTML:

#contenedor #cabecera #menu-principal {
	height: 29px;
	width: 945px;
	float: none;
	clear: both;	
}
#contenedor #cabecera #menu-principal ul {
	list-style: none;
	padding: 0;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#contenedor #cabecera #menu-principal ul li {
	 float: left;
	 background-color: #C8E654
}
#contenedor #cabecera #menu-principal ul li a {
	background: url(Imagenes/background-menu-boton.jpg) repeat-x;
	color: #fff;
	display: block;
	text-decoration: none;
	border-right: 1px solid #8EB50B;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bolder;
	padding-top: 7.5px;
	padding-right: 21.5px;
	padding-bottom: 7.5px;
	padding-left: 21px;
	margin-left: 1px;
} 
#contenedor #cabecera #menu-principal ul li a:hover {
	background: url(Imagenes/background-menu-boton_over.jpg) repeat-x;
}

¿Donde puede estar el error?

Gracias de antemano.

Rafael · #2 (**permalink**) 29/06/2013, 16:33

Yo le pondría padding 0 a los li también, y no creo que los pixeles aplique fracciones 21.5¡!

Jaimemartin · #3 (**permalink**) 30/06/2013, 05:08

¿¿¿Poniendo Padding: 0; a #contenedor #cabecera #menu-principal ul li???? Lo probare

pzin · #4 (**permalink**) 30/06/2013, 05:18

Si te valen algunos consejos gratuitos para optimizar un poco el código y trabajar más cómodamente...

En mi opinión tus selectores son un poco largos, podrías cambiar:

Código CSS:

Ver original#contenedor #cabecera #menu-principal ul li a

por:

Código CSS:

Ver original#menu-principal ul li a

Al ser identificadores, sólo vas a tener un #menu-principal, no hace falta indicar tanta profundidad en el selector.

En CSS para casi todo hay un shorthand, por lo que en lugar de poner:

Código CSS:

Ver originalpadding-top: 7px;
padding-right: 21px;
padding-bottom: 7px;
padding-left: 21px;

puedes poner:

Código CSS:

Ver originalpadding: 7px 21px 7px 21px;

Que siempre corresponde a top, right, bottom y left —en el sentido de las agujas del reloj. Aunque, también podrías indicar lo siguiente en tu caso:

Código CSS:

Ver originalpadding: 7px 21px;

Que corresponde a top/bottom y right/left.

Y cuando indiques que 0 como valor de una medida, puedes omitir el tipo de medida, ya que cero es cero en pixeles, porcentajes y lo que sea:

Código CSS:

Ver originalmargin: 0

Jaimemartin · #5 (**permalink**) 30/06/2013, 06:01

PUES NO.

Primero lo de poner Padding: 0 NO FUNCIONA NO HACE NADA

Lo segundo aunque no me a solucionado mi problema, lo que dice Pzin:

padding-top: 7px 21px 7px 21px; Tampoco me funciona, no entro a detalles...

Jaimemartin · #6 (**permalink**) 30/06/2013, 06:03

Creo que si consigo ponerlo bien pero solo en CHROME Y MOZILLA, pero en IE8 no funciona se puede observar en la imagen de arriba.

Gracias!

pzin · #7 (**permalink**) 30/06/2013, 06:29

Puse padding-top donde tendría que haber ido padding.

Corregido queda.

El problema que tienes realmente es que estás calculando todo muy manualmente. No sé porqué fallará en IE8, tampoco puedo ir a verlo porque no tengo instalado IE.
Pero bueno, en lugar de hacerlo todo tan manual yo haría algo así:

Código CSS:

Ver original#menu-principal {
  display: table; 
  width: 945px;
  height: 29px;
}
 
#menu-principal ul {
  display: table-row;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
#menu-principal ul li {
   display: table-cell;
   background-color: #C8E654
}
 
#menu-principal ul li a {
  display: block;
  padding: 7px;
  border-right: 1px solid #8EB50B;
  background: url(Imagenes/background-menu-boton.jpg) repeat-x;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bolder;
  text-align: center;
  text-decoration: none;
}
 
#menu-principal ul li a:hover {
  background: url(Imagenes/background-menu-boton_over.jpg) repeat-x;
}

Así te ahorras calcular el relleno lateral, ya que los elementos de la lista se van a estirar de tal forma que ocupen siempre el ancho de #menu-principal. Según la biblia funcionará en IE8.

Incluso puede indicar una medida relativa para #menu-principal:

Código CSS:

Ver original#menu-principal {
  display: table; 
  width: 100%;
  height: 29px;
}

Así siempre se adapta a #cabecera y te ahorras andar poniendo medidas en pixeles.

Jaimemartin · #8 (**permalink**) 30/06/2013, 06:58

Ahora me queda si

Que hago para que este pegado a los lados?

Jaimemartin · #9 (**permalink**) 30/06/2013, 06:59

http://imageshack.us/photo/my-images/401/ezue.png/

pzin · #10 (**permalink**) 30/06/2013, 07:22

Pues sin ver el código CSS relativo a #contenedor y #cabecera sólo se puede adivinar.

Jaimemartin · #11 (**permalink**) 30/06/2013, 07:23

Cita:

#contenedor #cabecera #menu-principal {
display: table-row;
height: 29px;
width: 945px;
}
#contenedor #cabecera #menu-principal ul {
display: table-row;
list-style: none;
margin: 0;
padding: 0;
}
#contenedor #cabecera #menu-principal ul li {
float: left;
display: table-cell;
background-color: #C8E654;
}
#contenedor #cabecera #menu-principal ul li a {
background: url(Imagenes/background-menu-boton.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
border-right: 1px solid #8EB50B;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bolder;
text-align: center;
padding: 7px;
}
#contenedor #cabecera #menu-principal ul li a:hover {
background: url(Imagenes/background-menu-boton_over.jpg) repeat-x;
}

pzin · #12 (**permalink**) 30/06/2013, 07:28

Bueno, eso es realidad no es el código relativo a #contenedor y #cabecera.

De todas formas el error está ahí. Intenta al menos copiar bien el código que te puse más arriba, sin cambiarle ni añadirle cosas primero.

Jaimemartin · #13 (**permalink**) 30/06/2013, 07:47

MIRA

http://imageshack.us/photo/my-images/534/daos.png/

GRACIAS por la ayuda PZIN!

pzin · #14 (**permalink**) 30/06/2013, 08:02

No entiendo lo de la parte de abajo de la imagen, lo del Dreamweaver. No sé qué significa eso, aclaro que nunca lo he usado así que no sé qué hace o deja de hacer.

Lo del margen superior, supongo que es relativo a la página en si. Añade un regla para reajustar el margen que por defecto ponen los navegadores a body:

Código CSS:

Ver originalbody {
  margin: 0;
}

Jaimemartin · #15 (**permalink**) 30/06/2013, 08:08

en la opción de diseño de dreamweaver se repite los <li>

pzin · #16 (**permalink**) 30/06/2013, 08:20

Pues no sabría decirte. Pásate por el foro de Editores Web que por ahí tendrán más idea.

Jaimemartin · #17 (**permalink**) 30/06/2013, 08:23

SEGUE EL PROBLEMA!!!!!!!!! POR ESO TE DIGO LO DEL DREAMWEAVER

http://imageshack.us/photo/my-images/507/r5j.png/

pzin · #18 (**permalink**) 30/06/2013, 08:32

¿Tienes tu página publicada en algún sitio?

Si no, coge TODO el código que tengas, y lo pegas aquí, allá, por ahí o acá, le das a guardar, copias la URL y la pegas aquí y así podemos ver el problema mejor.

Jaimemartin · #19 (**permalink**) 30/06/2013, 08:35

Que va, no tengo todavía el host ni el dominio

pzin · #20 (**permalink**) 30/06/2013, 08:37

Pues por eso mi segunda parte del mensaje.

Jaimemartin · #21 (**permalink**) 30/06/2013, 08:43

Código CSS:

Ver original<style type="text/css">
body{
     margin: 0;
        background:url("imagenes/fondo.png") repeat-y scroll center top #FFFFFF
    }
    #content-wrapper{
        width:945px;
        margin-right:auto;
        margin-left:auto;
        }
    #main-wrapper{
        width:100%;
    }
#contenedor {
    width: 945px;
    margin-right: auto;
    margin-left: auto;
}
#contenedor #cabecera {
    width: 945px;
}
#contenedor #cabecera #menu-superior {
    height: 19px;
    width: auto;
    font-size: 11px;
    font-style: normal;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    padding-left: 6px;
    padding-top: 3px;
    padding-bottom: 0px;
    text-transform: none;
    background-image: url(Imagenes/background-cabecera-menusuperior.png);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: left top;
    color: #666;
}
#contenedor #cabecera #menu-superior a {
    font-family: Verdana, Geneva, sans-serif;
    color: #999;
    text-decoration: none;
}
#contenedor #cabecera #cabecera-principal {
    height: auto;
    width: 945px;
    height: 76px;
    padding: 0px;
    width: 945px;
    background-image: url(Imagenes/background-cabecera-principal.png);
}
#contenedor #cabecera #cabecera-principal #logo {
    width: auto;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 10px;
    cursor: auto;
    border: 0;
    text-decoration: none
}
#contenedor #cabecera #cabecera-principal #centro {
    height: 75px;
    width: 200px;
    float: left;
}
#contenedor #cabecera #cabecera-principal #zona {
    height: 75px;
    width: 339px;
    float: left;
}
#contenedor #cabecera #menu-principal {
  display: table; 
  width: 945px;
  height: 29px;
}
 
#contenedor #cabecera #menu-principal ul {
  display: table-row;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
#contenedor #cabecera #menu-principal ul li {
    display: table-cell;
    background-color: #C8E654
}
 
#contenedor #cabecera #menu-principal ul li a {
  display: block;
  padding: 7px;
  border-right: 1px solid #8EB50B;
  background: url(Imagenes/background-menu-boton.jpg) repeat-x;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: bolder;
  text-align: center;
  text-decoration: none;
}
#contenedor #cabecera #menu-principal ul li a:hover {
  background: url(Imagenes/background-menu-boton_over.jpg) repeat-x;
} 
#contenedor #cuerpo {
    width: 945px;
    height: auto;
    margin: 0px;
}
#contenedor #cuerpo #modulo-banner-superior {
    height: 3px;
    width: 945px;
}
#contenedor #cuerpo #banner {
    height: 260px;
    width: 945px;
}
#contenedor #cuerpo #modulo-banner-inferior {
    height: 35px;
    width: 945px;
}
#contenedor #cuerpo #cuerpo-principal {
    height: auto;
    width: 945px;
}
#contenedor #pie {
    height: auto;
    width: 945px;
    margin: 0px;
}
body {
    margin: 0;
}
</style>

pzin · #22 (**permalink**) 30/06/2013, 08:53

Bueno, con ese CSS y el resto del código HTML que he tenido que adivinar, funciona perfectamente: http://jsfiddle.net/xU2Jp

Si tienes un problema a quienes preguntes tienen que ser capaces de reproducir el problema para ayudarte. Ve a esa página y coloca el código como lo tengas, le das a RUN, y si se reproduce el problema, dale a SAVE y luego nos pegas aquí la dirección URL.

Jaimemartin · #23 (**permalink**) 30/06/2013, 09:00

YA HE ENCONTRADO EL PROBLEMA

Y ES QUE TODOS LOS <li> estaban pegados unos detrás de otro sin cerrar </li>

Pero me sigue saliendo lo del dreamweaver seguido. Lo consultare en http://www.forosdelweb.com/f17

Gracias Pzin!!!