X

Sinterklaasgedichten maak je simpel, snel en origineel!

  • Ontvang 5 originele gedichten
  • Volledig gepersonaliseerd
  • In 2 minuten klaar!
Ga naar sinterklaasgedichten.net
Infoyo
Vragen en antwoorden
Zoek artikelen:

Enquete iPhone 4

Ontvang het laatste nieuws over "Computers en internet" en maak kans op 1000 euro cash.
Laat nu je e-mailadres achter. Speel gratis mee.


Een drie kolommen-layout maken.

Venster sluiten

Maak een melding van dit artikel
Selecteer de motivatie van je melding:
Spam / reclame Misleidende of onduidelijke inhoud
Lage inhoudelijke kwaliteit Niet Nederlands
Erotische inhoud Artikel bestaat reeds op internet
Gokken / Illegale promotie Andere reden...

Omschrijf de motivatie van je melding:
Venster sluiten

Stuur dit artikel door
Je naam:
Je e-mailadres:
E-mailadres ontvanger:
Artikelscore
+2
  Goed artikel ( +2 )
  Slecht artikel ( 0 )
RSS van tunyque tunyque Auteur op infoyo sinds
16 September 2009


Bekijk het profiel van tunyque
Datum: 17-09-2009
Auteur: Tunyque
Altijd al een layout willen maken? Dan is dit je kans. We gaan een layout met drie kolommen maken een header en een footer (hier staat meestal de copyright).Eerst gaan we de achtergrond en hetgene maken wat alles netjes op zijn plaats houd. Daarna de header met zijn kolommen en als laatste de footer en de html.

Het begin

We beginnen met de achtergrond dit gaan we body noemen en we gaan iets maken zodat de tekst en het menu in het midden blijven. Dit gaan we de container noemen.


#body {
text-align: center;
font-family: Arial;
font-size: 11px;
background-color: #000000;
}

#container {
background-color: #777777;
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
border: 2px solid black;
}


Uitleg;
text-align geeft aan waar de tekst later komt te staan.
width is de breedte, we maken deze 800 px zodat hij op elk beeldscherm past.
background color is de kleur deze kun je zelf nog veranderen. als je een plaatje wilt in de plaats van een kleur verander je
background-color: #777777;       door:         background-image:url('naamplaatje.png');

Header plus Inhoud.

Nu gaan we de header maken.

#header {
width: 800px;
height: 100px;
text-align: center;
background-color: #FF3300;
}

^^dit is de header ^^

#linksVakje {
float: left;
background-color: #FF9900;
width: 200px;
text-align: left;
border: 1px solid black;
}

#Content {
float: left;
background-color: #0033FF;
width: 200px;
text-align: left;
border: 1px solid black;
}

#rechtsVakje {
float: left;
background-color: #FF0000;
width: 200px;
text-align: left;
border: 1px solid black;
}


Uitleg:

Float betekent de plaats waar hij komt te staan. We zetten ze allemaal op "left" zodat ze allemaal naast elkaar komen.

Border is een randje om het vak. Dit is niet noodzakelijk maar ziet er wel beter uit. Dan kan je een stippelijn lijntjes lijn of een vaste lijn doen. Ik heb gekozen voor een vaste lijn "solid".

De footer plus Html.

De footer is de onderkant van een layout.

#footer {
width: 800px;
height: 35px;
background-color: #FFFFFF;
text-align: center;
}

En dan nu de Html:

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<meta content="text/html;
charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="HIER DE NAAM VAN JE CSS BESTAND" />
<div id="container">
<div id="header"></div><font size="5">Dit is je header</font>
<div id="linksVakje"></div><font size="4">Links menu></font>
<div id="Content"></div><font size="4">Je content</font>
<div id="rechtsVakje"></div><font size="4">Je rechts menu</font>
<div id="footer"></div><font size="2">Layout gemaakt door hulp van Tu
</div>

Reacties op dit artikel
Fkon, 2009-11-24
( 0 )

Hoi
Niek 64, 2012-07-16
( 0 )

Waarom werkt dat niet dit niet, en krijg ik 1 groot vlak met rand met ddarin eerst 1rood vlak daaronder de header met de text: dit is je HEADER Link menu> Je content Je rechts menu, en daaronder 1 oranje, 1 blauw en 1 rood vlak, en daaronder 1 wit vlak, en daaronder iest dat op een footer lijkt met daarin: Layout gemaakt door hulp van Tu

ik het dat geprobeerd met de Wamp server. met IE 8
Plaats een reactie
Naam:
E-mailadres:

Reactie:




      Home   -   Aanmelden   -   Top artikelen   -   Nieuwe artikelen   -   Sitemap   -   Help   -   Links   -   Privacy policy   -   Contact
Copyright © 2017 - Infoyo.nl