Pagina 1 van 1
Header probleem
Geplaatst: 23 feb 2005, 14:44
door Coen
Ik ben bezig om mijn header vorm te geven voor mijn test-forum en nu kom ik op het volgende probleem.
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>
Geplaatst: 23 feb 2005, 15:01
door Paul
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>
Geplaatst: 23 feb 2005, 15:12
door Coen
Ok, bedankt... Dat is al één probleem dat verholpen is. Maar kijk nu eens, hij gaat telkens weer iets omhoog en omlaag...
Hij moet gewoon op zijn plek blijven!
http://www.gamejunkies.nl/forum/portal.php
Geplaatst: 23 feb 2005, 15:15
door Paul
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>
Geplaatst: 23 feb 2005, 15:21
door Coen
Nu issie perfecto! Dank je paulus! :thumb:
http://www.gamejunkies.nl/forum/portal.php
Geplaatst: 23 feb 2005, 15:22
door Paul
Soms werkt me snelheid mee
Graag gedaan
