De site centeren

Status
Niet open voor verdere reacties.

vredeveld01

Gebruiker
Lid geworden
1 nov 2009
Berichten
83
Sinds kort heb ik een nieuw beeldscherm en dus nu pas valt het mij op dat de site ( www.dekikkers.nl)niet centreert, zou iemand naar de code kunnen kijken en aangeven wat er gewijzigd moet worden.
Ik gebruik dw cs5 en een sjabloon. BVD Vredeveld P.S heb al een wrapper geprobeerd maar er gebeurde niets.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De Kikkers</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:75px;
	top:0px;
	width:566px;
	height:34px;
	z-index:1;
}
#apDiv4 {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
.container {
	width: 902px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#apDiv3 ul li {
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
	list-style-type: square;

}
-->
</style>
<script src="../httpdocs/SpryAssets/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../httpdocs/SpryAssets/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../httpdocs/SpryAssets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../httpdocs/SpryAssets/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:246px;
	top:163px;
	width:540px;
	height:579px;
	z-index:2;
	color: #FFF;
	padding: 5px;
	text-align: left;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
	border-right-style: none;
	background-repeat: no-repeat;
	background-image: none;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	margin: auto;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #121212;
}
#apDiv3 {
	position:absolute;
	left:68px;
	top:137px;
	width:159px;
	height:553px;
	z-index:3;
	font-size: 14px;
	background-color: #600;
	padding: 5px;
	margin: 5px;
	text-decoration: underline;
	line-height: 40px;
	border: thin solid #000;
	color: #FFF;
}
#apDiv4 {
	position:absolute;
	left:797px;
	top:142px;
	width:169px;
	height:555px;
	z-index:4;
	background-color: #660000;
	border-bottom: solid;
	border-bottom-color: #600;
}
body {
	background-color: #FFF;

}
body,td,th {
	color: #FFF;
	font-size: 16px;
	padding: 0px;
	width: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	overflow: auto;
	background-color: #999;
	font-family: "Times New Roman", Times, serif;
}
a:link {
	color: #FFF;
	list-style-type: none;
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
}
#apDiv5 {
	position:absolute;
	left:75px;
	top:34px;
	width:167px;
	height:130px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	left:246px;
	top:34px;
	width:549px;
	height:99px;
	z-index:6;
}
#apDiv7 {
	position:absolute;
	left:798px;
	top:34px;
	width:168px;
	height:130px;
	z-index:7;
}
#apDiv8 {
	position:absolute;
	left:10px;
	top:0px;
	width:63px;
	height:702px;
	z-index:8;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #000;
}
#apDiv9 {
	position:absolute;
	left:970px;
	top:-1px;
	width:94px;
	height:707px;
	z-index:9;
	border-left-width: medium;
	border-left-style: solid;
	border-left-color: #600;
}
#apDiv10 {
	position:absolute;
	left:246px;
	top:142px;
	width:550px;
	height:21px;
	z-index:10;
	background-color: #600;
}
#apDiv11 {
	position:absolute;
	left:0px;
	top:0px;
	width:71px;
	height:706px;
	z-index:11;
	border-right-width: medium;
	border-right-style: solid;
	border-right-color: #600;
}
a:visited {
	color: #FFF;
}
a:hover {
	color: #FFF;
	text-decoration: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	list-style-type: none;
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
}
#apDiv12 {
	position:absolute;
	left:73px;
	top:708px;
	width:169px;
	height:47px;
	z-index:12;
	border-top-width: medium;
	border-right-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv13 {
	position:absolute;
	left:248px;
	top:755px;
	width:549px;
	height:37px;
	z-index:13;
	border-top-width: medium;
	border-top-style: none;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv14 {
	position:absolute;
	left:797px;
	top:707px;
	width:173px;
	height:47px;
	z-index:14;
	border-top-width: medium;
	border-left-width: medium;
	border-top-style: none;
	border-left-style: none;
	border-top-color: #600;
	border-left-color: #600;
	font-size: 18px;
}
.style4 {	font-size: 14px;
	font-weight: bold;
}
#apDiv15 {
	position:absolute;
	left:798px;
	top:164px;
	width:172px;
	height:173px;
	z-index:15;
	border-bottom-width: medium;
	border-left-width: thin;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #600;
	border-bottom-color: #FFF;
	border-left-color: #000;
	border-top-width: thin;
	border-top-style: solid;
	margin: 0px;
	padding: 0px;
	color: #FFF;
	background-color: #600;
}
#apDiv16 {
	position:absolute;
	left:799px;
	top:312px;
	width:171px;
	height:170px;
	z-index:16;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv17 {
	position:absolute;
	left:799px;
	top:482px;
	width:171px;
	height:214px;
	z-index:17;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv18 {
	position:absolute;
	left:799px;
	top:338px;
	width:171px;
	height:188px;
	z-index:16;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv19 {
	position:absolute;
	left:798px;
	top:526px;
	width:172px;
	height:178px;
	z-index:17;
	border-left-width: thin;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #000;
	border-left-color: #000;
	color: #FFF;
	background-color: #600;
	border-bottom-style: solid;
}
#apDiv20 {
	position:absolute;
	left:798px;
	top:338px;
	width:172px;
	height:188px;
	z-index:18;
	border-bottom-width: thin;
	border-left-width: thin;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #600;
	border-bottom-color: #FFF;
	border-left-color: #000;
	color: #FFF;
	background-color: #600;
	border-top-width: thin;
	border-top-style: none;
	text-align: center;
}
#apDiv21 {
	position:absolute;
	left:801px;
	top:756px;
	width:179px;
	height:108px;
	z-index:19;
}
#apDiv22 {
	position:absolute;
	left:246px;
	top:706px;
	width:552px;
	height:45px;
	z-index:20;
}
-->
</style>
<script type="text/javascript" id="sothink_dhtmlmenu">
<!--
st_siteroot="file:///C|/dw4/dekikkers/httpdocs";
 st_jspath="/js/stmenu.js";
 if(!window.location.href.indexOf("file:") && st_jspath.charAt(0)=="/")
  document.write('<script type="text/javascript" src="'+st_siteroot+st_jspath+'"><\/script>');
 else 
  document.write('<script type="text/javascript" src="'+st_jspath+'"><\/script>');

//-->
</script>
<script type="text/javascript" src="../httpdocs/js/js/stscode.js"></script>
</head>
<body onload="MM_preloadImages('../httpdocs/afbeeldingen/Bannerbasketballwear.nl.jpg')">
<div id="apDiv11"></div>
<div id="apDiv12">
  <!-- Start Bravenet.com Service Code -->
  <script language="JavaScript" type="text/javascript" src="http://pub33.bravenet.com/counter/code.php?id=408477&usernum=2807626589&cpv=2">
</script>
  <!-- END DO NOT MODIFY -->
</div>
<div id="apDiv13"><img src="../httpdocs/afbeeldingen/Basketbal D1 019w e.jpg" width="549" height="102" /></div>
<div id="apDiv14"></div>
<div id="apDiv15"><!-- TemplateBeginEditable name="EditRegion2" -->
  <div align="center">
    <h2>nieuws</h2>
    <p>vak nummer 1</p>
  </div>
<!-- TemplateEndEditable --></div>
<div id="apDiv19"><!-- TemplateBeginEditable name="EditRegion4" -->
  <div align="center">
    <h2>nieuws</h2>
    <p>vak nummer 3</p>
  </div>
<!-- TemplateEndEditable --></div>
<div id="apDiv20"><!-- TemplateBeginEditable name="EditRegion3" -->
  <div align="center">
    <h2>nieuws</h2>
    <p>vak num</p>
    <p>&nbsp;</p>
    <p>mer 2</p>
  </div>
<!-- TemplateEndEditable --></div>
<div id="apDiv21"></div>
<div align="left"></div>
<a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a>
<div id="apDiv1"><span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
  <script id="sothink_widgets:dwwidget_dhtmlmenu2_8_2010.pgt" type="text/javascript">
<!--
stm_bm(["menu1a91",900,"/img","blank.gif",0,"","",0,0,250,0,500,1,0,0,"http://dekikkers.nl/","",67108897,0,1,2,"default","hand","file:///C|/dw4/dekikkers/httpdocs",1,25],this);
stm_bp("p0",[0,4,0,0,0,7,5,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","bg_01.gif",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Heren","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#FFFFFF",0,"","bg_02.gif",3,1,0,0,"#FFFFF7","#000000","#FFFFFF","#FFFFFF","bold 9pt Arial","bold 9pt Arial",0,0,"","","","",0,0,0],149,30);
stm_bpx("p1","p0",[1,4,0,2,0,0,0,0,100,"",-2,"",-2,80,0,0,"#666666","#FFFFFF","",3,0,0]);
stm_ai("p1i0",[0,"Heren 1","","",-1,-1,0,"heren1.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#FFFFF7",1,"#FFFFF7",1,"round18_m.gif","round09_m.gif",3,3,0,0,"#FFFFF7","#000000","#FFFFFF","#000000","8pt 'Arial','Verdana'","8pt 'Arial','Verdana'",0,0,"round18_l.gif","round09_l.gif","round18_r.gif","round09_r.gif",11,11,26],150,18);
stm_aix("p1i1","p1i0",[0,"Heren 2","","",-1,-1,0,"heren2.html"],150,18);
stm_aix("p1i2","p1i0",[0,"Heren 3","","",-1,-1,0,"heren3.html"],150,18);
stm_aix("p1i3","p1i0",[0,"old kikkers","","",-1,-1,0,"oldkikkers.html"],150,0);
stm_ep();
stm_ai("p0i1",[6,1,"#990000","",-1,-1,0]);
stm_aix("p0i2","p0i0",[0,"Dames","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",1],149,30);
stm_bpx("p2","p1",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000"]);
stm_aix("p2i0","p1i0",[0,"Dames 1","","",-1,-1,0,"dames1.html"],150,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Jeugd Meisjes"],149,30);
stm_bpx("p3","p0",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000",""]);
stm_aix("p3i0","p1i0",[0,"Meisjes u 18","","",-1,-1,0,"meisjesu18.html"],150,18);
stm_aix("p3i1","p1i0",[0,"Meisjes u 14","","",-1,-1,0,"meisjesu14.html"],150,18);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Jeugd Jongens"],149,30);
stm_bpx("p4","p3",[]);
stm_aix("p4i0","p1i0",[0,"Jongens u 16","","",-1,-1,0,"jongensu16.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 18 ","","",-1,-1,0,"jongensu18.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 14 ","","",-1,-1,0,"jongensu14.html"],150,0);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Jeugd tot u 12"],149,30);
stm_bpx("p5","p3",[]);
stm_aix("p5i0","p1i0",[0,"Meisjes u 12","","",-1,-1,0,"meisjesu12.html"],150,18);
stm_aix("p5i1","p1i0",[0,"Jongens u 12.1","","",-1,-1,0,"jongensu12.1.html"],150,18);
stm_aix("p5i2","p1i0",[0,"jongens u 12.2","","",-1,-1,0,"jongensu12.2.html"],150,0);
stm_ep();
stm_aix("p0i9","p0i1",[]);
stm_aix("p0i10","p0i2",[0,"Mix","","",-1,-1,0,""],149,30);
stm_bpx("p6","p3",[]);
stm_aix("p6i1","p1i0",[0,"mix U 8/10","","",-1,-1,0,"mixu8enu10.html"],150,0);
stm_ep();
stm_ep();
stm_em();
//-->
    </script>
</span></div>
<div id="apDiv2"><!-- TemplateBeginEditable name="inhoud" -->
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
<!-- TemplateEndEditable --></div>
<div id="apDiv3">
  <ul>
    <li style="list-style-type: square; list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);"><a href="../httpdocs/index.html">Home</a></li>
    <li><a href="../httpdocs/organisatie.html">Organisatie</a></li>
    <li><a href="/fotos.html">Foto's</a></li>
    <li><a href="../httpdocs/nieuws.html">Nieuws</a></li>
    <li><a href="../httpdocs/links.html">Links</a></li>
    <li><a href="../httpdocs/sponsoren.html">Sponsoren</a></li>
    <li><a href="/bewaarboekje.html">Bewaarboekje</a></li>
    <li><a href="../httpdocs/rayonoost.html">Rayon-oost</a></li>
    <li><a href="../inschrijven.html">Inschrijven</a></li>
    <li><a href="/shoutbox.html">Shoutbo</a>x</li>
  </ul>
</div>
<div id="apDiv5"><img src="../httpdocs/afbeeldingen/logo de kikkers c.jpg" width="171" height="129" /></div>
<div id="apDiv6"><a href="http://www.basketballwear.nl/" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding5','','../httpdocs/afbeeldingen/Bannerbasketballwear.nl.jpg',1)"><img src="../httpdocs/afbeeldingen/headimage.jpg" name="Afbeelding5" width="553" height="130" border="0" id="Afbeelding5" /></a></div>
<div id="apDiv7"><img src="../httpdocs/afbeeldingen/temp_man4.jpg" width="169" height="169" /></div>
<div id="apDiv9"><!-- TemplateBeginEditable name="EditRegion5" -->
  <p><img src="../httpdocs/afbeeldingen/rechts.jpg" width="120" height="675" />EditRegion</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>5</p>
<!-- TemplateEndEditable --></div>
<span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a></span><span>
<script id="sothink_widgets:dwwidget_webscroll9_11_2010.sjc" type="text/javascript">
<!--
sts_bs("jwscroller2e8e",[20080623,"../img/","","blank.gif",1,1,1,3,"400px","left",4,0,500,0,0,0,0,0,0,2000,1,40,0,"",-2,80],["none",1,"#006699","transparent","background.gif","repeat-x"]);
sts_tbd([1],["double",2,"#0099CC #FFFFFF",5,"round_tl.gif","round_tr.gif","round_br.gif","round_bl.gif","transparent","round_t.gif","repeat","transparent","round_r.gif","repeat","transparent","round_b.gif","repeat","transparent","round_l.gif","repeat"]);
sts_ai("i0",[0,"info voor op de site? mail de webmaster","","_self","",0,0,"center"],["#FFFFFF","bold 8pt Arial","#000000","none","bold 8pt Arial","#000000","none"]);
sts_es();
//-->
  </script>
</span>
<script type="text/javascript" src="../httpdocs/js/scroller.js"></script>
</body>
</html>
 
Laatst bewerkt door een moderator:
Het is een tijdje geleden dat ik met css gewerkt heb, maar kun je hier iets mee?

Code:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
 
Misschien... waar moet ik dit plaatsen???

Gr. Vredeveld
 
Laatst bewerkt door een moderator:
Ik heb even wat langer naar je code zitten kijken en wat me opvalt is dat je onderstaande class al hebt en daarin de left-margin en right-margin op auto en de width bepaald hebt. Maar vervolgens gebruik je die class nergens. Wat ik me nu afvraag of je in elke divisiontag de class moet plaatsen of dat je het in de bodytag kunt zetten. Misschien dat iemand anders dit kan vertellen?

Code:
.container {
width: 902px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Wat ik zou doen is even onderstaand dik gedrukte, cursieve, onderstreepte deel toevoegen en even testen. Als dat niet werkt, kijken we verder.

Code:
<script type="text/javascript" id="sothink_dhtmlmenu">
<!--
st_siteroot="file:///C|/dw4/dekikkers/httpdocs";
st_jspath="/js/stmenu.js";
if(!window.location.href.indexOf("file:") && st_jspath.charAt(0)=="/")
document.write('<script type="text/javascript" src="'+st_siteroot+st_jspath+'"><\/script>');
else 
document.write('<script type="text/javascript" src="'+st_jspath+'"><\/script>');

//-->
</script>
<script type="text/javascript" src="../httpdocs/js/js/stscode.js"></script>
</head>
<body [B][I][U]class="container"[/U][/I][/B] onload="MM_preloadImages('../httpdocs/afbeeldingen/Bannerbasketballwear.nl.jpg')">
<div id="apDiv11"></div>
<div id="apDiv12">
<!-- Start Bravenet.com Service Code -->
<script language="JavaScript" type="text/javascript" src="http://pub33.bravenet.com/counter/code.php?id=408477&usernum=2807626589&cpv=2">
</script>
<!-- END DO NOT MODIFY -->
 
Laatst bewerkt:
1) Als je HTML code op het forum zet, zeker als het zoveel is, zet het dan in vredesnaam tussen [html*] [/html*] tags (zonder *), dat is een stuk beter leesbaar dan deze brij.

2) Wees spaarzaam met het gebruiken van apDivs (divs met position:absolute;) die gedragen zich anders dan 'normale' divs.

3) In jouw geval is het probleem makkelijk op te lossen door #wrapper position:relative; mee te geven. Daardoor gaan de apDivs (die in de wrapper staan) zich ten opzichte van #wrapper positioneren, in plaats van ten opzichte van <body>, en #wrapper staat al in het midden.
 
Oke, aangepast in het sjabbloon en daarna de index pagina vernieuwd maar helaas niets veranderd oderstaand de aangepast code.
Deze is van de index pagina dus niet van het sjabloon. P.S er wordt een syntax fout gemeld bij regel 395 maar ik heb geen idee of dat er iets mee te maken heeft.
Alvast bedankt voot het proberen....
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De Kikkers</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:75px;
	top:0px;
	width:566px;
	height:34px;
	z-index:1;
}
#apDiv4 {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
.container {
	width: 902px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#apDiv3 ul li {
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
	list-style-type: square;

}
-->
</style>
<script src="SpryAssets/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:246px;
	top:163px;
	width:540px;
	height:579px;
	z-index:2;
	color: #FFF;
	padding: 5px;
	text-align: left;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
	border-right-style: none;
	background-repeat: no-repeat;
	background-image: none;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	margin: auto;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #121212;
}
#apDiv3 {
	position:absolute;
	left:68px;
	top:137px;
	width:159px;
	height:553px;
	z-index:3;
	font-size: 14px;
	background-color: #600;
	padding: 5px;
	margin: 5px;
	text-decoration: underline;
	line-height: 40px;
	border: thin solid #000;
	color: #FFF;
}
#apDiv4 {
	position:absolute;
	left:797px;
	top:142px;
	width:169px;
	height:555px;
	z-index:4;
	background-color: #660000;
	border-bottom: solid;
	border-bottom-color: #600;
}
body {
	background-color: #FFF;

}
body,td,th {
	color: #FFF;
	font-size: 16px;
	padding: 0px;
	width: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	overflow: auto;
	background-color: #999;
	font-family: "Times New Roman", Times, serif;
}
a:link {
	color: #FFF;
	list-style-type: none;
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
}
#apDiv5 {
	position:absolute;
	left:75px;
	top:34px;
	width:167px;
	height:130px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	left:246px;
	top:34px;
	width:549px;
	height:99px;
	z-index:6;
}
#apDiv7 {
	position:absolute;
	left:798px;
	top:34px;
	width:168px;
	height:130px;
	z-index:7;
}
#apDiv8 {
	position:absolute;
	left:10px;
	top:0px;
	width:63px;
	height:702px;
	z-index:8;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #000;
}
#apDiv9 {
	position:absolute;
	left:970px;
	top:-1px;
	width:94px;
	height:707px;
	z-index:9;
	border-left-width: medium;
	border-left-style: solid;
	border-left-color: #600;
}
#apDiv10 {
	position:absolute;
	left:246px;
	top:142px;
	width:550px;
	height:21px;
	z-index:10;
	background-color: #600;
}
#apDiv11 {
	position:absolute;
	left:0px;
	top:0px;
	width:71px;
	height:706px;
	z-index:11;
	border-right-width: medium;
	border-right-style: solid;
	border-right-color: #600;
}
a:visited {
	color: #FFF;
}
a:hover {
	color: #FFF;
	text-decoration: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	list-style-type: none;
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
}
#apDiv12 {
	position:absolute;
	left:73px;
	top:708px;
	width:169px;
	height:47px;
	z-index:12;
	border-top-width: medium;
	border-right-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv13 {
	position:absolute;
	left:248px;
	top:755px;
	width:549px;
	height:37px;
	z-index:13;
	border-top-width: medium;
	border-top-style: none;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv14 {
	position:absolute;
	left:797px;
	top:707px;
	width:173px;
	height:47px;
	z-index:14;
	border-top-width: medium;
	border-left-width: medium;
	border-top-style: none;
	border-left-style: none;
	border-top-color: #600;
	border-left-color: #600;
	font-size: 18px;
}
.style4 {	font-size: 14px;
	font-weight: bold;
}
#apDiv15 {
	position:absolute;
	left:798px;
	top:164px;
	width:172px;
	height:173px;
	z-index:15;
	border-bottom-width: medium;
	border-left-width: thin;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #600;
	border-bottom-color: #FFF;
	border-left-color: #000;
	border-top-width: thin;
	border-top-style: solid;
	margin: 0px;
	padding: 0px;
	color: #FFF;
	background-color: #600;
}
#apDiv16 {
	position:absolute;
	left:799px;
	top:312px;
	width:171px;
	height:170px;
	z-index:16;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv17 {
	position:absolute;
	left:799px;
	top:482px;
	width:171px;
	height:214px;
	z-index:17;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv18 {
	position:absolute;
	left:799px;
	top:338px;
	width:171px;
	height:188px;
	z-index:16;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv19 {
	position:absolute;
	left:798px;
	top:526px;
	width:172px;
	height:178px;
	z-index:17;
	border-left-width: thin;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #000;
	border-left-color: #000;
	color: #FFF;
	background-color: #600;
	border-bottom-style: solid;
}
#apDiv20 {
	position:absolute;
	left:798px;
	top:338px;
	width:172px;
	height:188px;
	z-index:18;
	border-bottom-width: thin;
	border-left-width: thin;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #600;
	border-bottom-color: #FFF;
	border-left-color: #000;
	color: #FFF;
	background-color: #600;
	border-top-width: thin;
	border-top-style: none;
	text-align: center;
}
#apDiv21 {
	position:absolute;
	left:801px;
	top:756px;
	width:179px;
	height:108px;
	z-index:19;
}
#apDiv22 {
	position:absolute;
	left:246px;
	top:706px;
	width:552px;
	height:45px;
	z-index:20;
}
-->
</style>
<script type="text/javascript" id="sothink_dhtmlmenu">
<!--
st_siteroot="file:///C|/dw4/dekikkers/httpdocs";
 st_jspath="/js/stmenu.js";
 if(!window.location.href.indexOf("file:") && st_jspath.charAt(0)=="/")
  document.write('<script type="text/javascript" src="'+st_siteroot+st_jspath+'"><\/script>');
 else 
  document.write('<script type="text/javascript" src="'+st_jspath+'"><\/script>');

//-->
</script>
<script type="text/javascript" src="js/js/stscode.js"></script>
</head>
<body class="container" onload="MM_preloadImages('afbeeldingen/Bannerbasketballwear.nl.jpg')">
<div id="apDiv11"></div>
<div id="apDiv12">
  <!-- Start Bravenet.com Service Code -->
  <script language="JavaScript" type="text/javascript" src="http://pub33.bravenet.com/counter/code.php?id=408477&usernum=2807626589&cpv=2">
</script>
  <!-- END DO NOT MODIFY -->
</div>
<div id="apDiv13"><img src="afbeeldingen/Basketbal D1 019w e.jpg" width="549" height="102" /></div>
<div id="apDiv14"></div>
<div id="apDiv15"><!-- InstanceBeginEditable name="EditRegion2" --> 
  <p>Overzicht van de te spelen</p>
  <p>wedstrijden voor de komende 2 weken <a href="http://west.basketball.nl/db/wedstrijd/clubprogramma.pl?&amp;szn_Naam=2012-2013&amp;clb_ID=164&amp;tonen=Schema+tonen&amp;periode=2&amp;poule=on" target="_blank">HIER</a></p>
  <div align="center">
    <p> Uitslagen  Kikkers<a href="http://west.basketball.nl/db/overzicht/clubuitslag.pl?&amp;szn_Naam=2012-2013&amp;clb_ID=164&amp;tonen=Uitslagen+tonen&amp;hele_seizoen=on" target="_blank"> HIER</a></p>
    <p>Standen Kikkers<a href="http://west.basketball.nl/db/overzicht/clubstanden.pl?&amp;szn_Naam=2012-2013&amp;clb_ID=164" target="_blank"> HIER</a></p>
</div>
<!-- InstanceEndEditable --></div>
<div id="apDiv19"><!-- InstanceBeginEditable name="EditRegion4" -->
  <div align="center">
    <p>&nbsp;</p>
<p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
<!-- InstanceEndEditable --></div>
<div id="apDiv20"><!-- InstanceBeginEditable name="EditRegion3" -->
  <p>&nbsp;</p>
<!-- InstanceEndEditable --></div>
<div id="apDiv21"></div>
<div align="left"></div>
<a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a>
<div id="apDiv1"><span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
  <script id="sothink_widgets:dwwidget_dhtmlmenu2_8_2010.pgt" type="text/javascript">
<!--
stm_bm(["menu1a91",900,"/img","blank.gif",0,"","",0,0,250,0,500,1,0,0,"http://dekikkers.nl/","",67108897,0,1,2,"default","hand","file:///C|/dw4/dekikkers/httpdocs",1,25],this);
stm_bp("p0",[0,4,0,0,0,7,5,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","bg_01.gif",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Heren","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#FFFFFF",0,"","bg_02.gif",3,1,0,0,"#FFFFF7","#000000","#FFFFFF","#FFFFFF","bold 9pt Arial","bold 9pt Arial",0,0,"","","","",0,0,0],149,30);
stm_bpx("p1","p0",[1,4,0,2,0,0,0,0,100,"",-2,"",-2,80,0,0,"#666666","#FFFFFF","",3,0,0]);
stm_ai("p1i0",[0,"Heren 1","","",-1,-1,0,"heren1.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#FFFFF7",1,"#FFFFF7",1,"round18_m.gif","round09_m.gif",3,3,0,0,"#FFFFF7","#000000","#FFFFFF","#000000","8pt 'Arial','Verdana'","8pt 'Arial','Verdana'",0,0,"round18_l.gif","round09_l.gif","round18_r.gif","round09_r.gif",11,11,26],150,18);
stm_aix("p1i1","p1i0",[0,"Heren 2","","",-1,-1,0,"heren2.html"],150,18);
stm_aix("p1i2","p1i0",[0,"Heren 3","","",-1,-1,0,"heren3.html"],150,18);
stm_aix("p1i3","p1i0",[0,"old kikkers","","",-1,-1,0,"oldkikkers.html"],150,0);
stm_ep();
stm_ai("p0i1",[6,1,"#990000","",-1,-1,0]);
stm_aix("p0i2","p0i0",[0,"Dames","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",1],149,30);
stm_bpx("p2","p1",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000"]);
stm_aix("p2i0","p1i0",[0,"Dames 1","","",-1,-1,0,"dames1.html"],150,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Jeugd Meisjes"],149,30);
stm_bpx("p3","p0",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000",""]);
stm_aix("p3i0","p1i0",[0,"Meisjes u 18","","",-1,-1,0,"meisjesu18.html"],150,18);
stm_aix("p3i1","p1i0",[0,"Meisjes u 14","","",-1,-1,0,"meisjesu14.html"],150,18);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Jeugd Jongens"],149,30);
stm_bpx("p4","p3",[]);
stm_aix("p4i0","p1i0",[0,"Jongens u 16","","",-1,-1,0,"jongensu16.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 18 ","","",-1,-1,0,"jongensu18.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 14 ","","",-1,-1,0,"jongensu14.html"],150,0);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Jeugd tot u 12"],149,30);
stm_bpx("p5","p3",[]);
stm_aix("p5i0","p1i0",[0,"Meisjes u 12","","",-1,-1,0,"meisjesu12.html"],150,18);
stm_aix("p5i1","p1i0",[0,"Jongens u 12.1","","",-1,-1,0,"jongensu12.1.html"],150,18);
stm_aix("p5i2","p1i0",[0,"jongens u 12.2","","",-1,-1,0,"jongensu12.2.html"],150,0);
stm_ep();
stm_aix("p0i9","p0i1",[]);
stm_aix("p0i10","p0i2",[0,"Mix","","",-1,-1,0,""],149,30);
stm_bpx("p6","p3",[]);
stm_aix("p6i1","p1i0",[0,"mix U 8/10","","",-1,-1,0,"mixu8enu10.html"],150,0);
stm_ep();
stm_ep();
stm_em();
//-->
    </script>
</span></div>
<div id="apDiv2"><!-- InstanceBeginEditable name="inhoud" -->
  <div align="center">
    <h2>&nbsp;</h2>
    <h2>Welkom op de site van<br />
      De KIKKERS</h2>
    <p><br>       
      </p>
    <p>Op deze site vind je alles over basketball vereniging de Kikkers uit Borne.</p>
    <p>Bij de Kikkers is zowel presteren als gezelligheid erg belangrijk.</p>
<p>&nbsp;</p>
    <p>Onze vereniging bestaat uit zo'n 150 leden, verdeelt over 8 in competitie spelende<br>       
      jeugdteams, 2 competitie spelende seniorenteams en 2 senioren recreatieteams.<br>       
    </p>
    <p>Onze thuisbasis is sporthal 't Wooldrik,<br>       
      waar wij op zaterdag onze thuiswedstrijden spelen.<br>       
      </p>
    <p>&nbsp;</p>
    <p>Neem eem kijkje op onze site en voor vragen, opmerkingen enz...<br>       
      gaarne mailen naar <a href="mailto:webmaster@dekikkers.nl">webmaster@dekikkers.nl</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="afbeeldingen/logo.gif" width="294" height="101" /></p>
  </div>
<p align="left">&nbsp;</p>
  <p align="left">&nbsp;</p>
  <p align="left">&nbsp;</p>
  <p align="left">&nbsp;</p>
  <blockquote>
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote>
            <blockquote>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
              <p class="style4">&nbsp;</p>
            </blockquote>
          </blockquote>
        </blockquote>
      </blockquote>
    </blockquote>
  </blockquote>
<p align="center" class="style4">&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
<!-- InstanceEndEditable --></div>
<div id="apDiv3">
  <ul>
    <li style="list-style-type: square; list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);"><a href="index.html">Home</a></li>
    <li><a href="organisatie.html">Organisatie</a></li>
    <li><a href="/fotos.html">Foto's</a></li>
    <li><a href="nieuws.html">Nieuws</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="sponsoren.html">Sponsoren</a></li>
    <li><a href="/bewaarboekje.html">Bewaarboekje</a></li>
    <li><a href="rayonoost.html">Rayon-oost</a></li>
    <li><a href="../inschrijven.html">Inschrijven</a></li>
    <li><a href="/shoutbox.html">Shoutbo</a>x</li>
  </ul>
</div>
<div id="apDiv5"><img src="afbeeldingen/logo de kikkers c.jpg" width="171" height="129" /></div>
<div id="apDiv6"><a href="http://www.basketballwear.nl/" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding5','','afbeeldingen/Bannerbasketballwear.nl.jpg',1)"><img src="afbeeldingen/headimage.jpg" name="Afbeelding5" width="553" height="130" border="0" id="Afbeelding5" /></a></div>
<div id="apDiv7"><img src="afbeeldingen/temp_man4.jpg" width="169" height="169" /></div>
<div id="apDiv9"><!-- InstanceBeginEditable name="EditRegion5" -->
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src="afbeeldingen/Sponsoren site.jpg" width="173" height="525" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="6,424,171,517" href="http://www.tonniezuur.nl" target="_blank" />
      <area shape="rect" coords="10,358,165,409" href="http://www.google.nl/search?q=de+eetkamer+borne&amp;sourceid=ie7&amp;rls=com.microsoft:nl:IE-SearchBox&amp;ie=&amp;oe=&amp;rlz=1I7ADRA_en&amp;redir_esc=&amp;ei=u1wJT8S2H4jj8AP1_s3LAQ" target="_blank" />
      <area shape="rect" coords="8,266,169,342" href="http://www.alkoof.nl" target="_blank" />
      <area shape="rect" coords="8,205,169,257" href="http://www.comflex.nl" target="_blank" />
      <area shape="rect" coords="8,96,166,191" href="http://www.vorgers.nl" target="_blank" />
      <area shape="rect" coords="2,8,166,83" href="http://www.dekoningschilders.nl" target="_blank" />
    </map>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>5</p>
<!-- InstanceEndEditable --></div>
<span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a></span><span>
<script id="sothink_widgets:dwwidget_webscroll9_11_2010.sjc" type="text/javascript">
<!--
sts_bs("jwscroller2e8e",[20080623,"../img/","","blank.gif",1,1,1,3,"400px","left",4,0,500,0,0,0,0,0,0,2000,1,40,0,"",-2,80],["none",1,"#006699","transparent","background.gif","repeat-x"]);
sts_tbd([1],["double",2,"#0099CC #FFFFFF",5,"round_tl.gif","round_tr.gif","round_br.gif","round_bl.gif","transparent","round_t.gif","repeat","transparent","round_r.gif","repeat","transparent","round_b.gif","repeat","transparent","round_l.gif","repeat"]);
sts_ai("i0",[0,"info voor op de site? mail de webmaster","","_self","",0,0,"center"],["#FFFFFF","bold 8pt Arial","#000000","none","bold 8pt Arial","#000000","none"]);
sts_es();
//-->
  </script>
</span>
<script type="text/javascript" src="js/scroller.js"></script>
</body>
<!-- InstanceEnd --></html>

Oke, sorry daarvoor Naarling (ik ben een beginner) heb een wrapper geplaatst met positie relative maar ik zal toch wel iets niet goed doen want de site staat nog steeds links, nog een idee?
HTML:
</script>
<script type="text/javascript" src="../httpdocs/js/js/stscode.js"></script>
</head>
<body class="container" onload="MM_preloadImages('../httpdocs/afbeeldingen/Bannerbasketballwear.nl.jpg')">
<div id="wrapper"> position:relative;
  <div id="apDiv11"></div>
  <div id="apDiv12">
Alvast bedankt.
Vredeveld
 
Laatst bewerkt door een moderator:
Hoi Vredeveld,
De #wrapper staat op dit moment behoorlijk op de verkeerde plaats. Zo'n wrapper moet altijd binnen de <body>...</body> komen; deze mag niet in de <head> en al helemaal niet als schil om de <html> heen (vóór de <html>-tag mag alleen het Doctype staan).
Maar hier is een extra wrapper niet nodig: de <body> zelf kan gecentreerd worden.
Zoals Naarling al zei: al die apDiv's met absolute posities zijn ver-schrik-ke-lijk onhandig... :rolleyes:


  • Zodra je iets aan de inhoud van een apDiv gaat doen (meer of minder tekst bv.), dan past het niet alleen niet in deze ene apDiv, maar alle andere apDiv's eromheen kloppen ook niet meer: de dingen zijn vreselijk star!
  • Bij de homepage speelt ook nog mee, dat deze door de buiten de pagina vallende advertentie/sponsor-kolom aan de rechterkant niet meer dezelfde paginabreedte heeft als alle andere pagina's. Dat geeft een schokeffect bij het verlaten van de homepage!
  • Verder: als je de pagina gaat centreren, moeten alle nu bestaande apDiv's andere posities krijgen (nu t.o.v. de gecentreerde body). D.w.z. vooral andere afstanden tot de linkerkant.

Eigenlijk zou de hele site herbouwd moeten worden tot een mooi flexibel model zonder apDiv's.
Dat is even een klusje, maar daarna wordt het onderhoud van de site er veel gemakkelijker op.

Noodmaatregelen treffen
Maar je kunt zonder meteen alles te herbouwen wel een aantal tussentijdse noodmaatregelen treffen, met name voor de homepage: want dat is het visitekaartje.
Voor dat noodverband moet dan het volgende gebeuren:

1. de HTML aanpassen
  • Eerst alles valid html maken, zodat html-fouten niet in de weg kunnen zitten bij de opmaak.
  • Een linkerkolom, middenkolom en een rechterkolom aanleggen die flexibel in hoogte zijn. Dat kan door bestaande apDiv's een relatieve positie te geven, en ze te laten drijven: {float: left;} voor de linker en middelste kolom, en {float: right;} voor de rechterkolom bijvoorbeeld. Alle sporen van starheid (m.n. vaste hoogtes) moeten daarbij verwijderd worden.
  • In feite maak je relDiv's van de apDiv's! :)
  • De volgorde van apDiv's kan willekeurig zijn, maar bij relatief gepositioneerde containers niet. Daarom moeten een aantal <div>'s in een andere volgorde komen te staan.
  • Ook moeten sommige div's opgenomen worden in andere (bv. de teller in de linkerkolom, de advertenties in de rechterkolom), zodat alles soepel gaat lopen.
  • Op het laatst in de html kan een <div id="footer"> komen: die zorgt ervoor dat de Wibija-toolbar niet over de site heen gaat lopen, en trekt tegelijk de achtergrondkleur van de pagina door tot op de bodem.
  • Een waanzinnige extra speling onderaan de pagina is dan niet meer nodig: de paginahoogte gaat zich automatisch aanpassen aan wat er in staat. Welke van de 3 kolommen het hoogst is, het gaat altijd goed!

=======
1. de CSS aanpassen
Heb je dat gedaan, dan kan je de volgende EHBO-css aan je styles toevoegen:
Code:
/* ============================================== EHBO-css toevoegen : ========================================= */
html { background: #999999; }
body { width: 901px; position: relative; background: #660000; }
#apDiv1 { left: 0; padding: 5px 0; width: 902px; background: #999999; }
#apDiv2 { position: relative; float: left; left: auto; top: auto; margin-top: 174px; width: 541px; height: auto; 
		border-left: 1px solid #404040; border-right: 1px solid #404040; border-bottom: 1px solid #404040; }
#apDiv3 { position: relative; float: left; left: auto; margin: 174px 0 0 0; top: auto; width: 159px; height: auto; 
		border: solid #000000; border-width: 0 0 0 1px; }
#apDiv5 { left: 0; top: 42px; width: 171px; background: black; height: 131px; border-bottom: 1px solid #404040;}
#apDiv7 { left: 723px; top: 42px; width: 177px; border: solid; border-width: 1px 1px 1px 0; border-color: black black #404040 black;}
#apDiv7 img { width: 177px !important; height: 130px !important; }
#apDiv6 { left: 171px; top: 42px; width: 553px; height: 130px; border-top: 1px solid black; border-bottom: 1px solid #404040; }
#apDiv9 { position: relative; clear: right; float: right; left: auto; top: auto; margin: 0 1px 0 0; padding: 0 2px; width: 172px; 
		height: 524px; overflow: hidden; border: 0; border-right: 1px solid black; background: #660000; }
#apDiv12 { position: relative; top: auto; left: auto; margin-top: 250px; }
#apDiv13 { display: none; }
#apDiv15 { position: relative; float: right; left: 0; margin-right: 1px; top: auto; margin-top: 174px; border: 0; 
		border-right: 1px solid black; width: 160px; padding: 0 8px 30px 8px; }
#apDiv19 { display: none; }
#apDiv20 { display: none; }
#footer { clear: both; height: 60px; }
/* ============================================== einde EHBO-css =============================================== */
Deze css maakt een aantal eerdere css-styles ongedaan (o.a. die absolute posities), en moet als laatste onderaan het laatste styleblok in de <head> toegevoegd worden. Op deze manier hoeven niet alle styles die erboven staan omgewerkt te worden: die worden zo nodig overruled (en de rest blijft gewoon gelden).

=======


  • Test voor de homepage: kikkers-index-nw.htm.

  • In de broncode zijn de volgorde-veranderingen van de <div's te zien, en nog wat aanpassingen daarin.
    O.a. alle lege <p>&nbsp;</p>'s om afstanden te creëren zijn afgeschaft, want die laten de pagina op hol slaan.
  • Op deze manier kunnen ook de andere pagina's aangepakt worden; wellicht moet er daarvoor nog wat aanvullende css bij.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Kijk hier kan ik iets mee, mijn dank is grooooooot en ik ga er mee aan de slag.
Als ik de broncode van de testpagina nu ga gebruiken voor mijn index-pagina en
aan de hand daarvan mijn sjabloon aanpas zou het dan goed komen?

Nogmaals vele malen dank,

Vredeveld
 
css-hunter, ben bezig om de veranderingen door te voeren in het sjabloon maar wordt een rommeltje:confused:
Is er een manier dat jij naar het sjabloon kijkt om te zien of deze gered kan worden of wordt het toch een
nieuwe site?

Alsnog vele malen dank,

Vredeveld
 
Hoi Vredeveld,
... zou het dan goed komen?
Nee, helaas, dan gaat het nog steeds fout op de andere pagina's.

Dan moet je eerst ...

Hola, ik was al even bezig een antwoord en een voorbeeld-pagina te fabrieken, maar zie nu net een nieuwe reactie van je uit het niets komen.

Wordt vervolgd!
 
Juistem, dat klopt met wat ik wilde gaan zeggen.

Je moet nu niet meteen het sjabloon gaan aanpassen, dan komt inderdaad alles op de andere pagina's schots en scheef te staan.
Die apDiv's zijn net een kruiwagen vol kikkers. ;)

Je kunt wel:
Mijn nieuwe index-pagina overnemen, mits je de "EHBO-css" los opneemt in een editable stukje van de <head> van (alleen) deze pagina. Het oude sjabloon blijft dan daarnaast voor deze pagina van kracht (en voor alle ander pagina's ook).
  • Dit kan je eerst even proberen op een testpagina!

De andere pagina's
Hierbij zijn er twee problemen:
  1. Wil mijn EHBO-css werken, dan moet de volgorde van de apDiv's op elke pagina anders worden (net zoals bij de nieuwe index-pagina gebeurd is).
  2. Er zitten op andere pagina's ook andere apDiv's, die nog niet in de index-pagina stonden, en ook nog niet in de EHBO-css zijn aangepast!

Bij probleem 1
Met wat ik nu gezien heb (lang niet alle pagina's bekeken!), moet de volgorde in de html-code op elke pagina worden:
Code:
<div id="apDiv13">
<div id="apDiv3">
<div id="apDiv12">(attentie: binnen apDiv3, helemaal op het eind daarvan)
<div id="apDiv2">(attentie: hierin de afbeelding onderaan opnemen)
<div id="apDiv15">
<div id="apDiv20">(attentie: binnen apDiv15, helemaal op het eind daarvan)
<div id="apDiv9">
<div id="apDiv19">
<div id="apDiv1">
<div id="apDiv5">
<div id="apDiv6">
<div id="apDiv7">
<div id="footer"></div>
<body>
</html>
  • Ook hier kan je per andere pagina een test-pagina maken met de nieuwe volgorde en de EHBO-css los in de <head>.
  • Als het goed is, moet je alle verder lege apDiv's kunnen ontdoen van alle <p>&nbsp;</p>'s; die kunnen de zaak alleen maar in de war brengen.
  • Dan blijft probleem 2 over.


Bij probleem 2
Per andere pagina die je onderhanden hebt, zullen er nu 1 of meer apDiv's op vreemde plaatsen op de pagina zwerven, omdat die eerder nog niet bijgesteld zijn of buiten werking gesteld zijn omdat ze daar in de weg stonden.
Deze nieuw tegengekomen apDiv's moeten alsnog óók CSS-pleisters krijgen om goed mee te doen met de rest!
Daarbij kan het nodig zijn om ook een al wel behandelde apDiv nog wat aan te passen! (dat moet dan gecheckt worden op de al in orde gemaakte nieuwe pagina's!).

============
Proef op de som
Voor de test heb ik de pagina "Organisatie" bij de kladden gepakt.
  • De volgorde veranderd volgens bovenstaand recept.
  • Uit de lege apDiv's de overtollige <p>'s weggehaald.
  • Wat nieuwe CSS-pleisters verzonnen voor nieuwe apDiv's.
  • En wat verse zalf voor een paar al behandelde apDiv's.

De nieuwe pleisters heb ik toegevoegd aan het EHBO-doosje, op het eind zodat de rest blijft doordraaien (het worden dan wel pleisters op pleisters, maar het werkt wel snel):
Code:
/* vervolg CSS-pleisters ============================================================= */

#apDiv11 { display: none; }
#apDiv14 { display: none; }
#apDiv21 { display: none; }

#apDiv9 { height: auto; }
#apDiv15 { height: auto; }
#apDiv20 { display: block; position: relative; left: 0; top: 0; width: auto; height: auto; margin-top: 40px; 
		border: 0; border-top: 1px solid #404040; }
/* einde vervolg CSS-pleisters ========================================================= */
En het resultaat voor deze pagina:



Als alle pagina's op deze manier behandeld zijn, kan de EHBO-css met alle extra pleisters toegevoegd worden aan het sjabloon (en weer weggehaald worden uit alle pagina's).

============
... of wordt het toch een nieuwe site?
Nou, dat zou nog wel eens sneller kunnen gaan ook.
Wat er dan moet gebeuren:
  • Een nieuw (en veel eenvoudiger) sjabloon maken.
  • Nieuwe pagina's maken door het sjabloon vol te laten lopen met de inhoud van de oude pagina's (om de structuur van de oude pagina's en al die apDiv's hoef je je dan niet te bekommeren).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Css-hunter,

Nogmaals bedankt dat je de tijd neemt om mij te helpen (en natuurlijk alle kikkers).
Ga er mee bezig omdat de organisatie pagina er een stuk beter uitziet maar moet eerst werken:(
Mijn sjabloon ziet er zo uit:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>De Kikkers</title>
  <style type="text/css">
<!--
}
.container {
	width: 902px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;

	
}	
#apDiv1 {
	position:absolute;
	left:75px;
	top:0px;
	width:566px;
	height:34px;
	z-index:1;
}
#apDiv4 {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;

}
#apDiv3 ul li {
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
	list-style-type: square;

}
-->
  </style>
  <script src="../httpdocs/SpryAssets/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  <script src="../httpdocs/SpryAssets/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
  <link href="../httpdocs/SpryAssets/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
  <link href="../httpdocs/SpryAssets/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	left:246px;
	top:163px;
	width:540px;
	height:579px;
	z-index:2;
	color: #FFF;
	padding: 5px;
	text-align: left;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
	border-right-style: none;
	background-repeat: no-repeat;
	background-image: none;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	margin: auto;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #121212;
}
#apDiv3 {
	position:absolute;
	left:68px;
	top:137px;
	width:159px;
	height:553px;
	z-index:3;
	font-size: 14px;
	background-color: #600;
	padding: 5px;
	margin: 5px;
	text-decoration: underline;
	line-height: 40px;
	border: thin solid #000;
	color: #FFF;
}
#apDiv4 {
	position:absolute;
	left:797px;
	top:142px;
	width:169px;
	height:555px;
	z-index:4;
	background-color: #660000;
	border-bottom: solid;
	border-bottom-color: #600;
}
body {
	background-color: #FFF;

}
body,td,th {
	color: #FFF;
	font-size: 16px;
	padding: 0px;
	width: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	overflow: auto;
	background-color: #999;
	font-family: "Times New Roman", Times, serif;
}
a:link {
	color: #FFF;
	list-style-type: none;
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
}
#wrapper {
	margin-right: auto;
	margin-left: auto;
	position: relative;	
}
#apDiv5 {
	position:absolute;
	left:75px;
	top:34px;
	width:167px;
	height:130px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	left:246px;
	top:34px;
	width:549px;
	height:99px;
	z-index:6;
}
#apDiv7 {
	position:absolute;
	left:798px;
	top:34px;
	width:168px;
	height:130px;
	z-index:7;
}
#apDiv8 {
	position:absolute;
	left:10px;
	top:0px;
	width:63px;
	height:702px;
	z-index:8;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #000;
}
#apDiv9 {
	position:absolute;
	left:970px;
	top:-1px;
	width:94px;
	height:707px;
	z-index:9;
	border-left-width: medium;
	border-left-style: solid;
	border-left-color: #600;
}
#apDiv10 {
	position:absolute;
	left:246px;
	top:142px;
	width:550px;
	height:21px;
	z-index:10;
	background-color: #600;
}
#apDiv11 {
	position:absolute;
	left:0px;
	top:0px;
	width:71px;
	height:706px;
	z-index:11;
	border-right-width: medium;
	border-right-style: solid;
	border-right-color: #600;
}
a:visited {
	color: #FFF;
}
a:hover {
	color: #FFF;
	text-decoration: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
	list-style-type: none;
	list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);
}
#apDiv12 {
	position:absolute;
	left:73px;
	top:708px;
	width:169px;
	height:47px;
	z-index:12;
	border-top-width: medium;
	border-right-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv13 {
	position:absolute;
	left:248px;
	top:755px;
	width:549px;
	height:37px;
	z-index:13;
	border-top-width: medium;
	border-top-style: none;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv14 {
	position:absolute;
	left:797px;
	top:707px;
	width:173px;
	height:47px;
	z-index:14;
	border-top-width: medium;
	border-left-width: medium;
	border-top-style: none;
	border-left-style: none;
	border-top-color: #600;
	border-left-color: #600;
	font-size: 18px;
}
.style4 {	font-size: 14px;
	font-weight: bold;
}
#apDiv15 {
	position:absolute;
	left:798px;
	top:164px;
	width:172px;
	height:173px;
	z-index:15;
	border-bottom-width: medium;
	border-left-width: thin;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #600;
	border-bottom-color: #FFF;
	border-left-color: #000;
	border-top-width: thin;
	border-top-style: solid;
	margin: 0px;
	padding: 0px;
	color: #FFF;
	background-color: #600;
}
#apDiv16 {
	position:absolute;
	left:799px;
	top:312px;
	width:171px;
	height:170px;
	z-index:16;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv17 {
	position:absolute;
	left:799px;
	top:482px;
	width:171px;
	height:214px;
	z-index:17;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv18 {
	position:absolute;
	left:799px;
	top:338px;
	width:171px;
	height:188px;
	z-index:16;
	border-bottom-width: medium;
	border-left-width: medium;
	border-bottom-style: dashed;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}
#apDiv19 {
	position:absolute;
	left:798px;
	top:526px;
	width:172px;
	height:178px;
	z-index:17;
	border-left-width: thin;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #000;
	border-left-color: #000;
	color: #FFF;
	background-color: #600;
	border-bottom-style: solid;
}
#apDiv20 {
	position:absolute;
	left:798px;
	top:338px;
	width:172px;
	height:188px;
	z-index:18;
	border-bottom-width: thin;
	border-left-width: thin;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #600;
	border-bottom-color: #FFF;
	border-left-color: #000;
	color: #FFF;
	background-color: #600;
	border-top-width: thin;
	border-top-style: none;
	text-align: center;
}
#apDiv21 {
	position:absolute;
	left:801px;
	top:756px;
	width:179px;
	height:108px;
	z-index:19;
}
#apDiv22 {
	position:absolute;
	left:246px;
	top:706px;
	width:552px;
	height:45px;
	z-index:20;
}
-->
</style>
  <script type="text/javascript" id="sothink_dhtmlmenu">
<!--
st_siteroot="file:///C|/dw4/dekikkers/httpdocs";
 st_jspath="/js/stmenu.js";
 if(!window.location.href.indexOf("file:") && st_jspath.charAt(0)=="/")
  document.write('<script type="text/javascript" src="'+st_siteroot+st_jspath+'"><\/script>');
 else 
  document.write('<script type="text/javascript" src="'+st_jspath+'"><\/script>');

//-->
</script>
  <script type="text/javascript" src="../httpdocs/js/js/stscode.js"></script>
  </head>
  <body class="container" onload="MM_preloadImages('../httpdocs/afbeeldingen/Bannerbasketballwear.nl.jpg')">
    
  <div id="apDiv11"></div>
    <div id="apDiv12">
      <!-- Start Bravenet.com Service Code -->
      <script language="JavaScript" type="text/javascript" src="http://pub33.bravenet.com/counter/code.php?id=408477&usernum=2807626589&cpv=2">
</script>
      <!-- END DO NOT MODIFY -->
    </div>
    <div id="apDiv13"><img src="../httpdocs/afbeeldingen/Basketbal D1 019w e.jpg" width="549" height="102" /></div>
    <div id="apDiv14"></div>
    <div id="apDiv15"><!-- TemplateBeginEditable name="EditRegion2" -->
      <div align="center">
        <h2>nieuws</h2>
        <p>vak nummer 1</p>
      </div>
    <!-- TemplateEndEditable --></div>
    <div id="apDiv19"><!-- TemplateBeginEditable name="EditRegion4" -->
      <div align="center">
        <h2>nieuws</h2>
        <p>vak nummer 3</p>
      </div>
    <!-- TemplateEndEditable --></div>
    <div id="apDiv20"><!-- TemplateBeginEditable name="EditRegion3" -->
      <div align="center">
        <h2>nieuws</h2>
        <p>vak num</p>
        <p>&nbsp;</p>
        <p>mer 2</p>
      </div>
    <!-- TemplateEndEditable --></div>
    <div id="apDiv21"></div>
    <div align="left"></div>
    <a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a>
    <div id="apDiv1"><span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
      <script id="sothink_widgets:dwwidget_dhtmlmenu2_8_2010.pgt" type="text/javascript">
<!--
stm_bm(["menu1a91",900,"/img","blank.gif",0,"","",0,0,250,0,500,1,0,0,"http://dekikkers.nl/","",67108897,0,1,2,"default","hand","file:///C|/dw4/dekikkers/httpdocs",1,25],this);
stm_bp("p0",[0,4,0,0,0,7,5,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","bg_01.gif",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Heren","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#FFFFFF",0,"","bg_02.gif",3,1,0,0,"#FFFFF7","#000000","#FFFFFF","#FFFFFF","bold 9pt Arial","bold 9pt Arial",0,0,"","","","",0,0,0],149,30);
stm_bpx("p1","p0",[1,4,0,2,0,0,0,0,100,"",-2,"",-2,80,0,0,"#666666","#FFFFFF","",3,0,0]);
stm_ai("p1i0",[0,"Heren 1","","",-1,-1,0,"heren1.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#FFFFF7",1,"#FFFFF7",1,"round18_m.gif","round09_m.gif",3,3,0,0,"#FFFFF7","#000000","#FFFFFF","#000000","8pt 'Arial','Verdana'","8pt 'Arial','Verdana'",0,0,"round18_l.gif","round09_l.gif","round18_r.gif","round09_r.gif",11,11,26],150,18);
stm_aix("p1i1","p1i0",[0,"Heren 2","","",-1,-1,0,"heren2.html"],150,18);
stm_aix("p1i2","p1i0",[0,"Heren 3","","",-1,-1,0,"heren3.html"],150,18);
stm_aix("p1i3","p1i0",[0,"old kikkers","","",-1,-1,0,"oldkikkers.html"],150,0);
stm_ep();
stm_ai("p0i1",[6,1,"#990000","",-1,-1,0]);
stm_aix("p0i2","p0i0",[0,"Dames","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#993333",1,"","bg_02.gif",1],149,30);
stm_bpx("p2","p1",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000"]);
stm_aix("p2i0","p1i0",[0,"Dames 1","","",-1,-1,0,"dames1.html"],150,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Jeugd Meisjes"],149,30);
stm_bpx("p3","p0",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000",""]);
stm_aix("p3i0","p1i0",[0,"Meisjes u 18","","",-1,-1,0,"meisjesu18.html"],150,18);
stm_aix("p3i1","p1i0",[0,"Meisjes u 14","","",-1,-1,0,"meisjesu14.html"],150,18);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Jeugd Jongens"],149,30);
stm_bpx("p4","p3",[]);
stm_aix("p4i0","p1i0",[0,"Jongens u 16","","",-1,-1,0,"jongensu16.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 18 ","","",-1,-1,0,"jongensu18.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 14 ","","",-1,-1,0,"jongensu14.html"],150,0);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Jeugd tot u 12"],149,30);
stm_bpx("p5","p3",[]);
stm_aix("p5i0","p1i0",[0,"Meisjes u 12","","",-1,-1,0,"meisjesu12.html"],150,18);
stm_aix("p5i1","p1i0",[0,"Jongens u 12.1","","",-1,-1,0,"jongensu12.1.html"],150,18);
stm_aix("p5i2","p1i0",[0,"jongens u 12.2","","",-1,-1,0,"jongensu12.2.html"],150,0);
stm_ep();
stm_aix("p0i9","p0i1",[]);
stm_aix("p0i10","p0i2",[0,"Mix","","",-1,-1,0,""],149,30);
stm_bpx("p6","p3",[]);
stm_aix("p6i1","p1i0",[0,"mix U 8/10","","",-1,-1,0,"mixu8enu10.html"],150,0);
stm_ep();
stm_ep();
stm_em();
//-->
    </script>
    </span></div>
    <div id="apDiv2"><!-- TemplateBeginEditable name="inhoud" -->
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    <!-- TemplateEndEditable --></div>
    <div id="apDiv3">
      <ul>
        <li style="list-style-type: square; list-style-image: url(/httpdocs/afbeeldingen/blokje.gif);"><a href="../httpdocs/index.html">Home</a></li>
        <li><a href="../httpdocs/organisatie.html">Organisatie</a></li>
        <li><a href="/fotos.html">Foto's</a></li>
        <li><a href="../httpdocs/nieuws.html">Nieuws</a></li>
        <li><a href="../httpdocs/links.html">Links</a></li>
        <li><a href="../httpdocs/sponsoren.html">Sponsoren</a></li>
        <li><a href="/bewaarboekje.html">Bewaarboekje</a></li>
        <li><a href="../httpdocs/rayonoost.html">Rayon-oost</a></li>
        <li><a href="../inschrijven.html">Inschrijven</a></li>
        <li><a href="/shoutbox.html">Shoutb</a><a href="/shoutbox.html">o</a>x</li>
      </ul>
      <p>&nbsp;</p>
    </div>
    <div id="apDiv5"><img src="../httpdocs/afbeeldingen/logo de kikkers c.jpg" width="171" height="129" /></div>
    <div id="apDiv6"><a href="http://www.basketballwear.nl/" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Afbeelding5','','../httpdocs/afbeeldingen/Bannerbasketballwear.nl.jpg',1)"><img src="../httpdocs/afbeeldingen/headimage.jpg" name="Afbeelding5" width="553" height="130" border="0" id="Afbeelding5" /></a></div>
    <div id="apDiv7"><img src="../httpdocs/afbeeldingen/temp_man4.jpg" width="169" height="169" /></div>
    <div id="apDiv9"><!-- TemplateBeginEditable name="EditRegion5" -->
      <p><img src="../httpdocs/afbeeldingen/rechts.jpg" width="120" height="675" /></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>5</p>
    <!-- TemplateEndEditable --></div>
    <span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a></span><span>
    <script id="sothink_widgets:dwwidget_webscroll9_11_2010.sjc" type="text/javascript">
<!--
sts_bs("jwscroller2e8e",[20080623,"../img/","","blank.gif",1,1,1,3,"400px","left",4,0,500,0,0,0,0,0,0,2000,1,40,0,"",-2,80],["none",1,"#006699","transparent","background.gif","repeat-x"]);
sts_tbd([1],["double",2,"#0099CC #FFFFFF",5,"round_tl.gif","round_tr.gif","round_br.gif","round_bl.gif","transparent","round_t.gif","repeat","transparent","round_r.gif","repeat","transparent","round_b.gif","repeat","transparent","round_l.gif","repeat"]);
sts_ai("i0",[0,"info voor op de site? mail de webmaster","","_self","",0,0,"center"],["#FFFFFF","bold 8pt Arial","#000000","none","bold 8pt Arial","#000000","none"]);
sts_es();
//-->
  </script>
    </span>
    <script type="text/javascript" src="../httpdocs/js/scroller.js"></script>
  </div>
  </body>
  </html>
</div>
En het zou dan volgens mij makkelijker zijn om deze aan te passen en dan de rest van de pagina's aan de hand van deze te updaten.

Groeten Vredeveld
 
Laatst bewerkt door een moderator:
Ja, het kan ook eenvoudiger: als je de apDiv's intact laat met hun absolute posities.
Dan mis je elke flexibiliteit van de site, maar het is wel veel sneller te realiseren om de veranderingen door te voeren: in de huidige pagina's zelf hoeft dan niet met de volgorde der div's geschoven te worden.
Zal kijken hoe dit aangepakt kan worden (ben al een eind op weg :) ).

Wordt vervolgd!

Met vriendelijke groet,
CSShunter
 
Hoi Vredeveld,
De spanning zal nog wat moeten oplopen, vrees ik. Ik heb met wat tegenslagen te kampen (zie ook m'n huidige handtekening).
Wat de site betreft begin Internet Explorer opeens weerbarstig te doen bij het menu. De rest doet het fijn... :confused:

Maar het is me ook een menu van heb ik jou daar! :eek: Ik dacht dat zo'n dhtml-menu met een overmaat aan ondoorzichtig javascript al lang tot de vervlogen tijden hoorde. Het vraagt enorm veel downloadtijd, vertraagt de pagina, en is dus niet vlekkeloos cross-browser. Tegenwoordig kunnen alle browsers wel een css-dropdown menu aan, dat vrijwel hetzelfde kan zonder poespas.
  • Ik zal kijken of ik daar wat van kan maken.

Over css gesproken: het Dreamweaver-template zet er nu op elke pagina afzonderlijk alle css in. Dat geeft zware pagina's, en vertraagt uiteraard ook. Oplossing: alle css in een extern stylesheet, dat 1x door de bezoeker wordt gedownload en meteen voor alle pagina's beschikbaar is.

Over javascript gesproken: de pagina's staan barstensvol met nog andere scripts, waarvan ik me afvraag of die allemaal wel nodig zijn.
Vragen:
=======
  1. De "Javascript DHTML Image Web Scroller": waar dient die voor, en is dat echt nodig?
    Ik verdenk 'm ervan dat deze bij Internet Explorer 7 een onnodige extra verticale scrollbar invoegt. En ik zie ook nergens images scrollen!

  2. Er worden 2 javascripts (en 2 css-bestanden) meegestuurd voor een SpryMenuBar, ook weer ruim 40kB.
    Maar is die SpryMenuBar wel van toepassing als het menu via het sothink_dhtmlmenu geregeld wordt?

  3. De "Web Toolbar by Wibiya" onderin (voor de social media e.d.) ziet er wel leuk uit, maar vraagt onevenredig veel downloadtijd. Er zitten veel via-via bestanden in voor alle vervolg-snufjes en popup's, die bij externe servers worden opgehaald (bij Wibiya, Twitter). Zeker als het daar druk is, geeft dat extra wachttijd voordat de pagina's in beeld zijn.
    Maar: wordt die toolbar eigenlijk wel door de bezoekers gebruikt, of huppelt iedereen meteen door naar de wedstrijdinfo en de uitslagen?

  4. Onder het menu zit een afbeelding die een link is naar de site van basketballwear.nl; die link valt niet erg op, je denkt dat het een illustratie-plaatje is.

    headimage.jpg

    In de html-code zie ik staan dat er een hover-plaatje bij hoort:

    Bannerbasketballwear.nl.jpg

    Dat wordt met javascript-functies aangeroepen en weer verborgen, terwijl die functies niet op de pagina staan > dan werkt het niet. En het kan ook beter met een simpele css-hover.
    Moet die hover-variant er in komen?
=======
Zo kom je nog eens wat tegen! ;)

Met vriendelijke groet,
CSShunter
 
Hoi Vredeveld,
Even een tussentijds bericht om de moed er in te houden. De pagina wordt echt gecentreerd (ook linker- en rechterkolom even breed, en zo mogelijk even hoog (bv. mogelijk op de homepage). Het gaat lukken met het zelfbouw-menu ("work in progress").
Zonder dat dhtml-menu wordt de pagina gelijk een stuk sneller. :)
Voor de submenu's is het onhandig als die als image-knoppen worden gemaakt, dan moet er bij elke verandering in de teams een nieuwe afbeelding gemaakt worden. Daarom worden de submenu's opgebouwd uit pure tekst-links (met achtergrond-afbeelding die een hover-variant heeft).

Mochten er bv. ivm de vergrijzing een Old Kikkers-2 en een Old Kikkers-3 bij komen ;) , dan hoef je dat alleen maar als tekst + link in de html-code te zetten, en de rest regelt zichzelf. Volgend seizoen geen Old Kikkers-3? Hup, de link weer weghalen en klaar.

Bijgaand: screenshotje der werkzaamheden.
  • Staat wel bij bliksekaters op de site, maar kan geen kwaad omdat het een img is.

Met vriendelijke groet,
CSShunter
 
Hoi harde werker met veel pech,

1: De Javascript DHTML Image Web Scroller is er volgens mij ergens ingeslopen en heb dus geen idee wat die doet.

2: De SpryMenuBar was een probeersel wat dus mislukt is en niet verwijderd.

3: De Web Toolbar by Wibiya staat er pas een week op en ik weet dus niet of die gebruikt wordt, ik vond het tijd om social media toe te voegen maar als er een betere manier is dan graag.

4: De css hover lijkt mij de perfecte oplossing.

Ik ben nogmaals zeer blij met de hulp van een professional en heb er dan ook alle vertrouwen in dat je er iets moois van maakt.

Succes met bliksekaters.nl
Vredeveld
 
Laatst bewerkt door een moderator:
Ha:
Ad 1. Ingeslopen *) > wordt uitslopen.
Ad 2. Niet verwijderd > wel verwijderen.
Ad 3. Wibiya toolbar: ben niet thuis in social media, maar Wibiya lijkt me veel te zwaar en te poespasserig.
Ad 4. Die houden we er in.

Dat ruimt lekker op! :)

Met vriendelijke groet,
CSShunter
_________
*) Is waarschijnlijk ooit eens een soort dia-voorstelling geweest (of poging daartoe).
 
Die ziet er lekker simpel uit, Naarling!
  • Hij gooit er wel flink wat aangehangen http-requests tegenaan, zegt de Chrome ontwikkelfunctie als je hun homepage tegen het licht houdt.
  • Maar daar valt waarschijnlijk wel een stokje voor te steken door 'm via javascript pas op te roepen bij een klikje.

@Vredeveld:
Weer even een kijkje in de keuken: het topmenu is af! :)

In plaats van dit:
HTML:
<div id="apDiv1"><span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">
    Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
      <script id="sothink_widgets:dwwidget_dhtmlmenu2_8_2010.pgt" type="text/javascript">
<!--
stm_bm(["menu1a91",900,"/img","blank.gif",0,"","",0,0,250,0,500,1,0,0,"http://dekikkers.nl/","",67108897,0,1,2,
    "default","hand","file:///C|/dw4/dekikkers/httpdocs",1,25],this);
stm_bp("p0",[0,4,0,0,0,7,5,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","bg_01.gif",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Heren","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#FFFFFF",
    0,"","bg_02.gif",3,1,0,0,"#FFFFF7", "#000000","#FFFFFF","#FFFFFF","bold 9pt Arial","bold 9pt Arial",0,0,
    "","","","",0,0,0],149,30);
stm_bpx("p1","p0",[1,4,0,2,0,0,0,0,100,"",-2,"",-2,80,0,0,"#666666","#FFFFFF","",3,0,0]);
stm_ai("p1i0",[0,"Heren 1","","",-1,-1,0,"heren1.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#FFFFF7",1,
    "#FFFFF7",1,"round18_m.gif","round09_m.gif",3,3,0,0,"#FFFFF7","#000000","#FFFFFF","#000000","8pt 'Arial',
    'Verdana'","8pt 'Arial','Verdana'",0,0,"round18_l.gif","round09_l.gif","round18_r.gif","round09_r.gif",11,11,26],150,18);
stm_aix("p1i1","p1i0",[0,"Heren 2","","",-1,-1,0,"heren2.html"],150,18);
stm_aix("p1i2","p1i0",[0,"Heren 3","","",-1,-1,0,"heren3.html"],150,18);
stm_aix("p1i3","p1i0",[0,"old kikkers","","",-1,-1,0,"oldkikkers.html"],150,0);
stm_ep();
stm_ai("p0i1",[6,1,"#990000","",-1,-1,0]);
stm_aix("p0i2","p0i0",[0,"Dames","","",-1,-1,0,"#","_self","","","","",5,5,0,"","",-1,-1,0,1,1,"#FFFFF7",1,"#993333",1,
    "","bg_02.gif",1],149,30);
stm_bpx("p2","p1",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000"]);
stm_aix("p2i0","p1i0",[0,"Dames 1","","",-1,-1,0,"dames1.html"],150,0);
stm_ep();
stm_aix("p0i3","p0i1",[]);
stm_aix("p0i4","p0i2",[0,"Jeugd Meisjes"],149,30);
stm_bpx("p3","p0",[1,4,0,2,0,5,0,0,100,"",-2,"",-2,80,0,0,"#666666","#000000",""]);
stm_aix("p3i0","p1i0",[0,"Meisjes u 18","","",-1,-1,0,"meisjesu18.html"],150,18);
stm_aix("p3i1","p1i0",[0,"Meisjes u 14","","",-1,-1,0,"meisjesu14.html"],150,18);
stm_ep();
stm_aix("p0i5","p0i1",[]);
stm_aix("p0i6","p0i2",[0,"Jeugd Jongens"],149,30);
stm_bpx("p4","p3",[]);
stm_aix("p4i0","p1i0",[0,"Jongens u 16","","",-1,-1,0,"jongensu16.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 18 ","","",-1,-1,0,"jongensu18.html"],150,0);
stm_aix("p4i1","p1i0",[0,"Jongens u 14 ","","",-1,-1,0,"jongensu14.html"],150,0);
stm_ep();
stm_aix("p0i7","p0i1",[]);
stm_aix("p0i8","p0i2",[0,"Jeugd tot u 12"],149,30);
stm_bpx("p5","p3",[]);
stm_aix("p5i0","p1i0",[0,"Meisjes u 12","","",-1,-1,0,"meisjesu12.html"],150,18);
stm_aix("p5i1","p1i0",[0,"Jongens u 12.1","","",-1,-1,0,"jongensu12.1.html"],150,18);
stm_aix("p5i2","p1i0",[0,"jongens u 12.2","","",-1,-1,0,"jongensu12.2.html"],150,0);
stm_ep();
stm_aix("p0i9","p0i1",[]);
stm_aix("p0i10","p0i2",[0,"Mix","","",-1,-1,0,""],149,30);
stm_bpx("p6","p3",[]);
stm_aix("p6i1","p1i0",[0,"mix U 8/10","","",-1,-1,0,"mixu8enu10.html"],150,0);
stm_ep();
stm_ep();
stm_em();
//-->
    </script>
    </span></div>

... wat per pagina via het javascript dit aan gegenereerde extra code oplevert:
HTML:
<div id="apDiv1"><span><a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">
    Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
      <script id="sothink_widgets:dwwidget_dhtmlmenu2_8_2010.pgt" type="text/javascript">
<!--
...
(code als boven; CSShunter)
...
//-->
    </script><div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/blank.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/bg_01.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/bg_02.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/round18_m.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/round09_m.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/round18_l.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/round09_l.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/round18_r.gif" border="0"></div>
<div style="display: none;"><img class="stimg" src="http://dekikkers.nl/img/round09_r.gif" border="0"></div>
<table id="stUI2" style="visibility: visible; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); 
background-color: transparent; background-image: none;" onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" cellpadding="0" cellspacing="0"><tbody><tr style="border-style: 
none; background-color: transparent; background-image: none;"><td style="background-color: transparent; 
background-image: url(&quot;/img/bg_01.gif&quot;); background-repeat: repeat; border-style: none;">
<table id="stUI2_body" style="border-style: none; background-color: transparent; background-image: none;" 
cellpadding="0" cellspacing="0'"><tbody><tr><td style="border-style: none; background-color: transparent; 
background-image: none;"><a tabindex="100" onclick="return _STNS.UI.fbDmEnt(event,this)" 
onkeydown="return _STNS.UI.fbDmEnt(event,this)" onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" href="http://dekikkers.nl/organisatie.html#" target="_self" 
id="stUI3_lnk" style="text-decoration: none; display: block; border-style: none; background-color: transparent; 
background-image: none; margin: 0px; padding: 0px;"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI3" 
style="width: 149px; height: 30px; border-style: none; background-color: transparent; background-image: none;" 
cellpadding="0px" cellspacing="0"><tbody><tr><td id="stUI3_itd" style="height: 30px; background-repeat: repeat; 
border-style: none; background-color: transparent; background-image: none;" align="center" nowrap="nowrap" 
valign="middle"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" 
id="stUI3_itb" style="width: 100%; height: 100%; border-style: none; background-color: transparent; 
background-image: none;" cellpadding="7" cellspacing="0"><tbody><tr><td id="stUI3_ico" style="width: 5px; 
border-style: none; background-color: transparent; background-image: none;" align="left"><img class="stimg" 
style="" src="/img/blank.gif" id="stUI3_icoImg" border="0" height="5" width="5"></td><td id="stUI3_cnt" 
style="font-size: 1pt; border-style: none; background-color: transparent; background-image: none;" 
align="center" nowrap="nowrap" valign="middle"> <span id="stUI3_txt" style="color: rgb(255, 255, 255); 
font: bold 9pt Arial; text-decoration: none; border-style: none; background-color: transparent; 
background-image: none; margin: 0px; padding: 0px;">Heren</span></td><td id="stUI3_arr" style="border-style: 
none; background-color: transparent; background-image: none;" align="right"><img class="stimg" style="" 
src="/img/blank.gif" id="stUI3_arrImg" border="0"></td></tr></tbody></table></td></tr></tbody></table></a>
</td><td style="border-style: none; background-color: transparent; background-image: none;"><table id="stUI9" 
style="font-size: 1pt; line-height: 1pt; width: 1px; height: 30px; background-color: rgb(153, 0, 0); 
border-style: none; background-image: none;" cellpadding="0" cellspacing="0"><tbody><tr><td align="center" 
valign="middle"><img class="stimg" style="" src="/img/blank.gif" border="0"></td></tr></tbody></table></td>
<td style="border-style: none; background-color: transparent; background-image: none;"><a tabindex="100" 
onclick="return _STNS.UI.fbDmEnt(event,this)" onkeydown="return _STNS.UI.fbDmEnt(event,this)" 
onmouseover="return _STNS.UI.fbDmEnt(event,this)" onmouseout="return _STNS.UI.fbDmEnt(event,this)" 
href="http://dekikkers.nl/organisatie.html#" target="_self" id="stUI10_lnk" style="text-decoration: none; 
display: block; border-style: none; background-color: transparent; background-image: none; margin: 0px; 
padding: 0px;"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI10" 
style="width: 149px; height: 30px; border-style: none; background-color: transparent; background-image: none;" 
cellpadding="0px" cellspacing="0"><tbody><tr><td id="stUI10_itd" style="height: 30px; background-repeat: 
repeat-x; border-style: none; background-color: transparent; background-image: none;" align="center" 
nowrap="nowrap" valign="middle"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return 
_STNS.UI.fbDmEnt(event,this)" id="stUI10_itb" style="width: 100%; height: 100%; border-style: none; 
background-color: transparent; background-image: none;" cellpadding="7" cellspacing="0"><tbody><tr>
<td id="stUI10_ico" style="width: 5px; border-style: none; background-color: transparent; background-image: none;" 
align="left"><img class="stimg" style="" src="/img/blank.gif" id="stUI10_icoImg" border="0" height="5" width="5">
</td><td id="stUI10_cnt" style="font-size: 1pt; border-style: none; background-color: transparent; 
background-image: none;" align="center" nowrap="nowrap" valign="middle"> <span id="stUI10_txt" 
style="color: rgb(255, 255, 255); font: bold 9pt Arial; text-decoration: none; border-style: none; 
background-color: transparent; background-image: none; margin: 0px; padding: 0px;">Dames</span></td>
<td id="stUI10_arr" style="border-style: none; background-color: transparent; background-image: none;" 
align="right"><img class="stimg" style="" src="/img/blank.gif" id="stUI10_arrImg" border="0"></td></tr></tbody>
</table></td></tr></tbody></table></a></td><td style="border-style: none; background-color: transparent; 
background-image: none;"><table id="stUI13" style="font-size: 1pt; line-height: 1pt; width: 1px; height: 30px; 
background-color: rgb(153, 0, 0); border-style: none; background-image: none;" cellpadding="0" cellspacing="0">
<tbody><tr><td align="center" valign="middle"><img class="stimg" style="" src="/img/blank.gif" border="0"></td>
</tr></tbody></table></td><td style="border-style: none; background-color: transparent; background-image: none;">
<a tabindex="100" onclick="return _STNS.UI.fbDmEnt(event,this)" onkeydown="return _STNS.UI.fbDmEnt(event,this)" 
onmouseover="return _STNS.UI.fbDmEnt(event,this)" onmouseout="return _STNS.UI.fbDmEnt(event,this)" 
href="http://dekikkers.nl/organisatie.html#" target="_self" id="stUI14_lnk" style="text-decoration: none; 
display: block; border-style: none; background-color: transparent; background-image: none; margin: 0px; 
padding: 0px;"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI14" 
style="width: 149px; height: 30px; border-style: none; background-color: transparent; background-image: none; 
border-color: rgb(255, 255, 247);" cellpadding="0px" cellspacing="0"><tbody><tr><td id="stUI14_itd" 
style="height: 30px; background-repeat: repeat-x; border-style: none; background-color: transparent; 
background-image: url(&quot;/img/blank.gif&quot;);" align="center" nowrap="nowrap" valign="middle">
<table onmouseover="return _STNS.UI.fbDmEnt(event,this)" onmouseout="return _STNS.UI.fbDmEnt(event,this)" 
onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI14_itb" style="width: 100%; height: 100%; 
border-style: none; background-color: transparent; background-image: none;" cellpadding="7" cellspacing="0">
<tbody><tr><td id="stUI14_ico" style="width: 5px; border-style: none; background-color: transparent; 
background-image: none;" align="left"><img class="stimg" style="" src="/img/blank.gif" id="stUI14_icoImg" 
border="0" height="5" width="5"></td><td id="stUI14_cnt" style="font-size: 1pt; border-style: none; 
background-color: transparent; background-image: none;" align="center" nowrap="nowrap" valign="middle"> 
<span id="stUI14_txt" style="color: rgb(255, 255, 255); font: bold 9pt Arial; text-decoration: none; 
border-style: none; background-color: transparent; background-image: none; margin: 0px; padding: 0px;">
Jeugd&nbsp;Meisjes</span></td><td id="stUI14_arr" style="border-style: none; background-color: transparent; 
background-image: none;" align="right"><img class="stimg" style="" src="/img/blank.gif" id="stUI14_arrImg" border="0">
</td></tr></tbody></table></td></tr></tbody></table></a></td><td style="border-style: none; 
background-color: transparent; background-image: none;"><table id="stUI18" style="font-size: 1pt; line-height: 1pt; 
width: 1px; height: 30px; background-color: rgb(153, 0, 0); border-style: none; background-image: none;" 
cellpadding="0" cellspacing="0"><tbody><tr><td align="center" valign="middle"><img class="stimg" style="" 
src="/img/blank.gif" border="0"></td></tr></tbody></table></td><td style="border-style: none; background-color: 
transparent; background-image: none;"><a tabindex="100" onclick="return _STNS.UI.fbDmEnt(event,this)" 
onkeydown="return _STNS.UI.fbDmEnt(event,this)" onmouseover="return STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" href="http://dekikkers.nl/organisatie.html#" target="_self" 
id="stUI19_lnkstyle="text-decoration: none; display: block; border-style: none; background-color: transparent; 
background-image: none; margin: 0px; padding: 0px;"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI19" 
style="width: 149px; height: 30px; border-style: none; background-color: transparent; background-image: none; 
border-color: rgb(255, 255, 247);" cellpadding="0px" cellspacing="0"><tbody><tr><td id="stUI19_itd" 
style="height: 30px; background-repeat: repeat-x; border-style: none; background-color: transparent; 
background-image: url(&quot;/img/blank.gif&quot;);" align="center" nowrap="nowrap" valign="middle">
<table onmouseover="return _STNS.UI.fbDmEnt(event,this)" onmouseout="return _STNS.UI.fbDmEnt(event,this)" 
onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI19_itb" style="width: 100%; height: 100%; 
border-style: none; background-color: transparent; background-image: none;" cellpadding="7" cellspacing="0">
<tbody><tr><td id="stUI19_ico" style="width: 5px; border-style: none; background-color: transparent; 
background-image: none;" align="left"><img class="stimg" style="" src="/img/blank.gif" id="stUI19_icoImg" 
border="0" height="5" width="5"></td><td id="stUI19_cnt" style="font-size: 1pt; border-style: none; 
background-color: transparent; background-image: none;" align="center" nowrap="nowrap" valign="middle"> 
<span id="stUI19_txt" style="color: rgb(255, 255, 255); font: bold 9pt Arial; text-decoration: none; 
border-style: none; background-color: transparent; background-image: none; margin: 0px; padding: 0px;">
Jeugd&nbsp;Jongens</span></td><td id="stUI19_arr" style="border-style: none; background-color: transparent; 
background-image: none;" align="right"><img class="stimg" style="" src="/img/blank.gif" id="stUI19_arrImg" border="0">
</td></tr></tbody></table></td></tr></tbody></table></a></td><td style="border-style: none; 
background-color: transparent; background-image: none;"><table id="stUI24" style="font-size: 1pt; 
line-height: 1pt; width: 1px; height: 30px; background-color: rgb(153, 0, 0); border-style: none; 
background-image: none;" cellpadding="0" cellspacing="0"><tbody><tr><td align="center" valign="middle">
<img class="stimg" style="" src="/img/blank.gif" border="0"></td></tr></tbody></table></td><td 
style="border-style: none; background-color: transparent; background-image: none;"><a tabindex="100" 
onclick="return _STNS.UI.fbDmEnt(event,this)" onkeydown="return _STNS.UI.fbDmEnt(event,this)" 
onmouseover="return _STNS.UI.fbDmEnt(event,this)" onmouseout="return _STNS.UI.fbDmEnt(event,this)" 
href="http://dekikkers.nl/organisatie.html#" target="_self" id="stUI25_lnk" style="text-decoration: none; 
display: block; border-style: none; background-color: transparent; background-image: none; margin: 0px; 
padding: 0px;"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" 
id="stUI25" style="width: 149px; height: 30px; border-style: none; background-color: transparent; 
background-image: none; border-color: rgb(0, 0, 0);" cellpadding="0px" cellspacing="0"><tbody><tr>
<td id="stUI25_itd" style="height: 30px; background-repeat: repeat-x; border-style: none; background-color: 
transparent; background-image: url(&quot;/img/bg_02.gif&quot;);" align="center" nowrap="nowrap" 
valign="middle"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" 
id="stUI25_itb" style="width: 100%; height: 100%; border-style: none; background-color: transparent; 
background-image: none;" cellpadding="7" cellspacing="0"><tbody><tr><td id="stUI25_ico" style="width: 5px; 
border-style: none; background-color: transparent; background-image: none;" align="left"><img class="stimg" 
style="" src="/img/blank.gif" id="stUI25_icoImg" border="0" height="5" width="5"></td><td id="stUI25_cnt" 
style="font-size: 1pt; border-style: none; background-color: transparent; background-image: none;" 
align="center" nowrap="nowrap" valign="middle"> <span id="stUI25_txt" style="color: rgb(255, 255, 255); 
font: bold 9pt Arial; text-decoration: none; border-style: none; background-color: transparent; 
background-image: none; margin: 0px; padding: 0px;">Jeugd&nbsp;tot&nbsp;u&nbsp;12</span></td>
<td id="stUI25_arr" style="border-style: none; background-color: transparent; background-image: none;" 
align="right"><img class="stimg" style="" src="/img/blank.gif" id="stUI25_arrImg" border="0"></td></tr>
</tbody></table></td></tr></tbody></table></a></td><td style="border-style: none; background-color: 
transparent; background-image: none;"><table id="stUI30" style="font-size: 1pt; line-height: 1pt; 
width: 1px; height: 30px; background-color: rgb(153, 0, 0); border-style: none; background-image: none;" 
cellpadding="0" cellspacing="0"><tbody><tr><td align="center" valign="middle"><img class="stimg" style="" 
src="/img/blank.gif" border="0"></td></tr></tbody></table></td><td style="border-style: none; background-color: 
transparent; background-image: none;"><a tabindex="100" onclick="return _STNS.UI.fbDmEnt(event,this)" 
onkeydown="return _STNS.UI.fbDmEnt(event,this)" onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" href="#" target="_self" id="stUI31_lnk" 
style="text-decoration: none; cursor: default; display: block; border-style: none; background-color: 
transparent; background-image: none; margin: 0px; padding: 0px;"><table 
onmouseover="return _STNS.UI.fbDmEnt(event,this)" onmouseout="return _STNS.UI.fbDmEnt(event,this)" 
onmousemove="return _STNS.UI.fbDmEnt(event,this)" id="stUI31" style="width: 149px; height: 30px; 
border-style: none; background-color: transparent; background-image: none; border-color: rgb(255, 255, 247);" 
cellpadding="0px" cellspacing="0"><tbody><tr><td id="stUI31_itd" style="height: 30px; background-repeat: 
repeat-x; border-style: none; background-color: transparent; background-image: url(&quot;/img/blank.gif&quot;);" 
align="center" nowrap="nowrap" valign="middle"><table onmouseover="return _STNS.UI.fbDmEnt(event,this)" 
onmouseout="return _STNS.UI.fbDmEnt(event,this)" onmousemove="return _STNS.UI.fbDmEnt(event,this)" 
id="stUI31_itb" style="width: 100%; height: 100%; border-style: none; background-color: transparent; 
background-image: none;" cellpadding="7" cellspacing="0"><tbody><tr><td id="stUI31_ico" style="width: 5px; 
border-style: none; background-color: transparent; background-image: none;" align="left"><img class="stimg" 
style="" src="/img/blank.gif" id="stUI31_icoImg" border="0" height="5" width="5"></td><td id="stUI31_cnt" 
style="font-size: 1pt; border-style: none; background-color: transparent; background-image: none;" 
align="center" nowrap="nowrap" valign="middle"> <span id="stUI31_txt" style="color: rgb(255, 255, 255); 
font: bold 9pt Arial; text-decoration: none; border-style: none; background-color: transparent; 
background-image: none; margin: 0px; padding: 0px;">Mix</span></td><td id="stUI31_arr" 
style="border-style: none; background-color: transparent; background-image: none;" align="right">
<img class="stimg" style="" src="/img/blank.gif" id="stUI31_arrImg" rder="0"></td></tr></tbody></table></td></tr>
</tbody></table></a></td></tr></tbody></table>
</td></tr></tbody></table>
<script type="text/javascript" 
language="javascript1.2">_STNS.UI.oUIs['stUI2'].fbShow();_STNS.UI.oUIs['stUI2'].fbInit();</script>
</span></div>
Scroll voor het oerwoud! :shocked: :shocked: :shocked: !!!

... gaat het per pagina worden:
HTML:
<div id="apDiv1">
	<ul>
		<li id="heren"><span>Heren</span><span class="overlay"></span>
			<ul>
				<li><a href="heren1.html">Heren 1</a></li>
				<li><a href="heren2.html">Heren 2</a></li>
				<li><a href="heren3.html">Heren 3</a></li>
				<li><a href="oldkikkers.html">Old Kikkers</a></li>
			</ul>
		</li>
		<li id="dames"><span>Dames</span><span class="overlay"></span>
			<ul>
				<li><a href="dames1.html">Dames 1</a></li>
			</ul>
		</li>
		<li id="meisjes"><span>Jeugd Meisjes</span><span class="overlay"></span>
			<ul>
				<li><a href="meisjesu18.html">Meisjes u 18</a></li>
				<li><a href="meisjesu18.html">Meisjes u 14</a></li>
			</ul>
		</li>
		<li id="jongens"><span>Jeugd Jongens</span><span class="overlay"></span>
			<ul>
				<li><a href="jongensu18.html">Jongens u 18</a></li>
				<li><a href="jongensu16.html">Jongens u 16</a></li>
				<li><a href="jongensu14.html">Jongens u 14</a></li>
			</ul>
		</li>
		<li id="jeugdu12"><span>Jeugd tot u 12</span><span class="overlay"></span>
			<ul>
				<li><a href="meisjesu12.html">Meisjes u 12</a></li>
				<li><a href="jongensu12.1.html">Jongens u 12.1</a></li>
				<li><a href="jongensu12.2.html">Jongens u 12.2</a></li>
			</ul>
		</li>
		<li id="mix"><span>Mix</span><span class="overlay"></span>
			<ul>
				<li><a href="mixu8enu10.html">Mix u 8/10</a></li>
			</ul>
		</li>
	</ul>
</div><!-- einde #apDiv1 -->
Zonder dat er iets extra bij wordt gegenereerd.
De hele opmaak en het hoveren wordt geregeld met css. :love: (en dat is éénmalig: het stylesheet wordt gerecycled !)

Zo komen we mooi van de bende af.
Nu de rest nog: wordt vervolgd!

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan