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)

HTML/CSS Menu'tje in Firefox

Torrentus
6 antwoorden
  • Hallo leden van Computer!Totaal Forum,

    Ik heb weer een vraag voor jullie, want ik kom er zelf niet uit.
    Ik probeer een mooi menu te maken voor een website, in dit geval http://www.rsgnov.nl, Maar ik krijg de handel niet compatibel met firefox.

    Zo vind je op www.rsgnov.nl nu het volgende menu:

    [code:1:220dcbc08c]<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="nl">
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta NAME="Description" CONTENT="RSG Noord Oost Veluwe is een brede scholengemeenschap voor voortgezet onderwijs met afdelingen atheneum Tweetalig, atheneum, havo, sportklas, vmbo tl / kader / basis en lwoo. Postadres Postbus 419 8160 AK Epe tel. 0578-612094, fax 0578-621330, email mail@rsgnov.nl . Rector J. Hatzman">
    <meta NAME="KeyWords" CONTENT="RSG Noord Oost Veluwe, Springborn, Hammershoek, Epe, TTO, tweetalig, sportklas, Engels, voortgezet onderwijs, VO, middelbaar onderwijs, onderwijs, education, vwo, atheneum, havo, vmbo, TL, kader, lwoo, groen, vacature, vacatures">
    <title>Welkom bij RSG Noord Oost-Veluwe in Epe</title>

    <link rel="stylesheet" type="text/css" href="css/tekst.css">
    <style>
    /* CoolMenus 4 - default styles - do not edit */
    .clCMEvent{position:absolute; width:99%; height:99%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:visible}
    .clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
    /* CoolMenus 4 - default styles - end */

    /*Style for the background-bar*/
    .clBar{position:absolute; width:10; height:10; background-color:"#003366"; layer-background-color:"#003366"; visibility:hidden}

    /*Styles for level 0*/
    .clLevel0, .clLevel0over{position:absolute; padding:2px; font-family:verdana,arial,helvetica; font-size:8pt}
    .clLevel0{background-color:#003366; layer-background-color:Navy; color:white;}
    .clLevel0over{background-color:#336699; layer-background-color:#336699; color:Yellow; cursor:pointer; cursor:hand; }
    .clLevel0border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}

    /*Styles for level 1*/
    .clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:verdana,arial,helvetica; font-size:8pt}
    .clLevel1{background-color:Navy; layer-background-color:Navy; color:white;}
    .clLevel1over{background-color:#336699; layer-background-color:#336699; color:Yellow; cursor:pointer; cursor:hand; }
    .clLevel1border{position:absolute; z-index:500; visibility:hidden; background-color:#006699; layer-background-color:#006699}

    /*Styles for level 2*/
    .clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:verdana,arial,helvetica; font-size:8pt; font-weight:bold}
    .clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
    .clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:Yellow; cursor:pointer; cursor:hand; }
    .clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
    </style>


    <!– saved from url=(0022)http://internet.e-mail –>
    <html>
    <script>
    if(navigator.userAgent.indexOf("Firefox") != -1)
    {
    window.location = "http://www.rsgnov.nl/indexfirefox.html";
    }
    </script>
    </html>




    <script language="JavaScript1.2" src="coolmenus4.js">
    /*****************************************************************************
    Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)

    DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
    Version 4.0_beta
    This script can be used freely as long as all copyright messages are
    intact.

    Extra info - Coolmenus reference/help - Extra links to help files ****
    CSS help: http://192.168.1.31/projects/coolmenus
    eference.asp?m=37
    General: http://coolmenus.dhtmlcentral.com
    eference.asp?m=35
    Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
    Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
    Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
    Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
    ******************************************************************************/
    </script>

    </head>
    <body bgcolor="#DDDDBB">
    <div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#DDDDBB" width="900" bordercolordark="#DDDDBB" bgcolor="#EEEEDD" bordercolorlight="#DDDDBB">
    <tr>
    <td width="173">
    <p align="center">
    <img border="0" src="pictures
    sgnoveluwe_icoon.gif" align="right" width="142" height="119"></td>
    <td colspan="9" width="689" valign="top"><b>

    <font COLOR="#066702" size="5">
    <img border="0" src="pictures/fotorechts.gif" align="right" hspace="0" width="322" height="157"></font></b><p>&nbsp;</p>
    <p><b><font COLOR="#066702" size="4">RSG Noord Oost Veluwe
    <align="center">Epe</align="center"></font><align="center"><align="center"><align="center"><font SIZE="4" COLOR="#066702"><br>
    </font></align="center"></align="center"></align="center"></b>
    <align="center"><align="center"><align="center">
    <align="center">
    <align="center">
    <align="center"><font color="#066702" size="2"><b>(tweetalig) atheneum,
    havo, sportklas,<br>

    vmbo (theoretische en gemengde leerweg,<br>
    kaderberoeps, basisberoeps en lwoo)</b></font></align="center"></align="center"></align="center"></align="center"></align="center"></align="center"><p>
    <font size="2" color="#066702"><b>
    <marquee style="color: #003399" width="45%" scrolldelay="180">Open dag op zaterdag 24 januari van 11:00 uur tot 14:00 uur</marquee></b></font></td>
    <td width="20" background="pictures
    echterkant.jpg" align="left"></td>
    </tr>
    <tr>

    <td width="173">
    <p align="center">Website is in onderhoud.<br>
    Bij gebruik van&nbsp; Firefox <br>
    <a target="_top" href="indexfirefox.html">klik hier</a></td>
    <td width="82">&nbsp;</td>
    <td width="51">

    <!– You need all this START — ITEM 0 –>
    <ilayer id="layerMenu0">
    <div id="divMenu0">
    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    <td width="100">
    <!– You need all this START — ITEM 1 –>
    <ilayer id="layerMenu1">
    <div id="divMenu1">
    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    <td width="100">
    <!– You need all this START — ITEM 2 –>
    <ilayer id="layerMenu2">
    <div id="divMenu2">
    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    <td width="88">
    <!– You need all this START — ITEM 3 –>

    <ilayer id="layerMenu3">
    <div id="divMenu3">
    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    <td width="76">
    <!– You need all this START — ITEM 4 –>
    <ilayer id="layerMenu4">
    <div id="divMenu4">
    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    </td>
    <td width="88">
    <!– You need all this START — ITEM 5 –>
    <ilayer id="layerMenu5">

    <div id="divMenu5">
    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    <td width="80">
    <!– You need all this START — ITEM 6 –>
    <ilayer id="layerMenu6">
    <div id="divMenu6">

    <img src="cm_fill.gif" width="6" height="25" alt border="0">
    </div>
    </ilayer>
    <!– END –></td>
    <td width="39">&nbsp;</td>
    <td width="20" background="pictures
    echterkant.jpg"></td>
    </tr>
    </table>
    </center>

    </div>
    <div align="center">
    <center>
    <table width="900" border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0" bgcolor="#EEEEDD" bordercolorlight="#EEEEDD" bordercolordark="#EEEEDD">
    <tr>
    <td width="10">&nbsp;</td>
    <td>
    <iframe name="I1" width="850" height="577" class="klein" align="middle" border="0" frameborder="0" marginwidth="1" marginheight="0,5" style="border: 1px solid #EEEEDD" src="pag1.htm" scrolling="no">
    De browser ondersteunt geen in line frames of is momenteel zodanig geconfigureerd dat in line frames niet kunnen worden weergegeven.</iframe></td>
    <td width="20" background="pictures
    echterkant.jpg"></td>

    </tr>
    <tr>
    <td background="pictures/onderkant.jpg">&nbsp;</td>
    <td background="pictures/onderkant.jpg" height="20">&nbsp;</td>
    <td background="pictures/hoek.jpg">&nbsp;</td>
    </tr>
    </table>
    </center>
    </div>

    <script>
    /***
    This is the menu creation code - place it right after you body tag
    Feel free to add this to a stand-alone js file and link it to your page.
    **/

    //Menu object creation
    oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname

    //Menu properties
    oCMenu.pxBetween=0
    //Using the cm_page object to place the menu —-
    oCMenu.fromLeft=0
    oCMenu.fromTop=0
    oCMenu.rows=1
    oCMenu.menuPlacement=0

    oCMenu.offlineRoot="file:///C|/Inetpub/wwwroot/dhtmlcentral/projects/coolmenus/examples/"
    oCMenu.onlineRoot="/coolmenus/"
    oCMenu.resizeCheck=1
    oCMenu.wait=1000
    oCMenu.fillImg="cm_fill.gif"
    oCMenu.zIndex=0

    //Background bar properties
    oCMenu.useBar=0

    //Level properties - ALL properties have to be spesified in level 0
    oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
    oCMenu.level[0].width="100"
    oCMenu.level[0].height=30
    oCMenu.level[0].regClass="clLevel0"
    oCMenu.level[0].overClass="clLevel0over"
    oCMenu.level[0].borderX=1
    oCMenu.level[0].borderY=1
    oCMenu.level[0].borderClass="clLevel0border"
    oCMenu.level[0].offsetX=0
    oCMenu.level[0].offsetY=0
    oCMenu.level[0].rows=0
    oCMenu.level[0].arrow=0
    oCMenu.level[0].arrowWidth=0
    oCMenu.level[0].arrowHeight=0
    oCMenu.level[0].align="bottom"


    /******************************************
    Menu item creation:
    myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
    *************************************/
    oCMenu.makeMenu('top0','','&nbsp;Home','http://www.rsgnov.nl/pag1.htm','I1')


    oCMenu.makeMenu('top1','','&nbsp;De school','http://www.rsgnov.nl/school.htm','I1')
    oCMenu.makeMenu('sub09','top1','Missie en kernkwaliteiten','http://www.rsgnov.nl/missie.htm','I1')
    oCMenu.makeMenu('sub10','top1','Organisatie','http://www.rsgnov.nl/organisatie.htm','I1')
    oCMenu.makeMenu('sub11','top1','Activiteiten','http://www.rsgnov.nl/activiteiten.htm','I1')
    oCMenu.makeMenu('sub12','top1','MR, OR en panels','http://www.rsgnov.nl/vertegenwoordigingen.htm','I1')
    oCMenu.makeMenu('sub13','top1','Vakantie, verlof en verzuim','http://www.rsgnov.nl/verzuim_en_verlof.htm','I1')
    oCMenu.makeMenu('sub14','top1','Begeleiding en zorg','http://www.rsgnov.nl/leerlingbegeleiding.htm','I1')
    oCMenu.makeMenu('sub15','top1','Veiligheid en voorzieningen','http://www.rsgnov.nl/veiligheid.htm','I1')
    oCMenu.makeMenu('sub16','top1','Mediatheek','http://www.rsgnov.nl/mediatheek/index.htm','I1')
    oCMenu.makeMenu('sub17','top1','Lestijden en activiteiten','http://www.rsgnov.nl/onderwijspraktijk.htm','I1')
    oCMenu.makeMenu('sub18','top1','Studieresultaten en kwaliteit','http://www.rsgnov.nl/studieresultaten.htm','I1')
    oCMenu.makeMenu('sub19','top1','Financiën','http://www.rsgnov.nl/financien.htm','I1')


    oCMenu.makeMenu('top2','','&nbsp;Het onderwijs','http://www.rsgnov.nl/onderwijs.htm','I1')
    oCMenu.makeMenu('sub20','top2','Onderbouw','http://www.rsgnov.nl/onderwijs_onderbouw.htm','I1')
    oCMenu.makeMenu('sub21','top2','Bovenbouw Havo/Vwo','http://www.rsgnov.nl/onderwijs_bovenbouwhavovwo.htm','I1')
    oCMenu.makeMenu('sub22','top2','Bovenbouw Vmbo','http://www.rsgnov.nl/onderwijs_bovenbouwvmbo.htm','I1')
    oCMenu.makeMenu('sub23','top2','Tweetalig Vwo','http://www.rsgnov.nl/tto/index.html','I1')
    oCMenu.makeMenu('sub24','top2','Sportklas','http://www.rsgnov.nl/sportklas/index.htm','I1')
    oCMenu.makeMenu('sub25','top2','Onderwijstijd','http://www.rsgnov.nl/onderwijstijd.htm','I1')
    oCMenu.makeMenu('sub26','top2','Vakkenaanbod en lesuren','http://www.rsgnov.nl/vakkenaanbod.htm','I1')



    oCMenu.makeMenu('top3','','&nbsp;Vacatures','http://www.rsgnov.nl/vacature/vacature_onderwijs.htm','I1')


    oCMenu.makeMenu('top4','','&nbsp;Rooster','http://www.rsgnov.nl
    oosterframe.htm','I1')


    oCMenu.makeMenu('top5','','&nbsp;Webportal','http://80.127.171.170/')


    oCMenu.makeMenu('top6','','&nbsp;Webmail','https://80.127.171.163/webmail/src/login.php')



    //Leave this line - it constructs the menu
    oCMenu.construct()


    //Extra code to find position:
    function findPos(num){
    //alert(num)
    if(bw.ns4){ //Netscape 4
    x = document.layers["layerMenu"+num].pageX
    y = document.layers["layerMenu"+num].pageY
    }else{ //other browsers
    x=0; y=0; var el,temp
    el = bw.ie4?document.all["divMenu"+num]:document.getElementById("divMenu"+num);
    if(el.offsetParent){
    temp = el
    while(temp.offsetParent){ //Looping parent elements to get the offset of them as well
    temp=temp.offsetParent;
    x+=temp.offsetLeft
    y+=temp.offsetTop;
    }
    }
    x+=el.offsetLeft
    y+=el.offsetTop
    }
    //Returning the x and y as an array
    return [x,y]
    }
    function placeElements(){
    //Changing the position of ALL top items:
    pos = findPos(0)
    oCMenu.m["top0"].b.moveIt(pos[0],pos[1])
    pos = findPos(1)
    oCMenu.m["top1"].b.moveIt(pos[0],pos[1])
    pos = findPos(2)
    oCMenu.m["top2"].b.moveIt(pos[0],pos[1])
    pos = findPos(3)
    oCMenu.m["top3"].b.moveIt(pos[0],pos[1])
    pos = findPos(4)
    oCMenu.m["top4"].b.moveIt(pos[0],pos[1])
    pos = findPos(5)
    oCMenu.m["top5"].b.moveIt(pos[0],pos[1])
    pos = findPos(6)
    oCMenu.m["top6"].b.moveIt(pos[0],pos[1])

    //Setting the fromtop value
    oCMenu.fromTop = pos[1]
    }
    placeElements()
    //Setting it to re place the elements after resize - the resize is not perfect though..
    oCMenu.onafterresize="placeElements()"
    </script>
    </body>
    </html>
    </html>
    [/code:1:220dcbc08c]

    En dat menu werkt goed in IE 6/7, maar het moet ook goed wreken in Firefox. Heeft iemand enig idee hoe ik dat moet fixen?

    Met vriendelijke groeten,
    Remco






  • Wat werkt er precies niet? Ik heb de pagina zojuist in FireFox bekeken (3.1 Beta 2) en daar werkt het menu prima (inclusief submenu's). De pagina wordt exact hetzelfde getoond als in IE (8 Beta 2)
  • ik bedoel dat in firefox (zie screen) het menubalkje helemaal linksboven komt, terwijl het netjes op de plek moet komen waar het in IE7 ook komt

    (Op de plek waar in firefox "You need all this to start 6" staat.

    [b:5a17cd0214]Screen:[/b:5a17cd0214]
    Klik
  • Hm dit is heel vreemd. We lijken dezelfde versie FF te gebruiken.. maar bij mij staat het menu echt op dezelfde plek als in IE.
  • Dat is raar, want op meerdere PC's hier is dat het geval, ook buiten mijn netwerk ergens anders.. Heb je misschien 'n aparte Plug-In geinstalleerd?
  • Bij mij ziet het er verschillende uit (maar de menu's staan wel op dezelfde (goede) plek).
    In FF3 staan alle menu items tegen elkaar aan, gescheiden door een dunne zwarte lijn In IE7 staan ze verder uit elkaar zodat ik de achtergrondkleur er tussendoor zie. Verder staat in IE7 de complete sidebar iets meer naar rechts dan in FF3. Het topmenu is in IE7 ook iets lager dan in FF3

    Ik zie dat je de boel in tabellen hebt staan. Wellicht gaat daar ergens iets niet goed met de margins of paddings. Ook het toekennen van breedtes aan cellen is risky. Als het niet allemaal consistent is, en b.v. verschillende cellen op een rij hebben in totaal een andere breedte dan de tabel, dan kan de boel ook onvoorspelbaar gaan reageren.

    je hebt overigens ook wat fouten in je code die vreemd gedrag kunnen veroorzaken:
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rsgnov.nl%2Findexfirefox.html

Beantwoord deze vraag

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