mis enlaces de cabecerea se desajustan .

saludos, foreros

estoy en la leccion del menu desplegable y todo va bien, solo un fallo con los enlaces, mas bien con su posicion donde dice seccion 2 se ponde debajo de seccion 1 como si no tuviera el float, pero pense que a lo mejor en intenet se veia bien, y pues no resulto peor, se a desfasado todo en la plantilla, :? antes de iniciar con los scripts todo iba perfecto asi que mas que sospecho que tiene que ver con estas cosas , pero como no se nada aun sobre php pues .. no se ni que cosa.. por que es solo eso digo la poscicion los enlaces sirven y todo, aki dejo todo:

direccion:http://testeando2.onlinewebshop.net/plantilla.html
----------------------------------------------------------------- <<<plantilla>>

E HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<body onload="init () ;">
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media"all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"> </script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"> </script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"> <div id="logotipo"> [contenido no disponible] </div> <div id="publicidad"> Bienvenidos a mi web</div> </div>
<div id="navegacion"> <ul>
  • seccion1 seccion2
  • seccion3
    </div>
    <div id="contenido">
    <div id="menu">
    <ul><h1>titulo de seccion 1</h1>
  • elemento 1
  • elemento 2
  • elemento 3
  • seccion4
    </div>
    <h1>esta sera la parte principal de la web</h1>


    Tienes dos opciones, una es definirle el margen concreto a cada uno de los párrafos de todas tus páginas web, o algo un poco más sencillo, poner un par de palabras en la Hoja de Estilo y listo. Qué prefieres? je je je.</p>
    <h2>este es mi segundo parrafo</h2>

    Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos margenes. Como los textos que vemos sin margen pertenecen a la capa de fondo naranja (orange) y en la Hoja de Estilos solo pone "orange" en la capa "#contenido", ya sabemos a qué capa incluirle la propiedad padding (el padding es parecido al margin, ya veremos la diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar cada capa rápidamente, je je je. Pero solo queremos por ahora poner margen a sus párrafos, es decir, queremos margenes para los párrafos de dentro de la capa #contenido, así que, si recuerdas bien lo que hicimos la otra vez, esto se pone así</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • foro ejemplo
  • contactos
  • nos enlazan

    </div>
    <div id="piedos"> pie dos </div>
    <div id="pietres">
    <ul>
  • top site
  • directorio
  • mapa de la web

    </div>
    </div>

    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    ------------------------------------------<<<estilos generales>>>
    *{margin:0px; padding:0px; border:0px}
    h1{font-size:1.2em; color:blue;font-weight:bold;text-decoration:underline; text-align:center}
    h2{font-size:1.2em; color:blue;font-weight:bold;text-decoration:none;text-align:center}
    a{color:blue; font-size:1.3em; text-decoration:none;display:block}
    a:link{}
    a:visited{}
    a:hover{color:red; text-decoration:underline;background-color:silver}
    a:active{}
    body{text-align:center}
    p{text-align:justify}
    #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-right:black 1px solid;border-left:black 1px solid; height:85px}
    #logotipo{width:280px;float:left}
    #logotipo a{}
    #logotipo a:link{}
    #logotipo a:visited{}
    #logotipo a:hover{background-color:white}
    #logotipo a:active{}
    #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-right:black 1px solid; border-left:black 1px solid }
    #contenido p{padding:5px 10px 5px 10px;text-indent:15px}
    #menu {background-color:yellow; width:150px; float:left; text-align:left;margin-right:3px 10px 3px 3px;background-image:url(objetos/menu-parte-inferior.gif);background-position:bottom;margin:3px}
    #menu h1{text-decoration:none; font-size: 12px;background-image:url(objetos/menu-parte-superior.gif)}
    #menu li{list-style:none; margin:4px 8px 4px 6px;padding-bottom:5px;font-size:12px}
    #pie {background-color:white;border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;height:65px}
    #pie li{list-style:none;font-size:12px}
    #pieuno{float:left;width:150px}
    #piedos{float:left;width:498px}
    #pietres{float:left;width:150px}
    #pie a{color:blue; text-decoration:none; display:block}
    #pie a:link{}
    #pie a:visited{}
    #pie a:hover{color:black; text-decoration:underline;background-color:white}
    #pie a:active{color:black}
    #curva-inferior{background-image:url(objetos/curva-inferior.gif);bakcground-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    -----------------------------------------------------------------<<definirmenus>>>
    if (TransMenu.isSupported())
    {
    var ms=new TransMenuSet(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);

    var desplegable1 = ms.addMenu(document.getElementById('desplegable1'));
    desplegable1.addItem('Seccion 1','ruta');
    desplegable1.addItem('Seccion 2','ruta');
    var desplegable2_0 = desplegable1.addMenu(desplegable1.items[1]);
    desplegable2_0.addItem('Sub-Seccion 2.1','ruta');
    desplegable2_0.addItem('Sub-Seccion 2.2','ruta');
    desplegable2_0.addItem('Sub-Seccion 2.3','ruta');
    desplegable1.addItem('Seccion 3','ruta');
    desplegable1.addItem('Seccion 4','ruta');
    desplegable1.addItem('Seccion 5','ruta');
    var desplegable5_0 = desplegable1.addMenu(desplegable1.items[4]);
    desplegable5_0.addItem('Sub-Seccion 5.1','ruta');

    var desplegable2 = ms.addMenu(document.getElementById('desplegable2'));
    desplegable2.addItem('Seccion 1','ruta');

    var desplegable3 = ms.addMenu(document.getElementById('desplegable3'));
    desplegable3.addItem('Seccion 1','ruta');


    TransMenu.renderAll();
    }

    -----------------------------------------------------------------<<<numero de menus>>>

    function init()
    {
    if (TransMenu.isSupported())
    {
    TransMenu.initialize();

    desplegable1.onactivate = function() { document.getElementById('desplegable1').className = 'hover'; };
    desplegable1.ondeactivate = function() { document.getElementById('desplegable1').className = ''; }
    desplegable2.onactivate = function() { document.getElementById('desplegable2').className = 'hover'; };
    desplegable2.ondeactivate = function() { document.getElementById('desplegable2').className = ''; }
    desplegable3.onactivate = function() { document.getElementById('desplegable3').className = 'hover'; };
    desplegable3.ondeactivate = function() { document.getElementById('desplegable3').className = ''; }
    }
    }

    -------------------------------------------------------------------

    gracias por su atencion
    pd. los San.Admins tienes su veladora

  • hola

    mira has unas pruebas para que veas donde está el fallo

    primero

    #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}


    :arrow: quitale un poco de margin donde te puse lo rojo

    :arrow: quitale un poco donde te puse azul tambien
    :arrow: luego si nada de esto funciona agregale una altura donde te puse lo verde

    lo puedes hacer asi:

    height:100px

    puedes ir moviendo esa cantidad, segun te paresca

    ya me contarás cual fué la solucion

    saludos
    Le falta abrir un
  • antes de la segunda sección en el div de Navegación:




  • seccion1
  • <a id="desplegable2"href="#"> ...............

    Ahí está en ROJO

    Suerte!
  • Hola

    he checado tu mp

    y si.... veo que 100px de ancho es demasiado :wink:

    pero..... solo es para probar

    ahora unicamente vas reduciendo poco a poco esa cantidad
    por ejemplo..

    90px
    85px
    75px
    etc. etc.

    asi, hasta que quedes conforme con la altura

    saludos