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)

disjointed menu

Anoniem
Drewster
5 antwoorden
  • Hallo allen,

    ik kreeg een leuk idee en ben gaan zoeken of dit zou kunnen, als je over een knop (div) gaat dat niet alleen deze knop veranderd (a:hover) maar ook een andere div veranderd.

    Ik kwam erachter dat dit kan met behulp van <span>, en zo heb ik dus een menu gemaakt waar twee dingen tegelijk veranderen.

    Het probleem:
    Internet Explorer :roll:

    In firefox werkt alles goed maar IE maakt het leven weer zuur. ik heb lang zitten prutsen maar het wil niet werken, iemand een tip??

    –>[b:81e1b73679]Online voorbeeld[/b:81e1b73679]<–

    Probleem:
    [img:81e1b73679]http://www.tedzwart.nl/menu.jpg[/img:81e1b73679]
  • Gebruik conditional comments om IE only style te schrijven.
  • [quote:9b3e2425cc="Drewster"]Gebruik conditional comments om IE only style te schrijven.[/quote:9b3e2425cc]

    Yup snap ik, gebruik ik altijd, maar was tot nu toe niet gelukt met dit menu. Daarom heb ik het weer weg gehaald.

    Iemand een idee over het oplossen van het probleem?
  • Okay, ik had er ff zin in: [code:1:71a21186aa]#container {
    margin: 0 auto;
    width: 150px;
    }
    .normaal {
    position: relative;
    background: url(tekstbalk.gif) no-repeat center center;
    width: 150px;
    height: 29px;
    text-align:center;
    color:#FFF;
    font-weight:bold;
    z-index: 1;
    }
    .gallery ul{
    list-style:none;
    width: 150px;
    height: 118px;
    padding: 0;
    margin: 0;
    }
    .gallery li {
    display: block;
    float:left;}
    .gallery li a{
    display: block;
    width: 75px;
    height: 59px;
    background:#fff;
    }
    .gallery li.taart1 a, .gallery li.taart2 a {
    background: url(button1.gif) no-repeat top left;
    z-index: 3;
    text-decoration: none;
    }
    .gallery li.taart2 a {
    float: right;
    }
    .gallery li.taart1 a:hover, .gallery li.taart2 a:hover{
    background-position: bottom left;
    }
    .gallery a span {
    visibility:hidden}
    .gallery a:hover span {
    visibility:visible}
    .gallery a span em {
    position: absolute;
    top: 8px; /* top: 15px voor ie7*/
    left: 50%;
    margin-left: -75px;
    width: 150px;
    height: 29px;
    text-align:center;
    color:#FFF;
    font-weight:bold;
    font-style:normal;
    z-index: 3;
    display: block;
    background: url(tekstbalk.gif) no-repeat center center;
    }[/code:1:71a21186aa]Je CSS was een beetje een zooitje, moeilijk leesbaar en hier en daar stonden er dingen dubbel of overbodig in. Je moet dit alleen waarschijnlijk wel aanpassen aan je situatie…

    Edit:[i:71a21186aa]En je moet ook een goede doctype gebruiken, weet niet waar de jouwe vandaan komt hij is niet compleet:[/i:71a21186aa][code:1:71a21186aa]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">[/code:1:71a21186aa]
  • Heeeel erg bedankt Drewster!,

    Ik ga het vanmiddag bekijken en kijken wat ik (allemaal) fout heb gedaan.
    Bedankt dat je ondanks de rommelige css hebt willen helpen :)

Beantwoord deze vraag

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