@charset "utf-8";
/* CSS Document */
/* tips vergeet nooit een enter achter de stijl -> ;
zet altijd px achter de width en height
de rose namen zijn atributen die je in de html hebt gemaakt die geef je hier aan om ze vervolgens te stijlen.
je kunt een atribuut zoals de body direct aanroepen maar je kunt atributen in html ook een unieke id geven of in een classen zetten
div{}<----- roept direct alle atributen met deze naam dus in dit geval alle divs
#identifier{}<----- spreekt het element specifiek aan in de html ziet dat er zo uit dit is echt bedoelt om bepaalde elementen specifiek te stijlen
als er meerdere elementen hetzelfde zijn (zoals paragraven met text) gebruiken we classes
.class{}<----- geeft alle elemente van deze klasse deze stijl
de structuur is als volgt
naam{
instelling: waarde;
instelling: waarde;
instelling: waarde;
}
firefox leest CSS-stylesheet anders in dan Internet explorer, dus heb je soms een extra css stylesheet nodig om margins,padding transparantie, en andere dingen in te stellen deze noem je meestal iefix.css.
*/
/*Dit is de css stylesheet, hier kun je de site mee stijlen, zodra je deze toevoegd wordt elke pagina in deze stijl gemaakt
De "dozen" oftewel divs die je aangemaakt hebt definieer je hier en kan je een stijl meegeven en bepalen hoelang of breed het moet worden, welk plaatje hij moet hebben
*/
body{
/*om altijd van het midden te rekenen moet je de margins en de paddings van de body op 0 zetten, omdat hij altijd 10px links en boven van de kant staat*/
margin:0;/* hiermee kun je de divs positioneren aan de buitenkant met margin's, je moet dit zo bekijken margin: 1px 2px 3px 4px; margin: 1px boven 2px rechts 3px onder 4px links, bij elke
kant kan je de margins instellen als je alleen 1 kant pakt, neemt hij de andere kant ook mee. bijv margin: 4px; geeft rondom de hele div een ruimte van 4px
*/
padding:0;
background-color:#576f29/* zelfde als margin: alleen positioneert deze alles wat aan de binnenkant van de div bevindt */
}
/*containers(inhoud) die je aangemaakt hebt om de hele inhoud van de site in te plaatsen kun je hier stijlen*/
#inhoud_site{
width:950px; /*breedte van de "doos"*/
height:600px; /*hoogte van de "doos"*/
/*als je ergens pixels bij of af doet kijk dan goed welke div zich anders gaat gedragen, dan moet je die div opzoeken en daar ook weer wat pixels bij of af doen*/
position:absolute; /*met position geef je aan hoe het plaatje met de css om moet gaan, in dit geval moet hij precies staan waar ik hem wil en niet flexibel is*/
top: 50%; /* met top en left op 50% align je de container(inhoud_site) naar het midden van de pagina LET OP! een div wordt nooit vanuit het midden aangestuurd! altijd van linksboven
daarom bespelen we dit gedrag met de margins die ook een negatiever waarde kunnen krijgen zoals je hier onder ziet
*/
left: 828px;
margin:-300px 0px 0px -475px; /* dit is een kleine bespeling van het html gedrag van "top" en "left"
de -300 is berekend op het delen van de height door 2 600/2 = 300 dus moet de div 300 px omhoog gepaats worden oftewel -300px(daarom ook altijd ik even waarden werken en niet in oneven waarden)
dit zelfde geld vanzelfsprekend ook voor de width
*/
}
#header{
background:url(images/header.jpg); /*background:url of background-image = geef hier aan wat voor plaatje je in div wil */
width:950px;
height:175px;
float:left; /*float kun je de divs naar links zetten of naar rechts, als je de divjes naast elkaar wil kan je ze een float meegeven zodat ze niet onderelkaar verschuiven. Zorg er bij float rechts wel voor dat hij door een div wordt tegengehouden anders zet hij hem helemaal rechts van de pagina*/
}
#menu{
background-color:#005300; /*background-color geef hier aan wat voor kleur je in je div wil kun je ook de engelse benaming voor geven zoals orange of pink */
width:150px;
height:410px;
float:left;
}
/* hier de lijst met linkjes, informatie over lists kun je hier vinden http://css.maxdesign.com.au/index.htm hier kun je knoppen en rollovers mee maken en het is eenvoudig te stijlen
deze lijst heet een unordered list*/
#menulijst /* menulijst stijlen */
{
width: 132px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: -5px 0 0 4px;
padding: 0;
}
#menulijst li/* hiermee geef je aan de dat je de li wilt bewerken van menulijst dit is een soort pad ernaartoe, bijvoorbeeld ik wil de a(dat is de link) bewerken dan zeg je #menulijst a{}
kijk maar naar de html divs
*/
{
display: inline;/*deze zet ze onderelkaar neer is een soort fix voor IE5 and IE6 omdat de internet explorer soms de site niet goed krijgt, want firefox leest CSS-stylesheet anders in dan Internet explorer
soms dan moet je er een iefix stylesheet bij aanmaken vooral bij transperentie plaatjes*/
font-weight:bold;/*font-weight: kan je de text dikte instellen*/
}
#menulijst a
{
border: 2px solid #000000; /*border instellen van 1px, solid vaste lijn met de kleur zwart*/
width: 132px;
display: block; /*met display block maakt hij er een block element van zodat hij makkelijk te stijlen is*/
background-color: #078400; /*achtergrond kleur is wit*/
text-align: left;/*de tekst naar links zetten*/
text-decoration: none;/*hiermee geef je aan dat je geen decoraties of stijl wil voor de tekst*/
color: #fff;
margin: 4px 0 0 0 ;
padding:4px;
}
#menulijst a:hover { background-color:#538b53; } /*menulijst a bewerken, met hover dat is als je erover heen gaat, wordt de achtergrond kleur oranje*/
/*einde van de lijst*/
#inhoud_tekst{
padding:8px;
background-color:#929D12;
text-align:justify;
width:784px;
height:394px;
overflow:auto; /*als je veel tekst hebt in een div, en hij rekt zicht uit dan gaat de hele site mee, daarvoor kan je er een overflow neerzetten, zodat de tekst gescrolled is*/
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;/*de font instellen, meest voorkomende font is Verdana, is ook het meest aanbevolen voor web tekst*/
font-size: 12px
}
#inhoud_tekst p img{ /* hiermee geef je aan de dat je de img wilt bewerken van inhoud_text dit is een soort pad ernaartoe, je hebt het plaatje in inhoud text staan en in de p dus inhoud_text -> p -> img
kijk maar naar de html