Question about linking menu

Can't figure out how to

Page 1 of 1

10 Replies - 516 Views - Last Post: 06 February 2009 - 10:56 AM

#1 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Question about linking menu

Posted 05 February 2009 - 05:19 AM

Hi all, i'm making a website for my sportsclub.

I have a menu on top and a menu on the left.

now i wonder how i , if i click on the menu on top i get the corresponding menu on the left.

here is my html code

<!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>korfbal</title>
<link href="css/website.css" rel="stylesheet" type="text/css" />
</head>

<body><div align="center">
<!-- header -->
<div class="header"></div>
<!-- menu -->
<div class="menu_container">
 <div class="menu_left"></div>
 <div class="menu_middle">
 <div class="menu1"><a href="index.html">Home</a></div>
 <div class="menu1"><a href="index.html">Clubnieuws</a></div>
 <div class="menu1"><a href="index.html">Ploegen</a></div>
 <div class="menu1"><a href="index.html">Clubblad</a></div>
 <div class="menu1"><a href="index.html">Contact</a></div>
 <div class="menu1"><a href="index.html">Webteam</a></div>
 </div>
 <div class="menu_right"></div>
 <div class="text_left"></div>
 <div class="text_middle"><div class="text3">
 <marquee scrollamount="2" direction="left">bla bla bla</marquee></div>
 </div>
 <div class="text_right"></div>
 <div style="clear: both"></div>
</div>
<!-- container content -->
<div class="content_container">

 <div class="leftside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Submenu.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
   » Startpagina<br />
   » Nieuws<br />
   » Kalender<br />
   » Wedstrijdoverzicht<br />
	   <br />
</div>
  </div>
  </div>
  <div class="afronding"></div>
   <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">In de kijker.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
   
   member of the month nzu !
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 
 <div class="middle">
 
  <div>
   <div class="leftin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Laatste nieuws.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
<div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>  .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>  .........</div><div class="score">nog niet bekend</div>
	   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div class="rightin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Uitslagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div style="clear: both;"></div>
  </div>
  <div>
   <div class="leftin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Activiteiten.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>  .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>  .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
   
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div class="rightin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Verjaardagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   Ikke</div><div class="score">22 maart</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   Sinterklaas</div><div class="score">6 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   paus benedictus de 13de</div><div class="score">25 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   testpersoon tester</div><div class="score">1 januari</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   kerstman</div><div class="score">24 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   De paashaas</div><div class="score">21 april</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div style="clear: both;"></div>
  </div>
   
  <div class="container_content">
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden2">
	<div class="text">Content.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white3">
   <div class="text2">Nieuwe website<br />
bla bla bla, ik ben kristof en ik heb dit gemaakt<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
   </div>
  </div>
  </div>
  <div class="afronding3"></div>
  <div class="footer"></div>
 </div>
 
 <!-- Golden Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Golden sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
	   Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- Silver Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Silver sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- Bronze Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Bronze sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- einde sponsors -->
</div>

</div></body>

</html>


And here my stylesheet 


body { 
margin : 0; 
background-color : #eaeaea; 
} 
img { 
border : 0; 
} 
.header { 
background-image : url(../images/header.jpg); 
background-repeat : no-repeat; 
width : 982px; 
height : 141px; 
margin-top : 2px; 
} 
.menu_container { 
width : 982px; 
height : 24px; 
margin-top : 4px; 
} 
.menu_left { 
background-image : url(../images/menu_left.jpg); 
float : left; 
height : 24px; 
width : 7px; 
} 
.menu_middle { 
background-image : url(../images/menu_repeat.jpg); 
float : left; 
height : 24px; 
width : 693px; 
} 
.menu_right { 
background-image : url(../images/menu_right.jpg); 
float : left; 
height : 24px; 
width : 7px; 
} 
.text_left { 
background-image : url(../images/text_left.jpg); 
float : left; 
height : 24px; 
width : 4px; 
margin-left : 9px; 
} 
.text_middle { 
background-image : url(../images/middle_repeat.jpg); 
float : left; 
height : 24px; 
width : 253px; 
} 
.text_right { 
background-image : url(../images/text_right.jpg); 
float : left; 
height : 24px; 
width : 8px; 
} 
.content_container { 
width : 982px; 
height : auto; 
margin-top : 3px; 
} 
.leftside { 
width : 200px; 
height : auto; 
float : left; 
background-color : #ffffff; 
} 
.leftside2 { 
width : 280px; 
height : auto; 
float : left; 
background-color : #ffffff; 
} 
.middle { 
width : 570px; 
height : auto; 
float : left; 
margin-left : 5px; 
margin-right : 5px; 
} 
.rightside { 
width : 200px; 
height : auto; 
float : left; 
background-color : #ffffff; 
} 
.balkje_links { 
background-image : url(../images/balkje_links.jpg); 
width : 7px; 
height : 22px; 
float : left; 
background-color : #ffffff; 
} 
.balkje_midden { 
background-image : url(../images/balkje_midden.jpg); 
background-repeat : repeat-x; 
width : 186px; 
height : 22px; 
float : left; 
} 
.balkje_midden2 { 
background-image : url(../images/balkje_midden.jpg); 
background-repeat : repeat-x; 
width : 556px; 
height : 22px; 
float : left; 
} 
.balkje_midden3 { 
background-image : url(../images/balkje_midden.jpg); 
background-repeat : repeat-x; 
width : 266px; 
height : 22px; 
float : left; 
} 
.balkje_rechts { 
background-image : url(../images/balkje_rechts.jpg); 
width : 7px; 
height : 22px; 
float : left; 
background-color : #ffffff; 
} 
.balk { 
height : 22px; 
width : auto; 
} 
.text { 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #ffffff; 
text-align : right; 
height : 19px; 
margin-top : 3px; 
font-weight : bold; 
} 
.text2 { 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #333333; 
text-align : left; 
height : auto; 
margin-top : 3px; 
margin-left : 10px; 
font-weight : bold; 
} 
.text3 { 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
color : #ffffff; 
text-align : left; 
height : auto; 
margin-top : 3px; 
} 
.white { 
width : 200px; 
min-height : 100px; 
background-color : #ffffff; 
} 
.white2 { 
width : 280px; 
min-height : 140px; 
background-color : #ffffff; 
} 
.white3 { 
width : 570px; 
min-height : 100px; 
background-color : #ffffff; 
} 
.afronding { 
background-image : url(../images/afronding.gif); 
width : 200px; 
height : 29px; 
} 
.afronding2 { 
background-image : url(~/images/afronding3.gif); 
width : 280px; 
height : 29px; 
} 
.afronding3 { 
background-image : url(../images/afronding2.gif); 
width : 570px; 
height : 29px; 
} 
.reclame_space { 
width : 570px; 
height : 130px; 
background-image : url(../images/bg_reclame.gif); 
} 
.banner { 
height : 130px; 
width : auto; 
} 
.leftin { 
width : 280px; 
height : auto; 
float : left; 
} 
.rightin { 
width : 280px; 
height : auto; 
float : left; 
margin-left : 10px; 
} 
.container_content { 
width : 570px; 
height : auto; 
background-color : #ffffff; 
} 
.footer { 
width : 570px; 
background-image : url(../images/footer.gif); 
height : 29px; 
} 
.score { 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
margin-top : 3px; 
font-weight : bold; 
float : right; 
margin-right : 10px; 
} 
.ploeg { 
font-size : 12px; 
font-family : Arial, Helvetica, sans-serif; 
margin-top : 3px; 
font-weight : bold; 
float : left; 
} 
.activiteit { 
height : 16px; 
width : 16px; 
float : left; 
} 
.menu1  
{
text-align:center;
float : left; 
width : 114px; 
margin-top : 0; 
height : 20px; 
color : white; 
border-right : 0px; 
border-right-color : #ffffff; 
border-right-style : solid; 
} 
a { 
color : white; 
text-decoration : none; 
display : block; 
height : 20px; 
padding-top : 2px; 
padding-left : 10px; 
padding-right : 10px;
padding-bottom:0px;
}



i also included a picture to show you what i mean.

Posted Image

can this be done with frames ? or should i use css? if so, how can i do this with css ?
(banner and menu will be fixed soon)

thx in advance !

S

This post has been edited by Stofke: 05 February 2009 - 05:21 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Question about linking menu

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Question about linking menu

Posted 05 February 2009 - 06:05 AM

Currently all your links are pointing to index.html. Is that how you intend to keep it, or will you have separate pages?

The obvious way to do this is to have separate pages for each of your top menu items. Since each section would has it's own page, there would be no trouble in changing the side menu on each page. This is also my recommended technique, as it more search engine friendly that what I'm about to say...


The easiest way I can think of to change the side navigation while using one page would be using javascript. You can pass a variable through your main navigation links, and use that to populate your menu dynamically as the page loads.

For example, you could make the links in the top menu look like this:
<div class="menu1"><a href="index.html?loc=home">Home</a></div>
<div class="menu1"><a href="index.html?loc=clubnieuws">Clubnieuws</a></div>
<div class="menu1"><a href="index.html?loc=ploegen">Ploegen</a></div>


The submenu text area will need to be given an id as well as a class. This makes it easier to identify the div for when the javascript writes to it:
<div class="white">
   <div class="text2" id="side_menu">
	   » Startpagina<br />
	   » Nieuws<br />
	   » Kalender<br />
	   » Wedstrijdoverzicht<br />
	   <br />
   </div>
</div>


Then a simple bit of javascript checks the value of the variable loc, and uses that value in a switch statement to select the correct menu code. A default is also set:
<script type="text/javascript">
<!--
//return a value of a GET property
function getUrlVar(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
}

switch(getUrlVar("loc")) {
	  case "clubnieuws":
		   document.getElementById("side_menu").innerHTML = "» A menu item<br />» Another menu item<br /><br />";
	  break;
	  case "ploegen":
		  document.getElementById("side_menu").innerHTML = "» Different menu item<br />» Another menu item<br /><br />";
	  break;
	  
	  default:
		  document.getElementById("side_menu").innerHTML = "» Startpagina<br />» Nieuws<br />» Kalender<br />» Wedstrijdoverzicht<br /><br />";
	  break;
}
-->
</script>

Was This Post Helpful? 0
  • +
  • -

#3 SoLi  Icon User is offline

  • andydust.com

Reputation: 41
  • View blog
  • Posts: 1,438
  • Joined: 27-January 02

Re: Question about linking menu

Posted 05 February 2009 - 06:27 AM

just to add to thehat's advice, i would you suggest you use the list element to contain your menu items, and thereby removing the improper use of the <br /> tag.

Furthermore, use the html ascii code for those double arrows >>, or even better create a tiny gif with something similar and use the list-style-image css property.

The ascii code for the double arrow(remove the backslash): &\raquo;

While javascript certainly would solve the problem here (although without graceful degradation), you probably shouldn't store the menu items in javascript strings (as in thehat's example with his innerHTML).
Consider creating a list for each menu in the html document it self, and creating CSS selectors such as 'show' and 'hide', where hide has display: none. Then use a javascript function simular to thehats to apply the css selectors to the relevant menu list.

This way search engines will still be able to read the content of your website, and more importantly, discover the links to other pages on your site.

Sorry if this was offtopic ;D

This post has been edited by SoLi: 05 February 2009 - 06:34 AM

Was This Post Helpful? 1
  • +
  • -

#4 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Question about linking menu

Posted 05 February 2009 - 06:33 AM

Thx for your advice, but i have a problem with the java script.

he gives a null exeption on line :

document.getElementById("side_menu").innerHTML = "» A menu item<br />» Another menu item<br /><br />";

when i press on clubnieuws
Was This Post Helpful? 0
  • +
  • -

#5 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Question about linking menu

Posted 05 February 2009 - 06:36 AM

Did you give the div where the content is going to go an id? If the javascript can't find the element it's targeting, it will return null.
Was This Post Helpful? 0
  • +
  • -

#6 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Question about linking menu

Posted 05 February 2009 - 06:38 AM

yup, this is the code

<!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>korfbal</title>
<link href="css/website.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
<!--
//return a value of a GET property
function getUrlVar(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
}

switch(getUrlVar("loc")) {
	  case "clubnieuws":
		   document.getElementById("side_menu").innerHTML = "» A menu item<br />» Another menu item<br /><br />";
	  break;
	  case "ploegen":
		  document.getElementById("side_menu").innerHTML = "» Different menu item<br />» Another menu item<br /><br />";
	  break;
	  
	  default:
		  document.getElementById("side_menu").innerHTML = "» Startpagina<br />» Nieuws<br />» Kalender<br />» Wedstrijdoverzicht<br /><br />";
	  break;
}
-->
</script>

</head>

<body><div align="center">
<!-- header -->
<div class="header"></div>
<!-- menu -->
<div class="menu_container">
 <div class="menu_left"></div>
 <div class="menu_middle">
 <div class="menu1"><a href="index.html?loc=home">Home</a></div>
 <div class="menu1"><a href="index.html?loc=clubnieuws">Clubnieuws</a></div>
 <div class="menu1"><a href="index.html?loc=ploegen">Ploegen</a></div>
 <div class="menu1"><a href="index.html?loc=clubblad">Clubblad</a></div>
 <div class="menu1"><a href="index.html?loc=contact">Contact</a></div>
 <div class="menu1"><a href="index.html?loc=webteam">Webteam</a></div>
 </div>
 <div class="menu_right"></div>
 <div class="text_left"></div>
 <div class="text_middle"><div class="text3">
<marquee scrollamount="2" direction="left">bla bla bla</marquee></div>
 </div>
 <div class="text_right"></div>
 <div style="clear: both"></div>
</div>
<!-- container content -->
<div class="content_container">

 <div class="leftside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Submenu.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
 <div class="white">
   <div class="text2" id="side_menu">
	   » Startpagina<br />
	   » Nieuws<br />
	   » Kalender<br />
	   » Wedstrijdoverzicht<br />
	   <br />
   </div>
</div>
  </div>
  <div class="afronding"></div>
   <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">In de kijker.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
   
   member of the month nzu !
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 
 <div class="middle">
 
  <div>
   <div class="leftin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Laatste nieuws.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
<div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>&nbsp .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>&nbsp .........</div><div class="score">nog niet bekend</div>
	   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div class="rightin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Uitslagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div style="clear: both;"></div>
  </div>
  <div>
   <div class="leftin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Activiteiten.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>&nbsp .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>&nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
   
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div class="rightin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Verjaardagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp Ikke</div><div class="score">22 maart</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp Sinterklaas</div><div class="score">6 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp paus benedictus de 13de</div><div class="score">25 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp testpersoon tester</div><div class="score">1 januari</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp kerstman</div><div class="score">24 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp De paashaas</div><div class="score">21 april</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div style="clear: both;"></div>
  </div>
   
  <div class="container_content">
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden2">
	<div class="text">Content.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white3">
   <div class="text2">Nieuwe website<br />
bla bla bla, ik ben kristof en ik heb dit gemaakt<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
   </div>
  </div>
  </div>
  <div class="afronding3"></div>
  <div class="footer"></div>
 </div>
 
 <!-- Golden Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Golden sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
	   Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- Silver Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Silver sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- Bronze Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Bronze sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- einde sponsors -->
</div>

</div></body>

</html>

Was This Post Helpful? 0
  • +
  • -

#7 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Question about linking menu

Posted 05 February 2009 - 06:46 AM

Sorry, my fault. When the javascript executes the document hasn't been built, so the target div doesn't exist. Here's your code with the required change. I've put the switch statement into a function that gets called when the body is loaded (see body tag):

<!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>korfbal</title>
<link href="css/website.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
<!--
//return a value of a GET property
function getUrlVar(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return pair[1];
		}
	}
}

function setNav() {
	switch(getUrlVar("loc")) {
		  case "clubnieuws":
			   document.getElementById("side_menu").innerHTML = "» A menu item<br />» Another menu item<br /><br />";
		  break;
		  case "ploegen":
			  document.getElementById("side_menu").innerHTML = "» Different menu item<br />» Another menu item<br /><br />";
		  break;
		 
		  default:
			  document.getElementById("side_menu").innerHTML = "» Startpagina<br />» Nieuws<br />» Kalender<br />» Wedstrijdoverzicht<br /><br />";
		  break;
	}
}
-->
</script>

</head>

<body onload="setNav()"><div align="center">
<!-- header -->
<div class="header"></div>
<!-- menu -->
<div class="menu_container">
 <div class="menu_left"></div>
 <div class="menu_middle">
 <div class="menu1"><a href="index.html?loc=home">Home</a></div>
 <div class="menu1"><a href="index.html?loc=clubnieuws">Clubnieuws</a></div>
 <div class="menu1"><a href="index.html?loc=ploegen">Ploegen</a></div>
 <div class="menu1"><a href="index.html?loc=clubblad">Clubblad</a></div>
 <div class="menu1"><a href="index.html?loc=contact">Contact</a></div>
 <div class="menu1"><a href="index.html?loc=webteam">Webteam</a></div>
 </div>
 <div class="menu_right"></div>
 <div class="text_left"></div>
 <div class="text_middle"><div class="text3">
<marquee scrollamount="2" direction="left">bla bla bla</marquee></div>
 </div>
 <div class="text_right"></div>
 <div style="clear: both"></div>
</div>
<!-- container content -->
<div class="content_container">

 <div class="leftside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Submenu.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
 <div class="white">
   <div class="text2" id="side_menu">
	   » Startpagina<br />
	   » Nieuws<br />
	   » Kalender<br />
	   » Wedstrijdoverzicht<br />
	   <br />
   </div>
</div>
  </div>
  <div class="afronding"></div>
   <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">In de kijker.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
   
   member of the month nzu !
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 
 <div class="middle">
 
  <div>
   <div class="leftin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Laatste nieuws.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
<div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>&nbsp .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>&nbsp .........</div><div class="score">nog niet bekend</div>
	   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div class="rightin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Uitslagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div style="clear: both;"></div>
  </div>
  <div>
   <div class="leftin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Activiteiten.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>&nbsp .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>&nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
   
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div class="rightin">
   <div class="leftside2">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Verjaardagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp Ikke</div><div class="score">22 maart</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp Sinterklaas</div><div class="score">6 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp paus benedictus de 13de</div><div class="score">25 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp testpersoon tester</div><div class="score">1 januari</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp kerstman</div><div class="score">24 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp De paashaas</div><div class="score">21 april</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
 </div>
   </div>
   <div style="clear: both;"></div>
  </div>
   
  <div class="container_content">
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden2">
	<div class="text">Content.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white3">
   <div class="text2">Nieuwe website<br />
bla bla bla, ik ben kristof en ik heb dit gemaakt<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
   </div>
  </div>
  </div>
  <div class="afronding3"></div>
  <div class="footer"></div>
 </div>
 
 <!-- Golden Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Golden sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
	   Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- Silver Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Silver sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- Bronze Sponsor -->
 <div class="rightside">
 <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Bronze sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
 </div>
 <!-- einde sponsors -->
</div>

</div></body>

</html>



SoLi was right though, you do have a lot of <br /> tags in this code. If you use lists for your navigation and paragraphs for your text you can control them through the CSS.
Was This Post Helpful? 1
  • +
  • -

#8 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Question about linking menu

Posted 05 February 2009 - 07:00 AM

Thank you so much !!

i'll look up for the lists caus i don't get it right away,

thx again !!
Was This Post Helpful? 0
  • +
  • -

#9 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Question about linking menu

Posted 06 February 2009 - 08:48 AM

Another question..

I've read marquee is very unprofessional, is there another way to display news in a small banner ? (marquee is not supported by xhtml btw)
Was This Post Helpful? 0
  • +
  • -

#10 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: Question about linking menu

Posted 06 February 2009 - 08:51 AM

Yeah, marquee's are a bit naughty. I've previously used a ticker similar to the one on the bbc website: BBC News. It's javascript based, and very simple to use.
Was This Post Helpful? 0
  • +
  • -

#11 Stofke  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 07-January 09

Re: Question about linking menu

Posted 06 February 2009 - 10:56 AM

Thanks again ! You're like a html/java-god !!

Now i got another noob question.

so i kinda made a script like cnn. but i don't succeed in linking it from another javascript.

here's what mah page looks now :

<!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>korfbal</title>
<link href="css/website.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascripts/paginas.js"/>
<script type="text/javascript">
</script>

</head>

<body onload="navigeer()"><div align="center">
<!-- header -->
<div class="header">
<iframe src ="banner/imageshow/index.html" class="header" scrolling="no" frameborder="0"> </iframe>
</div>
<!-- menu -->
<div class="menu_container">
<div class="menu_left"></div>
<div class="menu_middle">
<div class="menu1"><a href="index.html?loc=home">Home</a></div>
<div class="menu1"><a href="index.html?loc=clubnieuws">Clubnieuws</a></div>
<div class="menu1"><a href="index.html?loc=ploegen">Ploegen</a></div>
<div class="menu1"><a href="index.html?loc=clubblad">Clubblad</a></div>
<div class="menu1"><a href="index.html?loc=contact">Contact</a></div>
<div class="menu1"><a href="index.html?loc=webteam">Webteam</a></div>
</div>
<div class="menu_right"></div>
<div class="text_left"></div>
<div class="text_middle"><div class="text3" id="nieuws">
<script language="Javascript" type="text/javascript">
<!--
// Ticker startup
function startTicker()
{
	// Define run time values
	huidigeBoodschap	 = -1;
	huidigeLengte	= 0;
	// Locate base elements
	if (document.getElementById) {	
			element	 = document.getElementById("nieuws");
			tikHetNieuws();   	
		 }
	else {
			document.write("<style>.ticki{display:none;}.ticko{border:0px; padding:0px;}</style>");
			return true;
	}
}
// Ticker main run loop
function tikHetNieuws()
{
	var myTimeout;  
	// Go for the next story data block
	if(huidigeLengte == 0)
	{
		huidigeBoodschap++;
		huidigeBoodschap	  = huidigeBoodschap % theItemCount;
		Boodschap	  = boodschappen[huidigeBoodschap].replace(/"/g,'"');		

	}
	// Stuff the current ticker text into the anchor
	element.innerHTML = Boodschap.substring(0,huidigeLengte) + bepaalTeken();
	// Modify the length for the substring and define the timer
	if(huidigeLengte != Boodschap.length)
	{
		huidigeLengte++;
		myTimeout = theCharacterTimeout;
	}
	else
	{
		huidigeLengte = 0;
		myTimeout = theStoryTimeout;
	}
	// Call up the next cycle of the ticker
	setTimeout("tikHetNieuws()", myTimeout);
}
// Widget generator
function bepaalTeken()
{
	if(huidigeLengte == Boodschap.length)
	{
		return geenTeken;
	}

	if((huidigeLengte % 2) == 1)
	{
		return teken1;
	}
	else
	{
		return teken2;
	}
}
// -->
</script>
	

	<script language="Javascript" type="text/javascript">
	<!--

	var theCharacterTimeout = 50;
	var theStoryTimeout	 = 5000;
	var teken1		= "_";
	var teken2		= "-";
	var geenTeken	   = "";
	

	var boodschappen = new Array();

	var theItemCount = 4;

	
		boodschappen[0] = "Borgerhout wint van Boeckenberg met 14-12";
		
	
		boodschappen[1] = "test1";
	
	
		boodschappen[2] = "Test3.";
	
	
		boodschappen[3] = "test4.";
	
	

	startTicker();
	
	//-->
	</script>
</div>
</div>
<div class="text_right"></div>
<div style="clear: both"></div>
</div>
<!-- container content -->
<div class="content_container">

<div class="leftside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden" id="menubalk">
	<div class="text">Home.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
<div class="white">
   <div class="text2" id="side_menu">
	   » Startpagina<br />
	   » Nieuws<br />
	   » Kalender<br />
	   » Wedstrijdoverzicht<br />
	   <br />
   </div>
</div>
  </div>
  <div class="afronding"></div>
   <div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">In de kijker.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
   
   member of the month nzu !
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>

<div class="middle" id="midden">

  <div>
   <div class="leftin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Laatste nieuws.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
<div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>  .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>   .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>  .........</div><div class="score">nog niet bekend</div>
	   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div class="rightin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Uitslagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="15px" style="float: left"/>   Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div style="clear: both;"></div>
  </div>
  <div>
   <div class="leftin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Activiteiten.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>  .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>   .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>  .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
   
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div class="rightin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Verjaardagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   Ikke</div><div class="score">22 maart</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   Sinterklaas</div><div class="score">6 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   paus benedictus de 13de</div><div class="score">25 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   testpersoon tester</div><div class="score">1 januari</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   kerstman</div><div class="score">24 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/>   De paashaas</div><div class="score">21 april</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div style="clear: both;"></div>
  </div>
   
  <div class="container_content">
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden2">
	<div class="text">Content.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white3">
   <div class="text2">Nieuwe website<br />
bla bla bla, ik ben kristof en ik heb dit gemaakt<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
   </div>
  </div>
  </div>
  <div class="afronding3"></div>
  <div class="footer"></div>
</div>

<!-- Golden Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Golden sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">
	   Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- Silver Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Silver sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- Bronze Sponsor -->
<div class="rightside">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden">
	<div class="text">Bronze sponsors.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white">
   <div class="text2">Nog<br />
	   wa<br />
	   afbeeldinge die ze ZELF moeten
	   <br />
	   opsturen<br />
	   <br />
	   <br />
	   <br />
	   <br />
   </div>
  </div>
  </div>
  <div class="afronding"></div>
</div>
<!-- einde sponsors -->
</div>

</div></body>

</html>


And what should i do for putting the midle part in an Iframe for changing the content ? (pasting the middle in a external page, doesn't work :/ )

i put in my index 

<div style="float:left">
<iframe src="paginas/startpagina.html" class ="middle" scrolling="no" frameborder="0"></iframe>
</div>


and in my startpagina.html 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link href="../css/website.css" rel="stylesheet" type="text/css" />
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="middle" id="midden">

  <div>
   <div class="leftin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Laatste nieuws.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
<div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>&nbsp .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/> &nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/icon_envelop.gif"/>&nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg">&nbsp</div><div class="readmore">leesmeer</div><div style="clear: both;"></div>
	   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div class="rightin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Uitslagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="16px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="16px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="16px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="16px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="16px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" src="images/bal.png" height="16px" style="float: left"/> &nbsp Borgerhout 1 - Catba 1</div>	   <div class="score">11-23</div><div style="clear: both;"></div>
	   <div class="ploeg">&nbsp</div><div class="readmore">leesmeer</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div style="clear: both;height:10px"></div>
  </div>
  <div>
   <div class="leftin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Activiteiten.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdfuif</div><div class="score">23 maart</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp Jeugdreis</div><div class="score">12-15 juli</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>&nbsp .........</div><div class="score">december</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/> &nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/activiteit.png"/>&nbsp .........</div><div class="score">nog niet bekend</div><div style="clear: both;"></div>
	   <div class="ploeg">&nbsp</div><div class="readmore">leesmeer</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div class="rightin">
   <div class="leftside2">
<div>
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden3">
	<div class="text">Verjaardagen.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white2">
   <div class="text2">
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp Ikke</div><div class="score">22 maart</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp Sinterklaas</div><div class="score">6 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp paus benedictus de 13de</div><div class="score">25 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp testpersoon tester</div><div class="score">1 januari</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp kerstman</div><div class="score">24 december</div><div style="clear: both;"></div>
   <div class="ploeg"><img alt="balleke" class="activiteit" src="images/present.png"/> &nbsp De paashaas</div><div class="score">21 april</div><div style="clear: both;"></div>
   <div class="ploeg">&nbsp</div><div class="readmore">leesmeer</div><div style="clear: both;"></div>
   </div>
  </div>
  </div>
  <div class="afronding2"></div>
</div>
   </div>
   <div style="clear: both; height:10px"></div>
  </div>
   
  <div class="container_content">
  <div class="balk">
   <div class="balkje_links"></div>
   <div class="balkje_midden2">
	<div class="text">Content.</div>
   </div>
   <div class="balkje_rechts"></div>
   <div style="clear: both;"></div>
  </div>
  <div class="white3">
   <div class="text2">Nieuwe website<br />
bla bla bla, ik ben kristof en ik heb dit gemaakt<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
   </div>
  </div>
  </div>
  <div class="afronding3"></div>
  <div class="footer"></div>
</div>
</body>
</html>

Attached image(s)

  • Attached Image

This post has been edited by Stofke: 06 February 2009 - 02:18 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1