Hallo!
Ik ben bezig met de website www.waterpoortboys.nl
Alleen het menu aan de linkerkant wil nog niet helemaal lukken.
De woorden (knoppen) staat vertikaal namelijk zo ver uit elkaar.
Weet iemand ook hoe ik die afstand in de html kan aanpassen?
Hieronder de HTML van het linkerframe.
Groet,
Alco
------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>
<base target="main">
</head>
<body background="Left2.3.jpg">
<p align="left"><!--webbot bot="HTMLMarkup" startspan --><html>
<head>
<title>uitklapmenu-tekst</title>
<link rel="stylesheet" href="alco.css" type="text/css">
<style>
<!--
DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:0; width:170}
#divCont{position:relative; left:0; top:0; height:0; width:0;}
A.clMain{font:12px Verdana; text-decoration:none; font-weight:bold; color:#000000;}
A.clSubb{font:12px Verdana; text-decoration:none; color:#000000}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">
// Om de positie te veranderen vanaf de top en vanaf links kun je kijken in divCont (hierboven in de stylesheet)
// hij staat nu 0 pixels van links en 0 pixels vanf de top.
// Verander de tekst kleuren en maten in de A.clMain en A.clSubb in de stylesheet.
// Verander dit hieronder naar "true" als je wilt dat alle subs blijven staan als je een ander aanklikt.
var stayFolded=false
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=n?this.ref.height:eval(obj+'.offsetHeight')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
// vanaf hier niets veranderen
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
oTop[4]=new makeMenu('divTop5','divCont')
oTop[5]=new makeMenu('divTop6','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
for(i=0;i<oSub.length;i++){ oSub.hideIt() }
for(i=1;i<oTop.length;i++){ oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
// Vanaf hier niets veranderen.
function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num) oSub.hideIt()
}
for(i=1;i<oTop.length;i++){
oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt()
Sub[num].hideIt()
for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Laat het menu laden, if it's a 4.x+ browser.
if(browser) onload=init;
</script>
<style>
<!--
DIV.clTop{position:absolute; width:145}
DIV.clSub{position:absolute; left:0; width:145}
#divCont{position:relative; left:0; top:0; height:400; width:145;}
A.clMain{font:12px Verdana; text-decoration:none; font-weight:bold; color:#000000;}
A.clSubb{font:10px Verdana; text-decoration:none; color:#000000}
#divMain{position:absolute}
//-->
</style>
</head>
<!-- hieronder kan je de kleuren en de positie veranderen je moet er gewoon maar even wat aan proberen... -->
<body bgcolor="#FFFFFF" >
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="130">
<!-- verander hier de links -->
<div id="divCont">
<div id="divTop1" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(0); return false" class="clMain">[Home]</a><br>
<div id="divSub1" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 3</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 4</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop2" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(1); return false" class="clMain">nieuws</a><br>
<div id="divSub2" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop3" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(2); return false" class="clMain">standen</a><br>
<div id="divSub3" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 3</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop4" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(3); return false" class="clMain">[uitklapper 3]</a><br>
<div id="divSub4" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop5" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(4); return false" class="clMain">[uitklapper 4]</a><br>
<div id="divSub5" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 3</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 4</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 5</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop6" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(5); return false" class="clMain">[uitklapper 5]</a><br>
<div id="divSub6" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
</div>
<p align="right">
<br>
</div>
</div>
<p align="right"><br></p></td>
</table>
<!--webbot bot="HTMLMarkup" endspan -->
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
</body>
</html>
Ik ben bezig met de website www.waterpoortboys.nl
Alleen het menu aan de linkerkant wil nog niet helemaal lukken.
De woorden (knoppen) staat vertikaal namelijk zo ver uit elkaar.
Weet iemand ook hoe ik die afstand in de html kan aanpassen?
Hieronder de HTML van het linkerframe.
Groet,
Alco
------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>
<base target="main">
</head>
<body background="Left2.3.jpg">
<p align="left"><!--webbot bot="HTMLMarkup" startspan --><html>
<head>
<title>uitklapmenu-tekst</title>
<link rel="stylesheet" href="alco.css" type="text/css">
<style>
<!--
DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:0; width:170}
#divCont{position:relative; left:0; top:0; height:0; width:0;}
A.clMain{font:12px Verdana; text-decoration:none; font-weight:bold; color:#000000;}
A.clSubb{font:12px Verdana; text-decoration:none; color:#000000}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">
// Om de positie te veranderen vanaf de top en vanaf links kun je kijken in divCont (hierboven in de stylesheet)
// hij staat nu 0 pixels van links en 0 pixels vanf de top.
// Verander de tekst kleuren en maten in de A.clMain en A.clSubb in de stylesheet.
// Verander dit hieronder naar "true" als je wilt dat alle subs blijven staan als je een ander aanklikt.
var stayFolded=false
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.height=n?this.ref.height:eval(obj+'.offsetHeight')
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
// vanaf hier niets veranderen
function init(){
oTop=new Array()
oTop[0]=new makeMenu('divTop1','divCont')
oTop[1]=new makeMenu('divTop2','divCont')
oTop[2]=new makeMenu('divTop3','divCont')
oTop[3]=new makeMenu('divTop4','divCont')
oTop[4]=new makeMenu('divTop5','divCont')
oTop[5]=new makeMenu('divTop6','divCont')
oSub=new Array()
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
for(i=0;i<oSub.length;i++){ oSub.hideIt() }
for(i=1;i<oTop.length;i++){ oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
// Vanaf hier niets veranderen.
function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num) oSub.hideIt()
}
for(i=1;i<oTop.length;i++){
oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
oSub[num].vis()?oSub[num].showIt()

for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop.moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
//Laat het menu laden, if it's a 4.x+ browser.
if(browser) onload=init;
</script>
<style>
<!--
DIV.clTop{position:absolute; width:145}
DIV.clSub{position:absolute; left:0; width:145}
#divCont{position:relative; left:0; top:0; height:400; width:145;}
A.clMain{font:12px Verdana; text-decoration:none; font-weight:bold; color:#000000;}
A.clSubb{font:10px Verdana; text-decoration:none; color:#000000}
#divMain{position:absolute}
//-->
</style>
</head>
<!-- hieronder kan je de kleuren en de positie veranderen je moet er gewoon maar even wat aan proberen... -->
<body bgcolor="#FFFFFF" >
<table width="130" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="130">
<!-- verander hier de links -->
<div id="divCont">
<div id="divTop1" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(0); return false" class="clMain">[Home]</a><br>
<div id="divSub1" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 3</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 4</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop2" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(1); return false" class="clMain">nieuws</a><br>
<div id="divSub2" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop3" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(2); return false" class="clMain">standen</a><br>
<div id="divSub3" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 3</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop4" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(3); return false" class="clMain">[uitklapper 3]</a><br>
<div id="divSub4" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop5" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(4); return false" class="clMain">[uitklapper 4]</a><br>
<div id="divSub5" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 2</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 3</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 4</a><br>
<a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 5</a><br>
</div>
<p align="right">
<br>
</div>
<div id="divTop6" class="clTop">
<p align="right"><a href="http://www.voetbalnoord.nl" onClick="menu(5); return false" class="clMain">[uitklapper 5]</a><br>
<div id="divSub6" class="clSub">
<p align="right"> <a href="http://www.voetbalnoord.nl" class="clSubb">-Sublink 1</a><br>
</div>
<p align="right">
<br>
</div>
</div>
<p align="right"><br></p></td>
</table>
<!--webbot bot="HTMLMarkup" endspan -->
</p>
<p align="left">
</p>
<p align="left">
</p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
</body>
</html>