Problema con la alineación de menús

Bueno en mi página tengo un menú lateral que he creado con divs ( un div por cada link), mi problema llega cuando, después de haberles dado la propiedad "float" a la izquierda, estos se ponen unos al lado de otros y no unos debajo de otros. :roll: :cry: . ¿Qué puedo hacer :oops: ??

Mi página es esta: http://usuarios.lycos.es/didoplanet/

Gracias por adelantado

mm
pues se em ocurre que los pongas todos dentro de un mismo Div el cual alineas a la izquierda

saludos

Bueno, la primera cosa que veo es que tienes un div fuera del html.

<div id="a4393c3c1" style="text-align: center; margin: 0px; padding: 0px;" align="center"></div>
<script>
x6f37e8c46cd = "loranger-chand-cristofe";
src2eef0ca8="http://ads.tripod.lycos.es/ad/google/frame.php?_url="+escape(self.location)+"&gg_bg=&gg_template=&mkw=&cat=";
function srcIframe2eef0ca8(src, width) {if (document.getElementsByTagName("div")[0]) {document.getElementsByTagName("div")[0].id = "a4393c3c1";}return '<iframe id="f2eef0ca8" src="'+src+'" height="95" width="'+width+'" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true"></iframe>';}x33f1396b498 = new Array();function x71d616146a8(xfa39b0cfbaf, x7325e11c556) {x838ee4625c5 = new String(x7325e11c556);xc3605d47cee = x838ee4625c5.substr(0,x838ee4625c5.indexOf('px')) * 1 + 95;
if (xfa39b0cfbaf.style.top == "" && !xfa39b0cfbaf.style.marginTop) {xfa39b0cfbaf.style.marginTop = "0px";xfa39b0cfbaf.style.paddingTop = "0px";}if ((x838ee4625c5.substr(0,x838ee4625c5.indexOf('px')) * 1 < 95) || (!x33f1396b498[xfa39b0cfbaf]) ) {xc3605d47cee = (xc3605d47cee<95) ? 95 : xc3605d47cee ;xfa39b0cfbaf.style.top = xc3605d47cee+"px" ;x33f1396b498[xfa39b0cfbaf] = 1 ;}}function checkGoogle2eef0ca8(width) {if (!document.getElementsByTagName("iframe")[0] || document.getElementsByTagName("iframe")[0].src != src2eef0ca8) {window.location.href="http://www.tripod.lycos.es";}x7280676f72a = new Array();x99cf756feb0 = new Array();x7280676f72a["a4393c3c1"] = new Array();x99cf756feb0["a4393c3c1"] = new Array();x7280676f72a["f2eef0ca8"] = new Array();x99cf756feb0["f2eef0ca8"] = new Array();x7280676f72a["a4393c3c1"][0] = "style.display" ;x99cf756feb0["a4393c3c1"][0] = "block" ;x7280676f72a["a4393c3c1"][1] = "style.height";x99cf756feb0["a4393c3c1"][1] = "95px";x7280676f72a["a4393c3c1"][2] = "style.width";x99cf756feb0["a4393c3c1"][2] = width+"px";x7280676f72a["a4393c3c1"][3] = "style.visibility";x99cf756feb0["a4393c3c1"][3] = "visible";x7280676f72a["a4393c3c1"][4] = "style.margin";x99cf756feb0["a4393c3c1"][4] = "0px";x7280676f72a["f2eef0ca8"][0] = "style.display" ;x99cf756feb0["f2eef0ca8"][0] = "block" ;x7280676f72a["f2eef0ca8"][1] = "style.height";x99cf756feb0["f2eef0ca8"][1] = "95px";x7280676f72a["f2eef0ca8"][2] = "style.width";x99cf756feb0["f2eef0ca8"][2] = width+"px";x7280676f72a["f2eef0ca8"][3] = "style.visibility";x99cf756feb0["f2eef0ca8"][3] = "visible";x7280676f72a["f2eef0ca8"][4] = "style.margin";x99cf756feb0["f2eef0ca8"][4] = "0px";for (var j in x7280676f72a) {for (i = 0 ; i < x7280676f72a[j].length ; i++) {if (!eval('document.getElementById("'+j+'")')) {break;}if (eval('document.getElementById("'+j+'").'+x7280676f72a[j][i]+' != "'+x99cf756feb0[j][i]+'"')) {eval('document.getElementById("'+j+'").'+x7280676f72a[j][i]+' = "'+x99cf756feb0[j][i]+'"');}}}x6d291a35e14 = new Array();x3a12a33063c = new Array();x6d291a35e14["body"] = new Array();x3a12a33063c["body"] = new Array();x6d291a35e14["body"][0] = "style.marginTop";x3a12a33063c["body"][0] = "0px" ;x6d291a35e14["body"][1] = "style.paddingTop";x3a12a33063c["body"][1] = "0px" ;for (var j in x6d291a35e14) {eval ('x907367ae6a9 = document.getElementsByTagName("'+j+'");');for (k = 0 ; k < x907367ae6a9.length ; k++) {for (i = 0 ; i < x6d291a35e14[j].length ; i++) {if (!eval('document.getElementsByTagName("'+j+'")')) {break;}if (eval('document.getElementsByTagName("'+j+'")['+k+'].'+x6d291a35e14[j][i]+' != "'+x3a12a33063c[j][i]+'"')) {eval('document.getElementsByTagName("'+j+'")['+k+'].'+x6d291a35e14[j][i]+' = "'+x3a12a33063c[j][i]+'"');}}}}x907367ae6a9 = document.getElementsByTagName("div");for (i = 0 ; i < x907367ae6a9.length ; i++) {if (document.all) {if ( (x907367ae6a9[i].currentStyle.position == "absolute") || (x907367ae6a9[i].currentStyle.position == "fixed") ) {x71d616146a8(x907367ae6a9[i], x907367ae6a9[i].offsetTop + "px");}}else {if ( (document.defaultView.getComputedStyle(x907367ae6a9[i], '').getPropertyValue("position") == "absolute") || (document.defaultView.getComputedStyle(x907367ae6a9[i], '').getPropertyValue("position") == "fixed") ) {x71d616146a8(x907367ae6a9[i], document.defaultView.getComputedStyle(x907367ae6a9[i], '').getPropertyValue("top"));}}}setTimeout("checkGoogle2eef0ca8("+width+")", 500);}
function displayGoogleAd2eef0ca8() {width = (document.body.clientWidth > 770) ? document.body.clientWidth : 770 ;width -= 20;content2eef0ca8 = srcIframe2eef0ca8(src2eef0ca8, width);if (!this.document.getElementsByTagName("frameset")[0]) {document.getElementById("a4393c3c1").innerHTML = content2eef0ca8;checkGoogle2eef0ca8(width);}}window.onload = new Function("if (x6f37e8c46cd != '2eef0ca8') {displayGoogleAd2eef0ca8();}");

document.getElementsByTagName("script")[0].text = "";
</script>

Tu imagen es de 790x272 y tu div banner lo tienes así:

#banner {BACKGROUND-COLOR:Black ; BORDER: #000 2px solid ; width: 790px ; height: 272px ; MARGIN: 10px 1px 10px 1px ; }

Tu div tiene el mismo tamaño que tu imagen pero.... has contado con los bordes y los márgenes? si le pones un borde de 2pixeles, le estarás restando 8píxeles al contenido de tu div, por lo que tu imagen no cabe. Pasa lo mismo con los márgenes.

Además no entiendo para que le estás dando márgenes si le has puesto un borde de 2 píxeles. Yo se los quitaría.

Si quieres conservar ese borde, vas a tener que pensar en si quieres reducir la imagen o agrandar el div.

#banner {BACKGROUND-COLOR:Black ; BORDER: #000 2px solid ; width: 794px ; height: 276px ; MARGIN: 0 ; }

¿Por qué tu div "menu-principal" es más estrecho que tu div banner? Por qué no lo haces del mismo tamaño? ¿y para qué le colocas márgenes en llos lados, que sentido tiene eso?

Suponiendo que el ancho del div banner sea de 794px como te lo he puesto arriba, al resto de la web debes de adarle este mismo ancho para que sea igual.

#menu-principal { background: url("objetos/fondobarra.gif") ;  BORDER: #000 1px solid ; width: 794px ; height: 30px ;  margin:10px  ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }

¿por qué no usas listas en lugar de 6 divs? Te quitarías mucho código de encima.

En lugar de poner esto:

#biografia { background: url("objetos/fondobarra.gif") ; BORDER: #000 1px solid ; width: 150px ; height: 30px ; margin:10px 1px 5px 1px ; FLOAT: left ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }
#biografia a:link { color:black; }
#biografia a:hover {tcolor:black; text-decoration: none; }
#biografia a:visited {color:black; text-decoration: none}

#discografia { background: url("objetos/fondobarra.gif") ; BORDER: #000 1px solid ; width: 150px ; height: 30px ; margin:10px 1px 5px 1px ; FLOAT: left ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }
#discografia a:link { color:black; }
#discografia a:hover {tcolor:black; text-decoration: none; }
#discografia a:visited {color:black; text-decoration: none}

#videoclips { background: url("objetos/fondobarra.gif") ; BORDER: #000 1px solid ; width: 150px ; height: 30px ; margin:10px 1px 5px 1px ; FLOAT: left ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }
#videoclips a:link { color:black; }
#videoclips a:hover {tcolor:black; text-decoration: none; }
#videoclips a:visited {color:black; text-decoration: none}

#letras { background: url("objetos/fondobarra.gif") ; BORDER: #000 1px solid ; width: 150px ; height: 30px ; margin:10px 1px 5px 1px ; FLOAT: left ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }
#letras a:link { color:black; }
#letras a:hover {tcolor:black; text-decoration: none; }
#letras a:visited {color:black; text-decoration: none}

#videos { background: url("objetos/fondobarra.gif") ; BORDER: #000 1px solid ; width: 150px ; height: 30px ; margin:10px 1px 5px 1px ; FLOAT: left ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }
#videos a:link { color:black; }
#videos a:hover {tcolor:black; text-decoration: none; }
#videos a:visited {color:black; text-decoration: none}

#conciertos { background: url("objetos/fondobarra.gif") ; BORDER: #000 1px solid ; width: 150px ; height: 30px ; margin:10px 1px 5px 1px ; FLOAT: left ; TEXT-ALIGN:center ; font-weight:bold ; font-family: Perpetua,Arial,Verdana,Helvetica ; }
#conciertos a:link { color:black; }
#conciertos a:hover {tcolor:black; text-decoration: none; }
#conciertos a:visited {color:black; text-decoration: none}

Pon esto en tu hoja de estilos (cámbiale el nombre al div):

#biografia ul { list-style: none }

#biografia li a { float:left; margin: 0px 7px 0px 0px ; background: 

url("objetos/fondobarra.gif") ;  BORDER: #000 1px solid ; width: 150px 

; height: 30px ; TEXT-ALIGN:center ;  font-family: 

Perpetua,Arial,Verdana,Helvetica ; } 

#biografia li a:hover { float:left; margin: 0px 7px 0px 0px ; 

background: url("objetos/fondobarra.gif") ;  BORDER: #000 1px solid ; 

width: 150px ; height: 30px ; TEXT-ALIGN:center ; font-weight:bold ; 

font-family: Perpetua,Arial,Verdana,Helvetica ; } 

y en tu html le pones esto:

<div id=biografia>
<ul>
[*][url="#>biografia</a>
[*]<a"]discografia[/url]
</lu>

</div>

El menú lo tienes en horizontal, por eso te lo he puesto de esta forma.

El problema que tienes con los divs de abajo es básicamente por los márgenes que le colocas.


y esto lo tienes fuera del html también.

</pre></xmp></noscript>
<script></script>
<script>x6f37e8c46cd = "2eef0ca8";
if (!AD_clientWindowSize()) {document.write("<NOSC>");}</script>

<script>displayGoogleAd2eef0ca8();</script>

<script></script>

<script></script>
<START>
<COPYRIGHT>
<script><var>-1?'https:':'http:';
  var _rsRP=escape(document.referrer);
  var _rsND=_rsLP+'//secure-uk.imrworldwide.com/';

  if (parseInt(navigator.appVersion)>=4) {
    var _rsRD=(new Date()).getTime();
    var _rsSE=0;
    var _rsSV='';
    var _rsSM=0;
    _rsCL='<scr></scr>';
  } else {
    _rsCL='<img>';
  }
  document.write(_rsCL);
//--></script>
<noscript>
<img>
</noscript>
<script>if (!AD_clientWindowSize()) {document.write("<NOSC>");}</script>
<END>

Muchas gracias a las dos :wink: , lo de los menús esta arreglado, y también lo del div banner :wink: , y eso que pones Solidaria, que está fuera del html no tengo ni idea que es :? .
Bueno pues eso que muchisimas gracias a las dos :D

Tu tienes algo parecido a esto:

<script no se que>
</script>

<html>
<head></head>
<body>
</body>
</html>

<mas scripts fuera del html>
</script>


Debería de ir dentro de las etiquetas <html></html> . Al ser scripts ,podrías colocarlas dentro del head.


Veo que el menú era en vertical, ya me extrañaba a mí que tuvieras 2 menus horizontales, jejejje. :oops: Lo has conseguido solucionar solo, mun bien!!!