Menubalk gaat niet open in Firefox

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoikes,

Ik heb een klein probleempje:
Ik wil een nieuw "uitklapmenu" maken in onze website, in Explorer werkt het prima, maar in Firefox-Mozilla wil het menu niet "uitklappen" of opengaan, weet iemand raad?

http://www.scoutsdonk.be/menu.php

De code:

Code:

<style>
<!-- verander hieronder het lettertype en de kleuren -->
body{font-family:verdana;}
table{font-size:80%;background:#888888}
a{color:#ffffff;text-decoration:none;font:bold}
a:hover{color:#888888}
td.menu{background:#e9eaec}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
body {
   background-color: #CCCCCC;
}
</style>

Code:

<script language="JavaScript" type="text/javascript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
  </script>
</p>
<table width="100%">
  <tr bgcolor="#21536A">
    <td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')"><a href="http://www.leejoo.nl">Site 1</a><br />
        <table class="menu" id="site1" width="100%">
          <tr>
            <td class="menu"><a href="pag1.htm">Wie</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag2.htm">Wat</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag3.htm">Waar</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag4.htm">Waarom</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag5.htm">Wanneer</a></td>
          </tr>
      </table></td>
    <td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"><a href="http://www.leejoo.nl">Site 2</a><br />
        <table class="menu" id="site2" width="100%">
          <tr>
            <td class="menu"><a href="pag1.htm">Wie</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag2.htm">Wat</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag3.htm">Waar</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag4.htm">Waarom</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag5.htm">Wanneer</a></td>
          </tr>
      </table></td>
    <td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')"><a href="http://www.leejoo.nl">Site 3</a><br />
        <table class="menu" id="site3" width="100%">
          <tr>
            <td class="menu"><a href="pag1.htm">Wie</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag2.htm">Wat</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag3.htm">Waar</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag4.htm">Waarom</a></td>
          </tr>
          <tr>
            <td class="menu"><a href="pag5.htm">Wanneer</a></td>
          </tr>
      </table></td>

Bedankt iedereen,

Lainke

Natrium · **Geregistreerd:** 22 Mrt 2005 0:00 **Berichten:** 353

bij mij lijkt dat wel te werken in FF.
Wel niet goed, maar kom

Je gebruikt JavaScript, het kan ook perfect zonder.

Hier staan een paar mooie voorbeelden: http://www.cssplay.co.uk/menus/

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoikes,

Ik heb nog wat zitten prutsen, en idd, het is al veel beter, enkel de submenus die opengaan krijg ik niet mooi aan de linkerkant uitgelijnd.
In Mozille firefox werkt het prima, maar in explorer ben ik al een tijdje bezig en krijg ik het niet voor elkaar,

Kan iemand me verder helpen ?

Bedankt

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi natrium,

Ik ben op deze site gaan kijken,

http://www.cssplay.co.uk/menus/

maar hoe werkt nu het downloaden van het script eigenlijkj, want men kan blijkbaar alleen maar css downloaden?

To

lainke schreef:

Hoi natrium,

Ik ben op deze site gaan kijken,

http://www.cssplay.co.uk/menus/

maar hoe werkt nu het downloaden van het script eigenlijkj, want men kan blijkbaar alleen maar css downloaden?

De scripts op CSSPlay maken alleen gebruik van CSS! Dat is net hun sterke punt ten opzichte van (overbodig ingewikkelde) (Javascript-)menu's.

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Ik heb nog nooit gebruik gemaakt van een menu met enkel CSS, is er dan ergens een tutorial te vinden hoe ik deze werkende kan krijgen ?

To

lainke schreef:

Ik heb nog nooit gebruik gemaakt van een menu met enkel CSS, is er dan ergens een tutorial te vinden hoe ik deze werkende kan krijgen ?

Je moet gewoon wat copy-pasten. Bijvoorbeeld: menu 4 van CSSplay. Onder het voorbeeldje zie je de code:

CSSplay schreef:

Cascading Style Sheet

Code:

#menu a, #menu a:visited {
  text-decoration:none;
  text-align:center;
  background-color:#aaa; 
  color:#fff;
  display:block; 
  width:8em; 
  padding:0.2em;
  margin:0.5em auto;
  border-right:5px solid #fff;
  }
#menu a:hover {
  border-right:5px solid #000;
  }

xhtml

Code:

<div id="menu">
  <a href="#nogo">Item 1</a>
  <a href="#nogo">Item 2</a>
  <a href="#nogo">Item 3</a>
  <a href="#nogo">Item 4</a>
  <a href="#nogo">Item 5</a>
</div>

Alles van "Cascading Style Sheet" (CSS dus) zet je in je CSS-bestandje (of eventueel tussen <style>-tags). De XHTML-code zet je gewoon in je HTML- of PHP-pagina. That's it!

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi To,

Ik ben nu al een hele stap verder, en heb ook een menu gevonden naar mijn "goesting".

Ik heb nu een klein probleempje omdat ik in de CSS style niet kan vinden hoe ik het volledige menu tabel kan cenrteren naar het midden van mijn tabel waarin nu het menu staat.

http://www.scoutsdonk.be/menu5.php

Ik heb de tabel op 90% staan.

Code:

<style>
.menu {
width:750px; 
font-size:0.85em;
position:relative;
z-index:100;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#d4d8bd url(../graphics/drop.gif) bottom right no-repeat;

}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65 url(../graphics/drop.gif) bottom right no-repeat;
}
.menu ul ul :hover > a.drop {
background:#c9ba65 url(../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
body {
   background-color: #FFFFFF;
}
</style>

bedankt

To

lainke schreef:

Hoi To,

Ik ben nu al een hele stap verder, en heb ook een menu gevonden naar mijn "goesting".

Ik heb nu een klein probleempje omdat ik in de CSS style niet kan vinden hoe ik het volledige menu tabel kan cenrteren naar het midden van mijn tabel waarin nu het menu staat.

http://www.scoutsdonk.be/menu5.php

Ik begrijp het probleem niet helemaal. Kan het zijn dat je probleem intussen van de baan is?

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi To,

Het zit zo dat het menu werkt met breedte in pixels en ikzelf werk met %.
Dus een tabel aan 90% en de menubalk aan 750 pixels.
Is het zo dat ik ze alle 2 in pixels mag zetten of alle twee in %.
Probleem is dat als ik de menubalk in % zet, hij helemaal onbruikbaar wordt.

Welke is eigenlijk de juiste afmeting in pixels voor de juiste weergave van de breedte in een tabel voor elke browser?

To

lainke schreef:

Hoi To,

Het zit zo dat het menu werkt met breedte in pixels en ikzelf werk met %.
Dus een tabel aan 90% en de menubalk aan 750 pixels.

In je code van http://www.scoutsdonk.be/menu5.php staat toch alles in pixels?

Code:

lainke schreef:

Welke is eigenlijk de juiste afmeting in pixels voor de juiste weergave van de breedte in een tabel voor elke browser?

Je bedoelt "hoe breed mag een tabel zijn zodat hij in alle resoluties en alle webbrowsers volledig te zien is"? Dat hangt er vanaf. Ik ga er nog steeds van uit dat een website goed surfbaar moet zijn op een schermresolutie van 600 x 800px. Ik veronderstel dan wel dat er geen bezoekers zijn die hun venster verkleinen of links in hun browser nog een (taak-)venster hebben openstaan (met bijvoorbeeld hun favorieten of geschiedenis), want dan blijft er helemaal niks meer over van het venster. Af die 800px moet je dan nog wat aftrekken voor een eventuele vertikale schuifbalk. Met 780px zit je normaal goed.

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

hartelijk dank To.

Het beste is dus dat ik voortaan met pixels werk ipv % ?

Groetjes

To

lainke schreef:

hartelijk dank To.

Het beste is dus dat ik voortaan met pixels werk ipv % ?

Groetjes

Ook dat hangt er vanaf. Het is een keuze die je als webmaster moet maken. Voor sommige zaken kan je procentueel werken vermijden door met CSS te werken. Bijvoorbeeld: om een tabel te centreren, gebruik je niet:

Code:

<table width="100%">
  <tr>
    <td width="25%"></td>
    <td width="750">[...]</td>
    <td width="25%"></td>
  </tr>
</table>

maar wel:

Code:

<table class="tabel">
  <tr>
    <td>[...]</td>
  </tr>
</table>

In je CSS moet dan iets staan als:

Code:

.tabel {
  width: 750px;
  margin: 0px auto 0px auto;
}

Die "auto" zal het element (in dit geval een tabel) automatisch centreren.

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

schitterend !

alweer bijgeleerd.

Bedankt.

Scoutnet vzw

Menubalk gaat niet open in Firefox

Wie is er online?