Menu de la izquierda 'deformado'. Ayuda porfavor.

Hola, otra vez yo, jeje.
Bueno pues tengo este problema (http://loquesoy.atwebpages.com/plantilla.html), como podeís ver el menu se ve deformado, esta muy largo. Y entre los enlaces hay mucho espacio.
En otro mensaje les pongo el codigo de estilos-generales que tengo, he mirado haber si podía haber algun error, pero no lo he visto y seguro que algo se me escapa.

Espero que también me puedan ayudar esta vez. Muchas gracias de antemano ;)

*{text-indent: 0px ; margin:0px ;padding:0px ; border:0px}
p {text-align:justify}
h1 {font-size: 1.2em ; color:blue ; font-weight:bold ; text-decoration:underline ;
text-align:center}
h2 {font-size: 1.1em ; color:blue ; font-weight:bold ; text-decoration:none ;
text-align:center}
body {text-align: center}
#global {width:800px ; margin: 4px auto}
#curva-superior {background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height:12px ;
overflow: hidden}
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#navegacion ul {margin-left:180px}
#contenido {background-color: orange ;
border-left: black 1px solid ;
border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {width: 150px ;
float:left ; text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin:4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ;
background-image: url(objetos/menu-curva-superior.gif) }
#pie {background-color: brown ;
border-left: black 1px solid;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ;
bkacground-repeat: no-repeat ;
width:800px ;
height:12px ;
overflow: hidden}
a {color:brown ; font-size:1em ; text-decoration: none ; display: block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}



Si pongo solo 3 enlaces si que se ve bien :S Es al poner el 4 que se pone asi de mal

UP TEMA, ayuda please :(

hola

yo no veo ningun error

eso es lo que mide tu menu de ancho, y es lo que mide
el fondo del menu, al hacerlo mas angosto, el fondo ya no se veria bien
si quieres hacerlo mas angosto debes modificar la imagen

y en menu donde dice width 150px
modificarle a menos

ahora... eso se ve asi, porque el texto que ocupa enlace 1
es muy corto, pero al poner tu texto, no necesitaras mas????

saludos

amy_ escribió:*{text-indent: 0px ; margin:0px ;padding:0px ; border:0px}
p {text-align:justify}
h1 {font-size: 1.2em ; color:blue ; font-weight:bold ; text-decoration:underline ;
text-align:center}
h2 {font-size: 1.1em ; color:blue ; font-weight:bold ; text-decoration:none ;
text-align:center}
body {text-align: center}
#global {width:800px ; margin: 4px auto}
#curva-superior {background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width:800px ;
height:12px ;
overflow: hidden}
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
#navegacion ul {margin-left:180px}
#contenido {background-color: orange ;
border-left: black 1px solid ;
border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {width: 150px ;
float:left ; text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif) ;
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin:4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ;
background-image: url(objetos/menu-curva-superior.gif) }
#pie {background-color: brown ;
border-left: black 1px solid;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior {background-image: url(objetos/curva-inferior.gif) ;
bkacground-repeat: no-repeat ;
width:800px ;
height:12px ;
overflow: hidden}
a {color:brown ; font-size:1em ; text-decoration: none ; display: block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}



Si pongo solo 3 enlaces si que se ve bien :S Es al poner el 4 que se pone asi de mal

Hola Amy:

Eso que le pasa con la capa menu de que le queda bastante alargada, y los enlaces muy separados es muy probable, por no decir (con toda seguridad) que es porque no ha puesto la lista toda seguida en una línea allí en su página.

Le sugiero ponerla así:

<div id="contenido">
<div id="menu"><ul><h1>Título de sección</h1>

<a href=="#">Enlace 1</a>

Enlace 2 etc.etc. etc. etc. </div>

Acá en el mensaje seguramente no aparecerá como debiera de poner lo del menu, ya que la caja del mensaje no tiene el ancho suficiente para que vea bien el ejemplo
pero le quiero decir que cuando ponga el <div id="menu"> ponga a continuación todo en esa misma línea, hasta que cierre la capa menu con el </div>.

No haga retorno de carro ni nada que se le parezca, de esa manera los enlaces se le juntarán.

Como recordatorio, y si mal no recuerdo, eso que le digo está explicado en el curso Paso a Paso

Saludos

Hola, gracias por la ayuda. Ahora si que los enlaces se ven mucho mas juntos porque los puse todos en la misma linea.

Pero es cierto, cuando tenga que poner más? como lo hago para alargar la tabla y que no quede deformada?
Bueno de momento no me hace falta, cuando llegue el momento y tenga otro dia, me pasaré por aqui ;) Gracias de nuevo!!