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)

Submenu na plaatsen film wel in IE niet FF

None
8 antwoorden
  • Hoi,

    Op een website (in testfase) ben ik .wmv filmpjes aan het plaatsen. Rechts is het menu met submenu's d.m.v. hover-effect. In IE gaat het goed, maar met FF komen de submenu's onder de video.

    De relevante gedeeltes van het CSS alsmede een pagina heb ik hier vermeld.

    Ik heb alle verschillende dingen uitgeprobeerd, maar geen succes. Heeft iemand de oplossing?

    M.vr.gr., Dalertje

    [code:1:517c852fa3]
    /* CSS Document - styles.css */

    html, body
    {
    height: 100%;
    background: #FFFFFF;
    color: #000000;
    behavior:url("csshover.htc");
    }

    body
    {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    }

    #wrap
    {
    position: absolute;
    height: 100%;
    width: 100%;
    }

    #header
    {
    position: absolute;
    top: 0;
    left: 0;
    height: 11em;
    width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    z-index: 3;
    }

    #search span
    {
    font-size: 14px;
    }

    #nav
    {
    margin: 0;
    padding: 0;
    position: relative;
    display:block;
    float: right;
    width: 20%;
    background-color: #C7E6E0;
    z-index: 8;
    padding-top: 10em;
    height: 2000%;
    }

    #nav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #248C73;
    text-decoration: none;
    display: block;
    }

    #nav a:hover
    {
    color: #003300;
    background-image: url(../knoppen/triangle.gif);
    background-repeat: no-repeat;
    background-position: right;
    }

    .subnav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 200;
    display: block;
    width: 13em;
    padding: 0;
    margin: 0;
    }

    #nav ul
    {
    text-align: left;
    list-style-type: none;
    padding-top: 0px;
    margin-top: 0px;
    padding-left: 15px;
    margin-left: 15px;
    padding: .2em .1em;
    }

    #nav ul ul
    {
    position: absolute; left: -19.1em; top: 0em;
    }

    #nav li
    {
    position: relative;
    padding: .3em;
    }

    div#nav ul ul
    {
    display: none;
    /* z-index: 10;*/
    background-color: #C7E6E0;
    border-style: groove;
    border-width: thin;
    }

    div#nav ul li:hover ul
    {
    display: block;
    }

    /* content styles */


    #content
    {
    position: absolute;
    float: left;
    width: 75%;
    margin-left: 4px;
    margin-right: 0px;
    padding-left:4px;
    padding-right: 0px;
    padding-top: 11em;
    padding-bottom: 11em;
    }

    /* Kop van de content */

    .testclass
    {
    color: #31A286;
    font: 28px arial,helvetica;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    z-index: 1000;
    }

    #test
    {
    position: absolute;
    top: 4em;
    left: 46%;
    width: 10em;
    text-align: left;
    }


    /* Positie m.b.t. de video's bij de diverse disciplines */

    #video
    {
    position: absolute; left: 60%;
    }

    neurologie.php

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Neurologen van het MS Centrum</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />

    <script src="javascript/search.js" type="text/javascript" language="javaScript"></script>

    </head>

    <body>

    <div id="wrap">
    <div class="testclass" id="test">Neurologie</div>

    <?php
    include('animatie.php');
    ?>

    <div id="header">

    <?php
    include('header.php');
    ?>

    </div>
    <div id="content">
    <div id="video">
    <h2 class="big">Introductiefilm</h2>

    <object name="MediaPlayer" width="320" height="304" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" standby="Loading Microsoft Windows Media Player components…" type="application/x-oleobject">
    <param id="_ctl8_XboxTvWebpartXml__ctl0__ctl8_MediaPlayer_MediaPlayerUrlParam" name="URL" value="neuroloog.wmv" />
    <param name="AutoStart" value="False" />
    <param name="uiMode" value="full" />
    <embed src="video/neuroloog.wmv" width="320" height="304" autostart="False" url="video/neuroloog.wmv" uimode="full" name="MediaPlayer"></embed>
    </object>
    <form name="Form1" method="post" action="neuroloog.wmv?NRMODE=Published&NRORIGINALURL=%2fen-us%2fxboxtv%2fdefault%2ehtm&NRNODEGUID=%7bFE14DB3B-E42F-4A4F-9C9B-01E54903670B%7d&NRCACHEHINT=Guest&level1=enushome&level2=videothird&level3=worms3d&t=4688&v=82405" language="javascript" onsubmit="if (DefaultButton_RequireOwnPostback(this) ) { return false; }; " id="Form1">
    </form>
    </div>


    <span class="big">De neuroloog biedt de pati&euml;nt:</span>

    <ul>
    <li>het stellen van een diagnose en informatie <br />
    over de diagnose;</li>
    <li>medische begeleiding;</li>
    <li>uitleg over het doel van een onderzoek;</li>
    <li>uitleg over het doel en de (bij)werking van een <br />
    behandeling en eventuele alternatieven;</li>
    <li>de prognose van de ziekte en het duiden van <br />
    klachten en symptomen;</li>
    <li>het opstellen van een behandelplan.</li>
    </ul>

    <p><a href="neuroloog.php">de neurologen</a></p>



    <form action="">
    <input type="button" value="Terug Naar Vorige Pagina" style="font-family: Arial; font-size: 10pt; font-weight: bold"
    onclick="javascript: history.go(-1)">
    </form>

    </div>
    <div id="nav">
    <?php
    include('navigatie.php');
    ?>
    </div>
    </div>


    </body>
    </html>

    [/code:1:517c852fa3]
  • Waar is je navigatie in je html? En in IE werkt het menu momenteel sowieso niet, tenminste, als je een uitklapmenu bedoelt.
    Verder zie ik diverse malen 'position: absolute' staan, terwijl absoluut positioneren niet nodig is, en gebruik van z-index dat ook niet nodig is, zoals jou reeds in een ander topic als tip is meegegeven. Een voorbeeld van wanneer z-index wel nuttig kan zijn, zie je in 24 ways: Z's not dead baby, maar in jouw layout is voor zover ik zie, geen overlappend vlak te zien.

    P.S. wil je je bericht even bijwerken en de code tussen code-tags zetten?
  • Hoi,

    De code heb ik nu op de juiste manier geplaatst. Excuses, ik was de tags helemaal vergeten.

    Voor de duidelijkheid is dit het tijdelijke adres. Zo wordt het duidelijk wat ik bedoel met waarom het submenu in IE (is wel werkend gemaakt met hover) wel boven de video komt en in FF niet.

    Nog even antwoorden op de opmerkingen van Boelieboelie: N.a.v. jouw antwoorden in mijn vorige topic heb ik de z-indexen tot een minimum beperkt, maar ik krijg het niet voor elkaar om ze helemaal weg te halen. Absoluut positioneren is toch geen probleem? Tevens is het toch zo als je iets op een specifieke plaats wilt plaatsen dat je dan alleen absolute of relatieve positionering kunt gebruiken? Of heb ik dit helemaal mis? De html van de navigatie staat in een aparte file genaamd navigatie.php. Deze wordt ook aangeroepen. De code staat hieronder.
    [code:1:4e6213164c]
    <ul>
    <li><a href="centrum.php" title="het MS centrum">het centrum</a></li>
    <li><a href="#" title="ons team">ons team</a>
    <ul>
    <li class="subnav"><a href="discipline_neurologie.php" title="Discipline neurologie">Neurologen</a></li>
    <li class="subnav"><a href="discipline_consulent_nu.php" title="Consulent neuro-urologie">Consulent neuro-urologie</a></li>
    <li class="subnav"><a href="discipline_consulent_nr.php" title="Consulent neuro-radiologie">Consulent neuro-radiologie</a></li>
    <li class="subnav"><a href="research_geneesmiddelenstudies.php" title="Geneesmiddelenstudies">Geneesmiddelenstudies</a></li>
    <li class="subnav"><a href="discipline_verpleging.php" title="Verpleegkundigen">Verpleegkundigen</a></li>
    <li class="subnav"><a href="discipline_psychologie.php" title="Psychologen">Psychologen</a></li>
    <li class="subnav"><a href="discipline_consulent_sz.php" title="Consulent sociale zekerheid">Consulent sociale zekerheid</a></li>
    <li class="subnav"><a href="discipline_dietetiek.php" title="Dietist">Dietist</a></li>
    <li class="subnav"><a href="discipline_ergotherapie.php" title="Ergotherapeut">Ergotherapeut</a></li>
    <li class="subnav"><a href="discipline_infotheek.php" title="Infotheek">Infotheek</a></li>
    <li class="subnav"><a href="secretariaat.php" title="Secretariaat">Secretariaat</a></li>
    <li class="subnav"><a href="staf.php" title="Staf">Staf</a></li>
    </ul>
    </li>
    <li><a href="uitleg_over_ms.php" title="uitleg over MS">uitleg over MS</a></li>
    <li><a href="behandeling_van_ms.php" title="behandeling van MS">behandeling van MS</a></li>
    <li><a href="#" title="onderzoek">onderzoek</a>
    <ul>
    <li class="subnav"><a href="wetenschappelijk_onderzoek.php" title="wetenschappelijk onderzoek">wetenschappelijk onderzoek</a></li>
    <li class="subnav"><a href="geneesmiddelenstudies.php" title="geneesmiddelenstudies">geneesmiddelenstudies</a></li>
    </ul>
    </li>
    <li><a href="#" title="publicaties">publicaties</a>
    <ul>
    <li class="subnav"><a href="publicaties.php" title="publicaties">publicaties</a></li>
    <li class="subnav"><a href="downloads.php" title="downloads">downloads</a></li>
    </ul>
    </li>
    <li><a href="links.php" title="links">links</a>
    </li>
    <li><a href="http://www.ms-steunfonds.nl" title="MS Steunfonds">MS steunfonds</a></li>
    </ul>
    [/code:1:4e6213164c]

    M.vr.gr., Dalertje
  • Hoi,

    Nog een laatste toevoeging c.q. wijziging: de z-indexen heb ik op 1 na tot nul gereduceerd. Alsmede heb ik een position: absolute verwijderd.

    M.vr.gr., Dalertje
  • [quote:798adca201="dalertje"]Tevens is het toch zo als je iets op een specifieke plaats wilt plaatsen dat je dan alleen absolute of relatieve positionering kunt gebruiken? [..][/quote:798adca201]Aan je stylesheet te zien, probeer je met wat willekeurige CSS-properties die wat met layout te maken hebben de plek van een element te bepalen. En als het werkt, dan laat je het staan, ongeacht of je methode klopt. Zo probeer je bijvoorbeeld de ene float relatief en een andere absoluut te positioneren. [edit]Floats werken niet op absoluut gepositioneerde elementen.[/edit]

    Als je iets op de goede plek wilt krijgen, is het vaak niet nodig om absoluut te positioneren. Dat kan ook door met margins te werken. Zet gewoon een element neer in je HTML-code (bijv. een div), geef het voor de duidelijkheid een background-color, kijk waar en hoe hij valt en geef aan de hand daarvan afmetingen en/of margins mee. Dan zul je zien dat absoluut positioneren vaak helemaal niet nodig is.

    Ik weet geen oplossing voor het menu dat achter je video valt, het lijkt een beetje op het probleem met iframes en menu's of comboboxen en menu's (daar valt ook vanalles achter). Je kunt natuurlijk wel je video en de tekst omkeren om het probleem te omzeilen. Misschien weet iemand anders het, ik ben benieuwd.

    Nog gefeliciteerd met het weghalen van de z-indexen, da's mooi.
  • Hoi,

    Met je eerste stuk Boelieboelie met je opmerkingen ga ik mee aan de slag.
    Het omdraaien van de video's dacht ik ook aan als er geen oplossing zou komen.
    Wel prettig dat ik de z-indexen heb kunnen verwijderen.

    Eigenlijk heb ik nog een andere vraag. Kan/moet ik die hier stellen of moet er een nieuw topic geplaatst worden? Toch stel ik 'm hier. In ieder file heb ik een .php geincluded (b.v. navigatie.php). Deze laatste .php is zonder de doc-headers (niet het juiste woord, maar ik kan nu even niet op de juiste komen). Deze komt dus in de Quirksmode. Is de opzet van dit geinclude .php-bestand juist?

    M.vr.gr., Dalertje
  • In een include hoef je geen doctype te zetten wanneer het bestand waarin de include wordt aangeroepen al een doctype heeft. In jouw geval heeft de include dus geen doctype nodig.

    Codetechnisch gezien klopt je navigatielijst volgens mij, maar dat kun je zelf checken met de W3C-validator.
  • Oke dank je. Ik ben weer wat wijzer.

    M.vr.gr., Dalertje

Beantwoord deze vraag

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