6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    hiltsje

    css: positie horizontaal submenu niet relatief

    Ik ben met een website bezig waar ik een horizontaal css menu met horizontale sublinks in wil hebben. doormiddel van een tabel staat de website altijd in het midden wanneer je het browser venster vergroot of verkleind.
    Ik heb de volgende code:

    [code:1:ab60fdc5c0]
    <style>

    #nav li {
    /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 4px;
    }

    #nav li.off ul, #nav li.on ul {
    /*hide the subnavs*/
    display: block;
    font-size: 13.5px;
    }

    #nav li a {
    /*for all links in the list*/
    color: #EEEEEE;
    font-weight: normal;
    display: inline;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    }
    #nav li.off ul, #nav li.on ul {
    /*put the subnavs below and hide them all*/
    display: none;
    position: absolute;
    top: 33px;
    height: 0px;
    left: 60px;
    padding-top: 0px;
    font-size: 13.5px;
    }
    #nav li.off2 ul, #nav li.on ul {
    /*put the subnavs below and hide them all*/
    display: none;
    position: absolute;
    top: 33px;
    height: 0px;
    left: 440px;
    padding-top: 0px;
    font-size: 13.5pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    }

    #nav li.on ul {
    /*display active subnav list*/
    display: block;
    }
    #nav li.on ul a, #nav li.off ul a {
    /*ie doesn’t inherit the float*/
    color: #EEEEEE;
    margin-right: 4px;
    font-size: 13.5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 25px;
    right: 50px;
    }

    #nav li.on2 ul a, #nav li.off2 ul a {
    /*ie doesn’t inherit the float*/
    color: #EEEEEE;
    margin-right: 4px;
    font-size: 13.5px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 25px;
    right: 0px;
    }

    #nav li.on ul {
    /*display the current topic*/
    display: block;
    font-size: 13.5px;
    }

    #nav li.off:hover ul {
    /* display the other topics when
    their parent is hovered */
    display: block;
    z-index: 6000;
    }
    #nav li.off2:hover ul {
    /* display the other topics when
    their parent is hovered */
    display: block;
    z-index: 6000;
    }

    .style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13.5px;
    font-weight: bold;
    color: #EEEEEE;
    }
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    a:active {
    text-decoration: none;
    }
    </style>
    </head>

    <body>
    <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center" valign="middle"><ul class="style1" id="nav">
    <li class="off"> <a href="#">Home</a> </li>
    <li class="off"> <a href="#">Producten</a>
    <ul>
    <li><a href="#">Administratie</a> </li>
    <li><a href="#">Bedrijfsvoering</a> </li>
    <li><a href="#">Specifieke onderzoeksvraagstukken</a> </li>
    </ul>
    </li>
    <li class="off"> <a href="#">Accent team </a> </li>
    <li class="on"> <a href="#" class="off">Klantreferenties</a> </li>
    <li class="off"> <a href="#">Starters</a> </li>
    <li class="off2"> <a href="#">Route</a>
    <ul>
    <li><a href="#">Vestiging Drachten</a> </li>
    <li><a href="#">Vestiging Groningen</a> </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul></td>
    </tr>
    </table>
    </body>
    [/code:1:ab60fdc5c0]

    Wanneer ik nu met het browser venster verschuif blijven de sublinks staan en schuiven niet mee met de website. ik denk dat ze vanuit een hoek worden berekend van het venster. Mijn vraag is of er ook een manier is om de sublinks relatief te plaatsen. zodat ze meegaan wanneer je het browser venster groter of kleiner maakt.

    Bijdrager
    iJoost

    Excusez le mot, maar wat een zootje!

    Tags die wel gesloten worden, tags die niet weer gesloten worden, tags die gesloten worden die helemaal niet eens geopend zijn. Maak er eerst eens even fatsoenlijk HTML van. Dikke kans dat het dan al een stuk beter gaat.;-)

    [code:1:4f18c245e4] <ul class="style1" id="nav">
    <li class="off">
    <a href="#">Home</a>
    <li class="off">
    <a href="#">Producten</a>
    <ul><li><a href="#">Administratie</a>
    </li>
    <li><a href="#">Bedrijfsvoering</a>
    </li>
    <li><a href="#">Specifieke onderzoeksvraagstukken</a>
    </li>
    </ul>
    </li>
    <li class="off">
    <a href="#">Accent team </a>
    </li>
    <li class="on">
    <a href="#" class="off">Klantreferenties</a>
    </li>
    <li class="off">
    <a href="#">Starters</a>
    <li class="off2">
    <a href="#">Route</a>
    <ul><li><a href="#">Vestiging Drachten</a>
    </li>
    <li><a href="#">Vestiging Groningen</a>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul> [/code:1:4f18c245e4]

    Bijdrager
    JSchut

    Dit komt omdat de absolute positie nu niet aan de hand van je parent div gaat.
    Zet ‘position: relative’ eens in je #nav li
    Dan positioneren ze iig onder het menu dan kan je de waarde ‘left’ in je submenu’s op 0 zetten.
    Dan moet je er nog wel voor zorgen dat alles netjes naast elkaar gezet wordt.

    En er inderdaad even voor zorgen dat alles wat je opent ook netjes afgesloten wordt.

    Bijdrager
    hiltsje

    dankjewel voor je reactie
    het submenu heb ik nu relatief alleen nu is het probleem wanneer ik over het menu ga verdringt het submenu het hoofdmenu dus die schuift een heel stuk op wanneer ik over 1 van de menu knopjes ga.

    Bijdrager
    JSchut

    Hier heb ik wat voor je gemaakt…..
    Moet je alleen nog ff goed maken voor alle browsers en zorgen dat de mouse over er weer in komt.

    [code:1:afebe827f0]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <HTML>
    <HEAD>
    <TITLE> Menu </TITLE>
    </HEAD>
    <BODY>
    <style>
    html, body {
    margin: 0px 0px 0px 0px;
    width: 100%;
    }

    #content {
    margin: 200px 200px 200px 200px;
    width:100%;
    }

    #nav {
    position: relative;
    }

    #nav li {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    position: relative;
    display: block;
    }

    #nav li ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 18px;
    left: 0px;
    }

    #nav li a {
    color: #000000;
    font-size: 11px;
    font-weight : bold;
    padding: 0px 8px 0px 0px;
    }

    #nav li a:hover {
    color: #EE33EE;
    }

    </style>
    </head>

    <body>
    <div id="content">
    <ul id="nav">
    <li>
    <a href="#">Home</a>
    </li>
    <li>
    <a href="#">Producten</a>
    <ul class="test2">
    <li class="test">
    <a href="#">Administratie</a>
    </li>
    <li>
    <a href="#">Bedrijfsvoering</a>
    </li>
    <li>
    <a href="#">Specifieke onderzoeksvraagstukken</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="#">Accent team</a>
    </li>
    <li>
    <a href="#" class="off">Klantreferenties</a>
    </li>
    <li>
    <a href="#">Starters</a>
    </li>
    <li>
    <a href="#">Route</a>
    <ul>
    <li>
    <a href="#">Vestiging Drachten</a>
    </li>
    <li>
    <a href="#">Vestiging Groningen</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </HTML>
    [/code:1:afebe827f0]

    Bijdrager
    hiltsje

    bedankt,
    het is mij gelukt met dit script

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.