Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

menuutje in CSS: ik krijg t niet goed

marientje
9 antwoorden
  • Ik probeer een menuutje mbv CSS te maken, maar ik loop een beetje vast
    Dit is mijn code:

    nav.php:
    [code:1:95325e52ae]
    <html>
    <head>
    <link href="nav3.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <ul id="nav">
    <li class="off"><a href="?pagina=home">Home</a></li>
    <li class="off"><a href="#">About</a>
    <ul>
    <li><a href="?pagina=hethaas">Het Haas</a></li>
    <li><a href="?pagina=geschiendenis">Geschiedenis</a></li>
    <li><a href="?pagina=dirigent">Dirigent Bas Pollard</a></li>
    <li><a href="?pagina=hetbestuur_main">Huidig Bestuur</a></li>
    <li><a href="?pagina=oudbesturen">Oud-besturen</a></li>
    </ul>
    </li>
    <li class="off"><a href="#">Programma</a>
    <ul>
    <li><a href="#">Huidig Programma</a></li>
    <li><a href="#">Programma Toekomst</a></li>
    <li><a href="#">Programma Verleden</a></li>
    </ul>
    </li>
    <?php /*if($login)*/ echo("
    <li class=\"off\"><a href=\"#\">Leden Only</a>
    <ul>
    <li><a href=\"#\">Leden Home</a></li>
    <li><a href=\"#\">Profiel</a></li>
    <li><a href=\"#\">Forum</a></li>
    <li><a href=\"#\">Wistjedatjes</a></li>
    <li><a href=\"#\">Uitloggen</a></li>
    </ul>
    </li>
    "); ?>
    </ul>
    [/code:1:95325e52ae]

    nav3.css:
    [code:1:95325e52ae]
    #nav{
    font: normal 12px/24px Tahoma, Arial, Helvetica, sans-serif;
    text-align: center;
    }
    #nav li {
    list-style-type: none;
    }
    #nav li.off {
    /*float the main list items*/
    display: block;
    padding: 5px 15px 5px 15px;
    float: left;
    background-color: #000000;
    }
    #nav li.off ul {
    /*hide the subnavs*/
    display: none;
    position: relative;
    }
    #nav li a {
    text-decoration: none;
    color: #00FF00;
    display: block;
    width: auto;
    height: 25px;
    }

    #nav li:hover{
    background-color: #00FF00;
    }
    #nav li.off:hover a{
    color: #000000;
    }
    #nav li.off:hover ul {
    /* display the other topics when their parent is hovered */
    display: block;
    }
    #nav li li {
    background-color: #000000;
    color: #00FF00;
    }
    [/code:1:95325e52ae]
    en hier hoe t er dan uit komt te zien.
    Problemen zijn:
    * het hoofdmenu zet uit wanneer een submenu tevoorschijn komt, wellicht is dat op te lossen door vaste breedtes op te geven
    * een submenu wordt in een blokje geplaatst: dat is natuurlijk niet de bedoeling en de kleuren kloppen niet.
    Ik weet ook niet hoe ik adt goed moet krijgen, heb al een hoop geprobeerd. Misschien wat classes toevoegen?

    Ik hoop dat iemand met een goede en duidelijk oplossing komt. Mijn dank zal groot zijn!

    \edit: ik zie dat t er in IE helemaal niet uitziet zoals bedoeld, iemand een oplossing?
    (De bedoeling is een drop-down-menu)
  • geduld is een schone zaak… maar t mijne is gauw op

    Is t niet duidelijk wat ik wil? Kan t niet? MOet t helemaal anders? Of is t gewoon heel simpel. Laat t me weten!
  • Heb nu ff geen tijd om goed te kijken, maar ik zie bijv. dat je de <li>'s geen width hebt meegegeven, dus die veranderen mee als de inhoud van de <li> meeverandert.
    Kijk anders ff in het artikel Son of Suckerfish dropdowns voor een voorbeeld.
  • ik ben inmiddels wat verder gekomen
    Het ziet er nu ZO uit.

    In IE klapt t menu nog niet uit ?!? In FF werkt dat al wel.
    Maar het submenu is enigszins verplaatst. Hoe los ik dat op?
    CSS-code:
    [code:1:0377daf02a]
    #nav {
    font: normal 12px/24px Tahoma, Arial, Helvetica, sans-serif;
    text-align: left;
    }
    #nav li {
    list-style-type: none;
    display: block;
    padding: 5px 15px 5px 15px;
    float: left;
    background-color: #8B0000;
    width: 100px;
    }
    #nav li a {
    text-decoration: none;
    color: #DED9C9;
    display: block;
    width: auto;
    height: 25px;
    }
    #nav li ul {
    position: relative;
    display: none;
    }
    #nav li:hover, #nav li.over {
    background-color: #DED9C9;
    }
    #nav li:hover ul, #nav li.over ul {
    display: block;
    }
    #nav li:hover a{
    color: #8B0000;
    }
    #nav li:hover ul li a{
    color: #DED9C9;
    }
    #nav li:hover ul li:hover a{
    color: #8B0000;
    }[/code:1:0377daf02a]
  • Het werkt niet in IE, omdat :hover in IE alleen op hyperlinks werkt. Er is (alleen voor IE) een javascript nodig om het te laten werken, zie de link die ik reeds gaf, of:
    www.seoconsultants.com/css/menus/horizontal/
    www.xs4all.nl/~peterned/csshover.html

    [edit]foutieve suggestie weggehaald, nieuwe suggestie toegevoegd:
    [code:1:e9b18687ca]#nav {
    font: normal 12px/24px Tahoma, Arial, Helvetica, sans-serif;
    text-align: left;
    padding: 0;
    margin: 0;
    }

    #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav a {
    display: block;
    width: 10em;
    color: #0F0;
    text-decoration: none;
    margin: .5em 1em;
    }

    #nav li {
    float: left;
    width: 14em;
    background-color: #000;
    }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    #nav li:hover, #nav li.over {
    background-color: #00FF00
    }
    #nav li:hover ul, #nav li.over ul {
    display: block;
    }
    #nav li:hover a{
    color: #000000;
    }
    #nav li:hover ul li a{
    color: #00FF00;
    }
    #nav li:hover ul li:hover a{
    color: #000000;
    }[/code:1:e9b18687ca]Zo werkt 'ie bij mij wel… Heb 'm gewoon opnieuw gemaakt m.b.v. de CSS in Son of Suckerfish dropdowns en je eigen stylesheet. (kon het niet laten zelf ff te proberen.)
    [/edit]
  • na wat aanpassingen werkt t idd zoals bedoeld.
    Maar er treedt nog een verschuiving. De geneste ul moet dus wat naar links. Hoe moet dat?

    /edit: en wat naar onderen

    NB: ik heb nog nooit veel met CSS gewerkt, vandaar :D
  • Na wat rommelen heb ik t toch goed gekregen, dacht ik…
    Mbv left: -30px en top: 4px òf margin: bla (dit zijn niet de precieze getallen, maar t gaat om t idee) krijg in FF alles netjes onder elkaar (beide methoden werkten, maar hadden ook nadelen) , maar in IE niet, daar verschuift t dan weer een beetje. :( Wellicht moet ik een heel andere weg op.
    Wie o wie heeft de oplossing?
  • Heb je een voorbeeld online staan? Dat werkt iets makkelijker. Bij mij ziet het menu er in FF (1.0.4) net zo uit als in IE (5.01, 6). Bedoel je die kleine verschuiving als het uitklapt? Die zie ik ook in FF.

    Als iets er in IE anders uitziet dan in FF, dan kun je er ook voor kiezen enkele 'IE-only'-regels in een apart stylesheet te zetten…
  • bedankt! Ik zal er later deze dag nader naar kijken en vertellen wat ik no niet snap…

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.