Header probleem

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB2. Support wordt helaas niet meer verleend.
Forumregels

Sinds 1 januari 2009 wordt phpBB2 niet meer ondersteund.
Onderstaande informatie is verouderd en dient uitsluitend als archief.
phpBB2.0.x
Gesloten
Coen
Berichten: 5387
Lid geworden op: 03 aug 2004, 10:25

Header probleem

Bericht door Coen » 23 feb 2005, 14:44

Ik ben bezig om mijn header vorm te geven voor mijn test-forum en nu kom ik op het volgende probleem.

:arrow: http://www.gamejunkies.nl/forum/portal.php

Zo zie je in de header dat als je op zo'n link gaat staan, dat er dan meerdere links onderaan bij komen, dit is ook de bedoeling, een variant op het pull-down menuutje...

Maar nu het probleem, hoe verder je met de muis in het menu gaat hoe verder de links naar beneden gaan. Bij de 8e optie in het menu staan de verschijnende links al 8 regels naar beneden...

Hoe los ik dit op?

overall_header.tpl

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="templates/fiblack/{T_HEAD_STYLESHEET}" type="text/css" />
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 8;

//menu constructor
function menu(allitems,thisitem,startstate){ 
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;  
  this.numberofmenuitems = 8;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.visibility = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
				
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);"> 
<div id="masthead"> 
  <h1 id="siteName">Site Name</h1> 
  <div id="globalNav"> 
    <div id="globalLink" align="center"> 
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">globallink</a>
	  <a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">globallink</a>
      <a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">globallink</a>
      <a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">globallink</a>
      <a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">globallink</a>
      <a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">globallink</a>
      <a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">globallink</a> 
      <a href="#" id="gl8" class="glink" onmouseover="ehandler(event,menuitem8);">globallink</a>
    </div> 
    <!--end globalLinks--> 
  </div> 
  <!-- end globalNav --> 
  <div id="subglobal1" class="subglobalNav" align="center"> 
    <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> 
  </div> 
  <div id="subglobal2" class="subglobalNav" align="center"> 
    <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> 
  </div> 
  <div id="subglobal3" class="subglobalNav" align="center"> 
    <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> 
  </div> 
  <div id="subglobal4" class="subglobalNav" align="center"> 
    <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> 
  </div> 
  <div id="subglobal5" class="subglobalNav" align="center"> 
    <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> 
  </div> 
  <div id="subglobal6" class="subglobalNav" align="center"> 
    <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> 
  </div> 
  <div id="subglobal7" class="subglobalNav" align="center"> 
    <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> 
  </div> 
  <div id="subglobal8" class="subglobalNav" align="center"> 
    <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> 
  </div> 
</div> 
<!-- end masthead --> 
</div> 
<!--end pagecell1--> 
<br> 
<script type="text/javascript">
    <!--
      		var menuitem1 = new menu(8,1,"hidden"); 
      		var menuitem2 = new menu(8,2,"hidden"); 
      		var menuitem3 = new menu(8,3,"hidden"); 
      		var menuitem4 = new menu(8,4,"hidden"); 
      		var menuitem5 = new menu(8,5,"hidden"); 
      		var menuitem6 = new menu(8,6,"hidden"); 
      		var menuitem7 = new menu(8,7,"hidden");
      		var menuitem8 = new menu(8,8,"hidden");
    // -->
    </script> 
</body>
</html>

Gebruikersavatar
Paul
Beheerder
Beheerder
Berichten: 20316
Lid geworden op: 23 okt 2003, 11:38
Locatie: Utrecht
Contacteer:

Bericht door Paul » 23 feb 2005, 15:01

Probeer dit eens:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="templates/fiblack/{T_HEAD_STYLESHEET}" type="text/css" />
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 8;

//menu constructor
function menu(allitems,thisitem,startstate){
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem; 
  this.numberofmenuitems = 8;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.display = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.display="none";
  }
  theobj.thediv.style.display="block";
}
            
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.display='none';
    }
  }
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div id="masthead">
  <h1 id="siteName">Site Name</h1>
  <div id="globalNav">
    <div id="globalLink" align="center">
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">globallink</a>
     <a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">globallink</a>
      <a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">globallink</a>
      <a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">globallink</a>
      <a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">globallink</a>
      <a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">globallink</a>
      <a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">globallink</a>
      <a href="#" id="gl8" class="glink" onmouseover="ehandler(event,menuitem8);">globallink</a>
    </div>
    <!--end globalLinks-->
  </div>
  <!-- end globalNav -->
  <div id="subglobal1" class="subglobalNav" align="center">
    <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a>
  </div>
  <div id="subglobal2" class="subglobalNav" align="center">
    <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a>
  </div>
  <div id="subglobal3" class="subglobalNav" align="center">
    <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a>
  </div>
  <div id="subglobal4" class="subglobalNav" align="center">
    <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a>
  </div>
  <div id="subglobal5" class="subglobalNav" align="center">
    <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a>
  </div>
  <div id="subglobal6" class="subglobalNav" align="center">
    <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a>
  </div>
  <div id="subglobal7" class="subglobalNav" align="center">
    <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a>
  </div>
  <div id="subglobal8" class="subglobalNav" align="center">
    <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a>
  </div>
</div>
<!-- end masthead -->
</div>
<!--end pagecell1-->
<br>
<script type="text/javascript">
    <!--
            var menuitem1 = new menu(8,1,"none");
            var menuitem2 = new menu(8,2,"none");
            var menuitem3 = new menu(8,3,"none");
            var menuitem4 = new menu(8,4,"none");
            var menuitem5 = new menu(8,5,"none");
            var menuitem6 = new menu(8,6,"none");
            var menuitem7 = new menu(8,7,"none");
            var menuitem8 = new menu(8,8,"none");
    // -->
    </script>
</body>
</html> 

Coen
Berichten: 5387
Lid geworden op: 03 aug 2004, 10:25

Bericht door Coen » 23 feb 2005, 15:12

Ok, bedankt... Dat is al één probleem dat verholpen is. Maar kijk nu eens, hij gaat telkens weer iets omhoog en omlaag... :P Hij moet gewoon op zijn plek blijven!

:arrow: http://www.gamejunkies.nl/forum/portal.php

Gebruikersavatar
Paul
Beheerder
Beheerder
Berichten: 20316
Lid geworden op: 23 okt 2003, 11:38
Locatie: Utrecht
Contacteer:

Bericht door Paul » 23 feb 2005, 15:15

Probeer het eens zo:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" href="templates/fiblack/{T_HEAD_STYLESHEET}" type="text/css" />
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 8;

//menu constructor
function menu(allitems,thisitem,startstate){
  callname= "gl"+thisitem;
  divname="subglobal"+thisitem;
  this.numberofmenuitems = 8;
  this.caller = document.getElementById(callname);
  this.thediv = document.getElementById(divname);
  this.thediv.style.display = startstate;
}

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.display="none";
  }
  theobj.thediv.style.display="block";
}
           
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.display='none';
    }
  }
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div id="masthead">
  <h1 id="siteName">Site Name</h1>
  <div id="globalNav">
    <div id="globalLink" align="center">
      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">globallink</a>
     <a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">globallink</a>
      <a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">globallink</a>
      <a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">globallink</a>
      <a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">globallink</a>
      <a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">globallink</a>
      <a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">globallink</a>
      <a href="#" id="gl8" class="glink" onmouseover="ehandler(event,menuitem8);">globallink</a>
    </div>
    <!--end globalLinks-->
  </div>
  <!-- end globalNav -->
  <div style="height:15px;">
  <div id="subglobal1" class="subglobalNav" align="center">
    <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1
    link</a> | <a href="#">subglobal1 link</a>
  </div>
  <div id="subglobal2" class="subglobalNav" align="center">
    <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
    link</a> | <a href="#">subglobal2 link</a>
  </div>
  <div id="subglobal3" class="subglobalNav" align="center">
    <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
    link</a> | <a href="#">subglobal3 link</a>
  </div>
  <div id="subglobal4" class="subglobalNav" align="center">
    <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4
    link</a> | <a href="#">subglobal4 link</a>
  </div>
  <div id="subglobal5" class="subglobalNav" align="center">
    <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5
    link</a> | <a href="#">subglobal5 link</a>
  </div>
  <div id="subglobal6" class="subglobalNav" align="center">
    <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
    link</a> | <a href="#">subglobal6 link</a>
  </div>
  <div id="subglobal7" class="subglobalNav" align="center">
    <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
    link</a> | <a href="#">subglobal7 link</a>
  </div>
  <div id="subglobal8" class="subglobalNav" align="center">
    <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
    link</a> | <a href="#">subglobal8 link</a>
  </div>
</div>
</div>
<!-- end masthead -->
</div>
<!--end pagecell1-->
<br>
<script type="text/javascript">
    <!--
            var menuitem1 = new menu(8,1,"none");
            var menuitem2 = new menu(8,2,"none");
            var menuitem3 = new menu(8,3,"none");
            var menuitem4 = new menu(8,4,"none");
            var menuitem5 = new menu(8,5,"none");
            var menuitem6 = new menu(8,6,"none");
            var menuitem7 = new menu(8,7,"none");
            var menuitem8 = new menu(8,8,"none");
    // -->
    </script>
</body>
</html>

Coen
Berichten: 5387
Lid geworden op: 03 aug 2004, 10:25

Bericht door Coen » 23 feb 2005, 15:21

Nu issie perfecto! Dank je paulus! :thumb:

:arrow: http://www.gamejunkies.nl/forum/portal.php

Gebruikersavatar
Paul
Beheerder
Beheerder
Berichten: 20316
Lid geworden op: 23 okt 2003, 11:38
Locatie: Utrecht
Contacteer:

Bericht door Paul » 23 feb 2005, 15:22

Soms werkt me snelheid mee :D

Graag gedaan :)

Gesloten