Template probleem

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi iedereen,

Kan iemand me helpen aub.
Ik heb een bestaande template , maar wil nu alles naar het midden van de pagina centreren, alles staat nu aan de linkse kant van het scherm. Daar het een bestaande template met css style is, en ik er niet echt goed aan uit kan, is mijn vraag, weet iemand welke aanpassingen en waar ik moet doen om alles in het midden te kunnen centreren?

hartelijk dank hiervoor.

http://www.scoutsdonk.be/test/index.php

.css code:

Code:

/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
   font-family: Arial,sans-serif;
   color: #000000;
   line-height: 1.166;   
   margin: 0px;
   padding: 0px;
   background: #4A0001  fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
   color: #006600;
   text-decoration: none;
}

a:hover{
   text-decoration: underline;
}

/************** header tag styles **************/

h1{
 font: bold 120% Arial,sans-serif;
 color: #000000;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #000000;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #000000;
 margin: 0px;
 padding: 0px;
}


/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/********* form and related tag styles *********/

form {
   margin: 0;
   padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #000000;
}
            
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
   position:absolute;
   top: 112px;
   left: 2%;
   right: 2%;
   width:70%;
   background-color: #ffffff;
}

#tl {
   position:absolute;
   top: -1px;
   left: -1px;
   margin: 0px;
   padding: 0px;
   z-index: 100;
}

#tr {
   position:absolute;
   top: -1px;
   right: -1px;
   margin: 0px;
   padding: 0px;
   z-index: 100;
}

#masthead{
   position: absolute;
   top: 0px;
   left: 30px;
   right: 2%;
   width:70%;
   
}

#pageNav{
   float: left;
   width:178px;
   padding: 0px;
   background-color: #F5f7f7;
   border-right: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   font: small Verdana,sans-serif;
}

#content{
   padding: 0px 10px 0px 0px;
   margin:0px 0px 0px 178px;
   border-left: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
   margin: 0px;
   padding: 16px 0px 8px 0px;
   color: #ffffff;
   font-weight: normal;
}

/************** utility styles *****************/

#utility{
   font: 75% Verdana,sans-serif;
   position: absolute;
   top: 16px;
   right: 0px;
   color: #919999;
}

#utility a{
   color: #ffffff;
}

#utility a:hover{
   text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
   padding: 0px 0px 14px 10px;
   margin: 0px;
   border-bottom:1px solid #ccd2d2;
}

#pageName h2{
   font: bold 175% Arial,sans-serif;
   color: #000000;
   margin:0px;
   padding: 0px;
}

#pageName img{
   position: absolute;
   top: 39px;
   right: 314px;
   padding: 0px;
   margin: 0px;
   width: 487px;
   height: 64px;
   left: 179px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}

#globalNav img{
   margin-bottom: -4px;
 
}

#gnl {
   position: absolute;
   top: 0px;
   left:0px;
}

#gnr {
   position: absolute;
   top: 1px;
   right:-2px;
}

#globalLink{
   position: absolute;
   top: 6px;
   height: 22px;
   min-width: 640px;
   padding: 0px;
   margin: 0px;
   left: 10px;
   z-index: 100;
}


a.glink, a.glink:visited{
     font-size: small;
     color: #000000;
   font-weight: bold;
   margin: 0px;
   padding: 2px 5px 4px 5px;
   border-right: 1px solid #8FB8BC;
}

a.glink:hover{
     background-image: url(glblnav_selected.gif);
   text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
   position: absolute;
   top: 84px;
   left: 0px;
   /*width: 100%;*/
   min-width: 640px;
   height: 20px;
   padding: 0px 0px 0px 10px;
   visibility: hidden;
   color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
   font-size: 80%;
   color: #ffffff;
}

.subglobalNav a:hover{
   color: #cccccc;
}

/*************** search styles *****************/

#search{
   position: absolute;
   top: 5px;
   right: 10px;
   z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
   font-size: 80%;
   font-weight: bold;
   
}

#search a:hover{
   margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
   padding: 5px 0px 5px 10px;
   font: small Verdana,sans-serif;
   color: #AAAAAA;
}

#breadCrumb a{
   color: #AAAAAA;
}

#breadCrumb a:hover{
   color: #4A0001;
   text-decoration: underline;
}


/************** feature styles *****************/

.feature{
   padding: 0px 0px 10px 10px;
   font-size: 80%;
   min-height: 200px;
   height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
   font: bold 175% Arial,sans-serif;
   color: #000000;
   padding: 30px 0px 5px 0px;
}

.feature img{
   float: left;
   padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
   padding: 10px 0px 0px 10px;
   font-size: 80%;
}

.story h3{
   font: bold 125% Arial,sans-serif;
   color: #000000;
}

.story p {
   padding: 0px 0px 10px 0px;
}

.story a.capsule{
   font: bold 1em Arial,sans-serif;
   color: #4A0001;
   display:block;
   padding-bottom: 5px;
}

.story a.capsule:hover{
   text-decoration: underline;
}

td.storyLeft{
   padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
   clear: both;
   border-top: 1px solid #cccccc;
   font-size: small;
   color: #cccccc;
   padding: 10px 10px 10px 10px;
   margin-top: 0px;
}

#siteInfo img{
   padding: 4px 4px 4px 0px;
   vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
   margin: 0px;
   padding: 0px;

}

#sectionLinks h3{
   padding: 10px 0px 2px 10px;
   border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
   display: block;
   border-top: 1px solid #ffffff;
   border-bottom: 1px solid #cccccc;
   background-image: url(bg_nav.jpg);
   font-weight: bold;
   padding: 3px 0px 3px 10px;
   color: #000000;
}

#sectionLinks a:hover{
   border-top: 1px solid #cccccc;
   background-color: #DDEEFF;
   background-image: none;
   font-weight: bold;
   text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
   margin: 0px;
   padding: 0px 0px 10px 10px;
   border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
   padding: 10px 0px 2px 0px;
}

.relatedLinks a{
   display: block; 
}


/**************** advert styles *****************/

#advert{
   padding: 10px;
}

#advert img{
   display: block;
}

/********************* end **********************/

To · **Geplaatst:** 28 Feb 2007 21:24

Probeer eens door in je CSS

Code:

#masthead{
   position: absolute;
   top: 0px;
   left: 30px;
   right: 2%;
   width:70%;
   
} 

te vervangen door

Code:

#masthead{
   position: absolute;
   top: 0px;
   left: 30px;
   right: 2%;
   width:70%;
   margin: 0px auto 0px auto;
} 

Gelukt?

To

caygull · **Geregistreerd:** 31 Jul 2002 23:00 **Berichten:** 236

Ik ben nu echt geen held in CSS, maar niet zolang geleden zat ik met een gelijkaardig probleem.

op deze pagina vond ik de oplossing en de uitleg waarom.

http://www.maxdesign.com.au/presentation/center/

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi TO,

Ik heb je code zo in de css style gezet maar er gebeurd helemaal niets.

Groetjes,

Lainke

To

lainke schreef:

Hoi TO,

Ik heb je code zo in de css style gezet maar er gebeurd helemaal niets.

Groetjes,

Lainke

En met

Code:

#masthead{
   margin: 0px auto 0px auto;
}

(gokje hoor, geen tijd om het uit te testen)?

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi To,

Met deze code begint het al wat te werken, het is inderdaad verschoven naar het midden, maar het is nu aan de rechterkant volledig uit beeld.
Ik kan in dreamweaver dat zetten op "W70%" en dan staat het mooi in het midden, mijn vraag:

Heb ik dit zo goed gedaan of moet ik in de .css ook nog iets aanpassen?

Bedankt alvast

To

lainke schreef:

Hoi To,

Met deze code begint het al wat te werken, het is inderdaad verschoven naar het midden, maar het is nu aan de rechterkant volledig uit beeld.
Ik kan in dreamweaver dat zetten op "W70%" en dan staat het mooi in het midden, mijn vraag:

Heb ik dit zo goed gedaan of moet ik in de .css ook nog iets aanpassen?

Bedankt alvast

Jups, wat jij doet is in de CSS

Code:

#masthead{
   margin: 0px auto 0px auto;
   width: 70%;
}

gebruiken (dat veronderstel ik toch). Persoonlijk zou ik het eerder op een vaste breedte zetten, zo verliest iemand met een kleine schermresolutie geen (broodnodige) ruimte. Zo dus:

Code:

#masthead{
   margin: 0px auto 0px auto;
   width: 760px;
}

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi To,

Nu gaat het inderdaad gecentreerd op de pagina staat zoals het moet, mijn navigatiebalk bovenaan dus.

Maar zit nog met 2 probleemjes:

1- De sublinks in die navigatiebalk ( die nu gecentreerd staat ) die open gaan bij het klikken op een knop in de navigatiebalk blijven links gecentreerd staan, die zijn dus niet gecentreerd.

2- Waar en wat in de code moet ik veranderen om de template vlak onder de gecentreerde navigatiebalk ook gecentreerd te krijgen?

Sorry voor de last.
Bedankt alvast.

PS: Een collega van onze scoutsvereniging (Toon ) had je onlangs nog gesproken op de Kluishike

To

lainke schreef:

Maar zit nog met 2 probleemjes:

1- De sublinks in die navigatiebalk ( die nu gecentreerd staat ) die open gaan bij het klikken op een knop in de navigatiebalk blijven links gecentreerd staan, die zijn dus niet gecentreerd.

2- Waar en wat in de code moet ik veranderen om de template vlak onder de gecentreerde navigatiebalk ook gecentreerd te krijgen?

Kan je eens je code ergens online zetten? Dan begrijp ik beter wat je bedoelt.

lainke schreef:

PS: Een collega van onze scoutsvereniging (Toon ) had je onlangs nog gesproken op de Kluishike

Jips, I remember :wink:

. Zijn zijn voeten al hersteld? Ik loop toch nog altijd met een blauwe teen rond...

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi To,

Ik heb de pagina's die ik aan het bewerken ben op onze server gezet onder "test", dus:

http://www.scoutsdonk.be/test/index.php

Is dit voldoende dat je dan de brancode kan bekijken?
Of bedoelde je iets anders?

De code van de css style staat hierboven al.

Bedankt alvast voor je tijd

To

Ik heb wat liggen aanpassen in je code, denk dat je dit bedoelt:

CSS:

Code:

/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
   font-family: Arial,sans-serif;
   color: #800000;
   line-height: 1.166;   
   margin: 0px;
   padding: 0px;
   background: #4A0001  fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
   color: #064344;
   text-decoration: none;
   
}

a:hover{
   text-decoration: underline;
}

/************** header tag styles **************/

h1{
 font: bold 120% Arial,sans-serif;
 color: #000000;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #000000;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #000000;
 margin: 0px;
 padding: 0px;
}


/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/********* form and related tag styles *********/

form {
   margin: 0;
   padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #000000;
}
            
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
   /*position:absolute;
   top: 113px;
   left: 29px;
   right: 2%;
   width:70%;*/
   width: 100%;
   background-color: #FFFFEE;
}

#tl {
   position:absolute;
   top: -1px;
   left: -1px;
   margin: 0px;
   padding: 0px;
   z-index: 100;
}

#tr {
   position:absolute;
   top: -1px;
   right: -1px;
   margin: 0px;
   padding: 0px;
   z-index: 100;
}

#geheel, #masthead{ 
   margin: 0px auto 0px auto; 
   width: 760px; 
} 
#pageNav{
   float: left;
   width:178px;
   padding: 0px;
   background-color: #F5f7f7;
   border-right: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   font: small Verdana,sans-serif;
}

#content{
   padding: 0px 10px 0px 0px;
   margin:0px 0px 0px 178px;
   border-left: 1px solid #ccd2d2;
}


/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
   margin: 0px;
   padding: 16px 0px 8px 0px;
   color: #ffffff;
   font-weight: normal;
}

/************** utility styles *****************/

#utility{
   font: 75% Verdana,sans-serif;
   position: absolute;
   top: 16px;
   right: 0px;
   color: #919999;
}

#utility a{
   color: #ffffff;
}

#utility a:hover{
   text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
   padding: 0px 0px 14px 10px;
   margin: 0px;
   border-bottom:1px solid #ccd2d2;
}

#pageName h2{
   font: bold 175% Arial,sans-serif;
   color: #000000;
   margin:0px;
   padding: 0px;
}

#pageName img{
   position: absolute;
   top: 39px;
   right: 314px;
   padding: 0px;
   margin: 0px;
   width: 487px;
   height: 64px;
   left: 179px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
margin-bottom: 25px;
background-image: url(http://www.scoutsdonk.be/test/glbnav_background.gif);
}

#globalNav img{
   margin-bottom: -4px;
 
}

#gnl {
   position: absolute;
   top: 0px;
   left:0px;
}

#gnr {
   position: absolute;
   top: 1px;
   right:-1px;
}

#globalLink{
   position: absolute;
   top: 6px;
   height: 22px;
   min-width: 640px;
   padding: 0px;
   margin: 0px;
   left: 7px;
   z-index: 100;
}


a.glink, a.glink:visited{
     font-size: small;
     color: #000000;
   font-weight: bold;
   margin: 0px;
   padding: 2px 5px 4px 5px;
   border-right: 1px solid #8FB8BC;
}

a.glink:hover{
     background-image: url(glblnav_selected.gif);
   text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
   position: absolute;
   margin: 0px auto 0px auto;
   /*width: 100%;*/
   top: 85px;
   min-width: 640px;
   height: 23px;
   padding: 0px 0px 0px 10px;
   visibility: hidden;
   color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
   font-size: 80%;
   color: #ffffff;
}

.subglobalNav a:hover{
   color: #cccccc;
}

/*************** search styles *****************/

#search{
   position: absolute;
   top: 5px;
   right: 10px;
   z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
   font-size: 80%;
   font-weight: bold;
   
}

#search a:hover{
   margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
   padding: 5px 0px 5px 10px;
   font: small Verdana,sans-serif;
   color: #AAAAAA;
}

#breadCrumb a{
   color: #AAAAAA;
}

#breadCrumb a:hover{
   color: #4A0001;
   text-decoration: underline;
}


/************** feature styles *****************/

.feature{
   padding: 0px 0px 10px 10px;
   font-size: 80%;
   min-height: 200px;
   height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
   font: bold 175% Arial,sans-serif;
   color: #000000;
   padding: 30px 0px 5px 0px;
}

.feature img{
   float: left;
   padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
   padding: 10px 0px 0px 10px;
   font-size: 80%;
}

.story h3{
   font: bold 125% Arial,sans-serif;
   color: #000000;
}

.story p {
   padding: 0px 0px 10px 0px;
}

.story a.capsule{
   font: bold 1em Arial,sans-serif;
   color: #4A0001;
   display:block;
   padding-bottom: 5px;
}

.story a.capsule:hover{
   text-decoration: underline;
}

td.storyLeft{
   padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
   clear: both;
   border-top: 1px solid #cccccc;
   font-size: small;
   color: #cccccc;
   padding: 10px 10px 10px 10px;
   margin-top: 0px;
}

#siteInfo img{
   padding: 4px 4px 4px 0px;
   vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
   margin: 0px;
   padding: 0px;

}

#sectionLinks h3{
   padding: 10px 0px 2px 10px;
   border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
   display: block;
   border-top: 1px solid #ffffff;
   border-bottom: 1px solid #cccccc;
   background-image: url(bg_nav.jpg);
   font-weight: bold;
   padding: 3px 0px 3px 10px;
   color: #000000;
}

#sectionLinks a:hover{
   border-top: 1px solid #cccccc;
   background-color: #DDEEFF;
   background-image: none;
   font-weight: bold;
   text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
   margin: 0px;
   padding: 0px 0px 10px 10px;
   border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
   padding: 10px 0px 2px 0px;
}

.relatedLinks a{
   display: block; 
}


/**************** advert styles *****************/

#advert{
   padding: 10px;
}

#advert img{
   display: block;
}

/********************* end **********************/
#pagecell1 #content table {
   background-color: #FFFFEE;
}

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">
<!-- DW6 -->
<head>
<script language="JavaScript">
function iFrameHeight() {
if(document.getElementById && !(document.all)) {
h = document.getElementById('blockrandom').contentDocument.body.scrollHeight;
document.getElementById('blockrandom').style.height = h;
}
else if(document.all) {
h = document.frames('blockrandom').document.body.scrollHeight;
document.all.blockrandom.style.height = h;
}
}
</script>

<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="emx_nav_left.css" type="text/css" />

<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;

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

//menu methods
function ehandler(event,theobj){
  for (var i=1; i<= theobj.numberofmenuitems; i++){
    var shutdiv =eval( "menuitem"+i+".thediv");
    shutdiv.style.visibility="hidden";
  }
  theobj.thediv.style.visibility="visible";
}
            
function closesubnav(event){
  if ((event.clientY <48)||(event.clientY > 107)){
    for (var i=1; i<= numofitems; i++){
      var shutdiv =eval('menuitem'+i+'.thediv');
      shutdiv.style.visibility='hidden';
    }
  }
}
// -->
</script>
<style type="text/css">
<!--
body {
   background-color: #800000;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}
a:active {
   text-decoration: none;
}
.style4 {color: #800000}
.style5 {font-size: 9px}

-->
</style>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="#pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="geheel">
<div id="masthead">
  <div> </div>
  <h1 align="right" id="siteName"><img src="http://www.scoutsdonk.be/test/images/bannertje.gif" alt="" name="bannertje" width="307" height="30" id="bannertje" /></h1>
  <div id="globalNav"> <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl" /><img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr" />
    <div id="globalLink"> </a> 
   <a href="index.php?page=cutenews" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Startpagina   </a><a href="index.php?page=takken" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Takken 
   </a><a href="index.php?page=onze_groep" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Onze groep 
   </a><a href="index.php?page=interactief" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Interactief 
   </a><a href="index.php?page=activiteiten" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Activiteiten 
   </a><a href="index.php?page=scouts" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Scouts 
   </a><a href="index.php?page=vzw_navigatie" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Vzw 
   </a> </div>
    <!--end globalLinks-->
  </div>
   
 <!-- startpagina -->  
  <div id="subglobal1" class="subglobalNav"> 
  <a href="index.php?page=cutenews">Nieuws</a>  </div>
    
   <!-- takken -->

  <div id="subglobal2" class="subglobalNav"> 
  <a href="index.php?page=kapoenen">Kapoenen</a> |
  <a href="index.php?page=welpen">Welpen</a> |
  <a href="index.php?page=jonggivers">Jonggivers</a> | 
  <a href="index.php?page=givers">Givers</a> |
  <a href="index.php?page=jins">Jins</a> |
  <a href="index.php?page=leiding">Leiding</a> |
  <a href="index.php?page=groepsploeg">Groepsploeg</a>  </div>
  
  
   <!-- onze groep -->
  <div id="subglobal3" class="subglobalNav"> 
  <a href="index.php?page=wie_zijn_wij">Wie zijn wij</a> |
  <a href="index.php?page=wie_doet_wat">Wie doet wat</a> |
  <a href="index.php?page=inschrijven">Inschrijven</a> |
  <a href="index.php?page=weetjes">Weetjes</a> |
  <a href="index.php?page=uniform">Uniform</a> |
  <a href="index.php?page=in_het_nieuws">In het nieuws</a> |
  <a href="index.php?page=kompas">Kompas</a> |
  <a href="index.php?page=archief">Archief</a> |
  <a href="index.php?page=statistiekenrapport">Statistieken</a> |
  <a href="index.php?page=ligging">Ligging</a> |
  <a href="index.php?page=mailadressen">Mailinglijst</a>  </div
  
   ><!-- interactief -->
  <div id="subglobal4" class="subglobalNav">
  <a href="index.php?page=mailform">Contact</a> |
  <a href="index.php?page=gastenboek">Gastenboek</a> |
  <a href="http://www.scoutsdonk.be/fotoalbum/index.php">Fotoalbum</a> | 
  <a href="index.php?page=filmpjes">Video's</a> |
  <a href="index.php?page=spelletjes">Spelletjes</a> |
  <a href="index.php?page=kleurplaatjes">Kleurplaatjes</a> |
  <a href="index.php?page=wallpapers">Wallpapers</a> | 
  <a href="index.php?page=links">Links</a> | 
  <a href="index.php?page=poll">Poll</a> |
  <a href="index.php?page=nieuwsbrief">Nieuwsbrief</a>  </div>
  
   <!-- activiteiten -->
  <div id="subglobal5" class="subglobalNav"> 
  <a href="index.php?page=agenda">**************************************************************Agenda</a> | 
  <a href="index.php?page=kamp">Kampen</a>  </div>
  
  
   <!-- scouts -->
  <div id="subglobal6" class="subglobalNav"> 
  <a href="index.php?page=baden_powell">**********Baden Powell</a> |
  <a href="index.php?page=jaarthema_2006_2007">Jaarthema</a> |
  <a href="index.php?page=jaarkentekens">Jaarkentekens</a> |
  <a href="index.php?page=technieken">Technieken</a> |
  <a href="index.php?page=scoutsshop">Scoutsshop</a> |
  <a href="index.php?page=scouts_nieuws">Sc. & Gidsen Vl. Nieuws</a>  </div>
  
  
   <!-- vzw -->
  <div id="subglobal7" class="subglobalNav"> 
  <a href="index.php?page=vzw">****************************************************************************************Wat en wie</a> |
  <a href="index.php?page=jaarplanning">Jaarplanning</a> |
  <a href="http://www.scoutsdonk.be/vzw/index.php">Login</a> </div>
</div>


<!-- end masthead -->
<div id="pagecell1">
  <!--pagecell1-->
  <img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl" /> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr" />
  <div id="breadCrumb"> 
    
   
   <p><span class="style4">Wie is er momenteel online:</span> 
      <!-- Begin W.I.E. code -->
<script src="http://www.wieonline.nl/wie/wie.php?user=lainke"></script>
<!-- End W.I.E. code -->
 
      <span class="style5">&lt; klik hierop en vul je naam in
!    </span></p>
    <p align="center"><img src="http://www.scoutsdonk.be/test/images/banner.JPG" alt="Banner" width="691" height="91" /></p>
    <table width="50%" border="0" align="center">
      <tr>
        <th scope="col"><a href="index.php?page=kapoenen"><img src="http://www.scoutsdonk.be/test/images/knop_kap.jpg" alt="Kapoenen" width="34" height="34" border="0" /></a></th>
        <th scope="col"><a href="index.php?page=welpen"><img src="http://www.scoutsdonk.be/test/images/knop_welpen.jpg" alt="Welpen" width="34" height="34" border="0" /></a></th>
        <th scope="col"><a href="index.php?page=jonggivers"><img src="http://www.scoutsdonk.be/test/images/knop_jogi.jpg" alt="Jonggivers" width="34" height="34" border="0" /></a></th>
        <th scope="col"><a href="index.php?page=givers"><img src="http://www.scoutsdonk.be/test/images/knop_giv.jpg" alt="Givers" width="34" height="34" border="0" /></a></th>
        <th scope="col"><a href="index.php?page=jins"><img src="http://www.scoutsdonk.be/test/images/knop_jin.jpg" alt="Jins" width="34" height="34" border="0" /></a></th>
      </tr>
    </table>
  </div>
  <div id="pageName"></div>
  <div id="pageNav">
    <div id="sectionLinks"> 
   <a href="index.php?page=fotoalbum">Foto's   
   </a> <a href="index.php?page=filmpjes">Video's
   </a> <a href="index.php?page=gastenboek">Gastenboek
   </a> <a href="index.php?page=poll">Poll
   </a> <a href="index.php?page=forum">Forum
   </a> <a href="index.php?page=kompas">Kompas
   </a> <a href="index.php?page=verhuur_lokalen">Verhuur
   </a> <a href="http://www.scoutsdonk.be/beveiligd/index.php">Login leiding
   </a> <a href="http://www.scoutsdonk.be/vzw/index.php">Login vzw
   </a> <a href="index.php?page=mailform">Contact
   </a></div>
    
   
   <div class="relatedLinks">
      <h3>Externe Scouts links</h3>      
     </a><a href="http://www.scoutsshop.be/shop/" target="_blank">Scoutsshop
     </a> <a href="http://www.vvksm.be/" target="_blank">Scouts & Gids.Vlaand.
     </a> <a href="http://www.gouwww.be/" target="_blank">Gouw Limburg 
     </a> <a href="http://www.scoutnet.be" target="_blank">Scoutnet
     </a> <a href="http://www.sjors.be" target="_blank">Sjors.be
     </a> <a href="http://www.gouwww.be" target="_blank">100 jaar scouts
     </a></div>
     
     
    <div class="relatedLinks">
      <h3>Externe Links </h3>
      <a href="http://www.herk-de-stad.be" target="_blank">Herk-de-Stad.be     
     </a></div>
     

     
     
    <div id="advert">Website powered by: <br />
      <a href="http://www.scoutnet.be" target="_blank"><img src="http://www.scoutsdonk.be/test/images/scoutnet.jpg" alt="" width="157" height="46" border="0" /></a></div>
  </div>
  <div id="content">
    <table width="98%"  border="0">
      <tr>
        <td height="312" valign="top" ><style type="text/css">
<!--
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

-->
</style>
<table width="100%"  border="0">
  <tr valign="top">
    <th scope="col"><div align="left"> <img src="http://www.scoutsdonk.be/test/images/bullet.gif" width="12" height="12"><strong class="style3">ONZE GROEP &gt; wie zijn wij </strong></div></th>
  </tr>
  <tr>
    <th width="86%" scope="col"><div align="left"></div></th>
  </tr>
  <tr>
    <td valign="top" class="style3"><p><img src="http://www.scoutsdonk.be/test/images/wie_zijn_wij.jpg" alt="Wie zijn wij" width="260" height="195" hspace="5" vspace="5" align="right" /><span class="style3">Wij zijn een kleine scoutsgroep, bij wie plezier maken en vriendschap centraal staat!! En dit doen we op allerlei verschillende manieren zoals: <br />
      <br />
      knutselspelen, 
      kringspelen,
      bosspelen, 
      pleinspelen, en voor de iets stevigere onder jullie ook behoorlijk ruige spelen. <br />
      <br />
      Daarbovenop doen we ook nog tal van leuke uitstappen zoals 
      eens gaan zwemmen of gaan schaatsen, eens een film kijken en we gaan zelfs ook op weekend !! <br />
      bovendien leer je ook tal van technieken zoals kaartlezen, sjorren en nog veel meer . <br />
      Allemaal dingen die je goed kan gebruiken om kampen te bouwen en op tocht te gaan. <br />
      <br />
      Wanneer doen we dan nu al die leuke dingen? <br />
      Wel, de meeste van onze activiteiten gaan zondagnamiddag door, van twee tot vijf. <br />
      En als er eens een andere dag of tijdstip iets te doen is, dan laten we dat jullie zeker weten via de maandprogramma's, die je trouwens ook op deze site terug vindt. <br />
      <br />
      Wil je er ook bij komen? STEEDS WELKOM !!! En als je nog vragen hebt, aarzel dan niet om ons te <a href="index.php?page=mailform">contacteren</a>!! <br />
      Alle nodige info vind je hier op deze site terug. Geniet er alvast nu al van. <br />
      <br />
      Voor de leiding,<br />
      Andy <br />
      <br />
      <a href="index.php?page=cutenews">Meer nieuws</a> </span><br />
    </p></td>
  </tr>
</table>
</td>
      </tr>
    </table>
    <table width="100%" border="0" align="left">
    </table>
  </div>
  <div id="siteInfo"> 
    <div align="center"><a href="index.php?page=copyright">&copy;opyright</a>  Scouts & Gidsen Donk 2007 - <a href="index.php?page=webmaster">Webmaster </a></div>
  </div>
</div>
<!--end pagecell1-->
<br />
<script type="text/javascript">
    <!--
            var menuitem1 = new menu(7,1,"hidden");
         var menuitem2 = new menu(7,2,"hidden");
         var menuitem3 = new menu(7,3,"hidden");
         var menuitem4 = new menu(7,4,"hidden");
         var menuitem5 = new menu(7,5,"hidden");
         var menuitem6 = new menu(7,6,"hidden");
         var menuitem7 = new menu(7,7,"hidden");
    // -->
    </script>
</div>
</body>
</html>

To

lainke · **Geregistreerd:** 17 Mei 2003 23:00 **Berichten:** 142

Hoi To, dit is inderdaad zoals ik het bedoelde !

1
Kan het zijn dat het normaal was dat geen enkele link meer werkte?, ik heb nu gewoon uit mijn indexpagina alle linkscode zoals deze bv terug gezet:

Code:

case "project": $page="project/index.php";break;
case "vvksmnieuws": $page="vvksmnieuws.php";break;
case "cutenews": $page="cutenews.php";break;
case "tuur": $page="tuur.php";break;
default: $page="wie_zijn_wij.php";break; } include($page); ?>

, mocht dat?

2
Als ik nu mijn template iets breder wil maken alsook de navigatie in zijn geheel, welke zijn dan de codes die ik moet gaan aanpassen, of zijn er dat teveel?

3
De hoekjes om mijn template mooi af te ronden zweven nu nog ergens op de indexpagina links en rechts, hoe zou ik in godsnaam deze correct op de linker en rechterbovenkant van mijn template kunnen plaatsen?

Heel fel bedankt alvast voor je gedane moeite en nogmaals soory voor de vele vragen!

To

lainke schreef:

Hoi To, dit is inderdaad zoals ik het bedoelde !

1
Kan het zijn dat het normaal was dat geen enkele link meer werkte?, ik heb nu gewoon uit mijn indexpagina alle linkscode zoals deze bv terug gezet:

Code:

case "project": $page="project/index.php";break;
case "vvksmnieuws": $page="vvksmnieuws.php";break;
case "cutenews": $page="cutenews.php";break;
case "tuur": $page="tuur.php";break;
default: $page="wie_zijn_wij.php";break; } include($page); ?>

, mocht dat?

Ik denk het wel.

lainke schreef:

2
Als ik nu mijn template iets breder wil maken alsook de navigatie in zijn geheel, welke zijn dan de codes die ik moet gaan aanpassen, of zijn er dat teveel?

Nee, het enige wat je moet aanpassen de width-waarde in

Code:

#geheel, #masthead{ 
   margin: 0px auto 0px auto; 
   width: 760px; 
} 

Leve CSS hé! :wink:

lainke schreef:

3
De hoekjes om mijn template mooi af te ronden zweven nu nog ergens op de indexpagina links en rechts, hoe zou ik in godsnaam deze correct op de linker en rechterbovenkant van mijn template kunnen plaatsen?

Nu geen tijd om dat uit te dokteren, maar het heeft te maken met

Code:

#tl {
   position:absolute;
   top: -1px;
   left: -1px;
   margin: 0px;
   padding: 0px;
   z-index: 100;
}

#tr {
   position:absolute;
   top: -1px;
   right: -1px;
   margin: 0px;
   padding: 0px;
   z-index: 100;
}

Pluis dat stukje code eens zelf uit.

To

Scoutnet vzw

Template probleem

Wie is er online?