/* * indeling van een web-pagina. * opmaak van de content in pagina_content.css */ /* BODY * **************************************** */ /* specifieert de van de webpagina * * voorwaarden: * - pagina moet xhtml-strict zijn om effect te hebben (niet quircks mode!) */ HTML{ height: 100%; } BODY{ margin: 0; /*zet de eigenlijke pagina in het midden van het browservenster (in het midden van de ) */ height: 100%; } /* PAGINA * **************************************** */ /* specifieert het pagina blok (wrapper rond alle blokken). * voorwaarden: * - pagina moet xhtml-strict zijn om effect te hebben (niet quircks mode!) */ DIV#pagina{ position: relative; width: 1000px; /*zet de eigenlijke pagina in het midden van het browservenster*/ margin: 0 auto; min-height: 100%; /*DEBUG border-style:solid; border-width: 2px; border-color: blue;*/ } /* HEADER * **************************************** */ /* specifieert het header blok * het header blok bevat * - de achtergrond * - geanimeerd logo * - titel * - menu (zie verder) */ DIV#header{ position: relative; height: 150px; width: 1000px; } /* achtergrond afbeelding van de header */ IMG#header-achtergrond{ position: absolute; height: 150px; width: 1000px; z-index: 0; top: 0px; left: 0px; } /* geanimeerd logo van ieperplant */ OBJECT#logo-anim{ position: absolute; bottom: 35px; left: 0px; z-index: 2; } /* logo extensie */ IMG#logo-extensie{ position: absolute; z-index: 1; bottom: 35px; right: 0px; } /* titel 'plantencentrum ieperplant' */ P#header-titel{ position: absolute; z-index: 3; right: 15px; bottom: 40px; padding: 0px; margin: 0px; font-family: 'Comic Sans Ms', Bard, 'poor richard', Papyrus, 'Sans-serif'; font-size: 24pt; font-style: italic; text-align: right; /*color: #66cc33;*/ color: #ffff33; width: 75%; } /* HOOFD-MENU * **************************************** */ DIV#hoofdmenu{ position: absolute; z-index: 3; bottom: 5px; right: 0px; width: 1000px; height: 30px; } IMG#hoofdmenu-achtergrond{ position: absolute; z-index:3; bottom: 0px; right: 0px; width: 1000px; height: 25px; } P.hoofdmenu{ position: absolute; z-index: 4; width: 1000px; height: 20px; bottom: 0px; margin: 0px; padding: 0px; margin-left: 0px; padding-left: 10px; } A.hoofdmenu-item{ color: #ffff33; font-size: 11pt; text-decoration: none; font-weight: bold; border-width: 2px; border-left-style: solid; border-left-color: #003300; margin: 0px; padding: 0px; margin-right: 40px; margin-bottom: 0px; padding-left:2px; height: 20px; } A.hoofdmenu-item:hover{ background-color: #003300; } /* MAIN - CONTENT * **************************************** */ DIV#main{ position: relative; width: 1000px; margin: 0px; padding: 0px; /*DEBUG border-style:solid; border-width: 2px; border-color: white;*/ } /* DIV MENU */ DIV#menu{ position: relative; border-style: solid; border-width: 1px; border-color: #339900; float: left; margin: 0; margin-top: 10px; padding: 0; width: 200px; } IMG#menu-achtergrond{ position: relative; z-index: -1; margin: 0; float: left; width: 17px; } H1.menu{ font-size:10pt; margin-top: 0px; clear: none; width: auto; margin-left: 20px; } UL.menu{ color: #66cc33; position: relative; list-style-type: square; list-style-position: outside; } UL.submenu{ color: #339900; position: relative; list-style-type: square; list-style-position: outside; margin: 0; padding: 0; margin-left: 20px; } /* DIV INHOUD */ DIV#inhoud{ position: relative; z-index: 0; border-style: solid; border-width: 1px; border-color: #339900; margin-left: 5px; margin-top:10px; padding: 5px; float: left; width: 600px; } IMG#inhoud-achtergrond-top{ position: absolute; z-index: -1; right: 0px; top: 0px; } IMG#inhoud-achtergrond-bottom{ position: absolute; z-index: -1; left: 0px; bottom: 0px; } /* BREAD CRUMBS * **************************************** */ /* positionering in pagina_indeling.css*/ A.breadcrumb{ position: relative; z-index: 5; text-decoration: none; } A.breadcrumb:hover{ color: #66cc33; font-weight: normal; } P#breadcrumb{ position: relative; z-index: 5; text-align: right; width: 100%; } /* DIV INHOUDSTAFEL */ DIV#inhoudstafel{ position: relative; z-index:0; border-style: solid; border-width: 1px; border-color: #339900; width: 164px; float: left; margin-left: 5px; margin-top: 10px; padding: 5px; } IMG#inhoudstafel-achtergrond{ position: absolute; left: 0px; top: 0px; z-index: 0; } H1.inhoudstafel{ font-size:10pt; margin-top: 0px; } A.inhoudstafel_l1{ color: #66cc33; text-decoration: none; } A.inhoudstafel_l1:hover{ font-weight: normal; color: #ffff33; } A.inhoudstafel_l2{ color: #339900; text-decoration: none; } A.inhoudstafel_l2:hover{ font-weight: normal; color: #ffff33; } UL.inhoudstafel_l1{ margin: 0; margin-left: 15px; padding: 0; list-style-type: square; list-style-position: outside; color: #66cc33; position: relative; z-index: 6; } UL.inhoudstafel_l2{ margin: 0; margin-left: 20px; padding: 0; list-style-type: square; list-style-position: outside; color: #339900; position: relative; z-index: 6; } /* DIV EXTRA */ DIV#extra{ position: relative; z-index: 0; border-style: solid; border-width: 1px; border-color: #339900; color: #339900; width: 164px; float: right; margin-right: 0px; margin-top: 5px; padding: 5px; } IMG#extra-achtergrond{ position: absolute; z-index: -1; right: 0px; bottom: 0px; } H1.extra{ font-size:10pt; margin-top: 0px; } A.extra{ color: #66cc33; text-decoration: none; } A.extra:hover{ font-weight: normal; color: #ffff33; } UL.extra_l1{ margin: 0; margin-left: 15px; padding: 0; list-style-type: square; list-style-position: outside; color: #66cc33; position: relative; z-index: 6; } UL.extra_l2{ margin: 0; margin-left: 20px; padding: 0; list-style-type: square; list-style-position: outside; color: #339900; position: relative; z-index: 6; } IMG.extra{ position: relative; z-index: 5; width: 90px; } /* FOOTER * **************************************** */ DIV#prefooter{ position: relative; width: 1000px; clear: both; /* zorgt er voor dat de 'main div' stretcht volgens de inhoud*/ margin-bottom: 60px; /* hoogte van de footer! zoniet overlap*/ /*DEBUG border-style:solid; border-width: 2px; border-color: black;*/ } DIV#footer{ position: absolute; width: 1000px; height: 60px; /* margin-bottom van pre-footer moet gelijk zijn! zoniet overlap*/ bottom: 0; /*float: left;*/ /*DEBUG border-style:solid; border-width: 2px; border-color: purple;*/ } IMG#footer-achtergrond{ position: absolute; z-index: 3; bottom: 0px; left: 0px; width: 1002px; } P#footer-tekst{ position: absolute; z-index: 4; text-align: right; right: 4px; bottom: 4px; color: #003300; padding: 0; margin:0; } /* ALGEMENE OPMAAK * **************************************** */ BODY{ background-color: #003300; color: #ffff33; font-family: "verdana", sans-serif; font-size: 10pt; } /*UL{ padding:0; margin-left: 25px; }*/ LI{ margin-top:4px; } H1{ font-size: 13pt; color: #66cc33; width: 100%; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #66cc33; margin-top: 10px; clear: both; /*titels beginnen op een nieuwe lijn*/ } H2{ color: #66cc33; font-size: 11pt; text-decoration: underline; margin-left: 5px; clear: both; /*titels beginnen op een nieuwe lijn*/ } H3{ color: #66cc33; font-size: 10pt; font-style: italic; margin-left: 15px; clear: both; /*titels beginnen op een nieuwe lijn*/ } H4{ color: #66cc33; font-size: 10pt; font-style: italic; font-weight: normal; margin-left: 20px; clear: both; /*titels beginnen op een nieuwe lijn*/ } A{ color: #ffff33; text-decoration: underline; } A:hover{ color: #66cc33; } /* AFBEELDINGEN * **************************************** */ IMG{ border-width: 0px; /*nodig om links rond afbeeldingen goed weer te geven.*/ border-style: none; } /* * - liggende foto * - in lijn met de tekst * - links uitgelijnd */ IMG.leftliggend{ position: relative; float: left; width: 200px; height: auto; margin: 0; margin-right: 17px; margin-bottom: 5px; } /* * - liggende foto * - in lijn met de tekst * - rechts uitgelijnd */ IMG.rightliggend{ position: relative; float: right; width: 200px; height: auto; margin: 0; margin-left: 5px; margin-bottom: 5px; } /* * - staande foto * - in lijn met de tekst * - links uitgelijnd */ IMG.leftstaand{ position: relative; float: left; height: 200px; width: auto; margin: 0; margin-right: 17px; margin-bottom: 5px; } /* * - staande foto * - in lijn met de tekst * - rechts uitgelijnd */ IMG.rightstaand{ position: relative; float: right; height: 200px; width: auto; margin: 0; margin-left: 5px; margin-bottom: 5px; } /* ALBUM * **************************************** */ /* een rijafbeeldingen, niet in de lijn van de tekst. splitst de tekst op in twee delen.*/ DIV.rijafbeeldingen{ position: relative; width: 100%; clear: both; float: none; } /* een kolom afbeeldingen, rechts gepositioneerd met de tekst links. De afbeeldingen zijn liggend*/ DIV.kolomafbeeldingen_liggend{ position: relative; margin-right: 5px; width: 200px; /*zelfde als een liggende afbeelding*/ clear: both; float: right; } /*een thumbnail afbeelding en titel eronder*/ DIV.thumbnail{ position: relative; float: left; padding: 0; margin: 5px; width: 110px; height: 150px; font-size: 8pt; } IMG.thumbnail{ position: relative; z-index: 5; width: 90px; height: 90px; } /* MENU LINKS * **************************************** */ A.menu{ color: #66cc33; text-decoration: none; /*font-size: 11pt;*/ } A.submenu{ color: #339900; text-decoration: none; } A.menu:hover{ color: #ffff33; } A.submenu:hover{ color: #ffff33; } A.menu:active{ color: #ffff33; } /* FORMULIEREN * **************************************** */ input.form-invoerveld{ position:relative; margin: 5px 0px; /* top and bottom margins are 5px * right and left margins are 0px*/ background-color: #003300; border-color: #66cc33; color: #ffff33; width: 400px; } input.form-submit{ position:relative; margin: 5px 0px; background-color: #003300; border-color: #66cc33; color: #ffff33; }