Site index
Portals
Artikelen
Software
Links
ContactStarterssite met CSS
4 berichten
• Pagina 1 van 1
Starterssite met CSS
door Topdancer » 01 Dec 2008 20:03
Inleiding
Voor veel mensen is het al makkelijk om een start te maken aan een website. Toch zijn er beginnende webdesigners die er moeite mee hebben en zich afvragen waar ze moeten beginnen. Dit artikel zal je een een handje op weg helpen om dit probleem op te lossen.
Hoe start je
Je begint met een body style, hier zetten we de achtergrond kleur, de standaard font en de nodige margins en paddings in.
HTML
Indeling van CSS
Nu gaan we een indeling maken van je website met CSS. Ik leg je stap voor stap uit wat we doen en aan het einde geef ik je een voorbeeld code.
Als eerste gaan we een container maken. De container positioneert je website en daarin zetten we de vorm van je website.
Je container ziet er zo uit:
CSS
Je ziet dat we hier de breedte opgeven van de container. De breedte kun je zelf aanpassen, probeer dit wel zo breed te houden dat je content er in past.
Als je content breder is dan je header of footer dan hou je die breedte aan.
We beginnen met de header. Dit doen we door middel van een div. Hierin staat meestal een logo en wat directe tekst.
CSS
De achtergrond is een kleur. Dit kan natuurlijk ook een plaatje zijn. We geven de header hoogte doorheight in te stellen.
Nu gaan we een menu maken, een simpel menu zonder gevorderde opmaak.
Hieronder even alle nodige css voor het menu.
CSS
We willen dat de tekst van elke menu knop in het midden van de knop komt te staan, vandaar detext-align: center; .
En we geven het menu een bepaalde hoogte.
De menu knoppen geven we bepaalde afmetingen en we zorgen dat de tekst link zwart is.
float: left; zorgt er voor dat het menu vanaf links naar rechts komt te staan. Je kunt ook opgeven dat je menu rechts begint door float: right; in te voeren.
Nu gaan we de content maken. De centent is je text vak. Hierin worden je nodige HOOFD teksten opgegeven.
We geven hier 1 div op. De is de hoofd div, deze is belangrijk voor je content.
CSS
De tekst dat hier binnen staat zal dan de stijl krijgen die je in de css hebt aangegeven. Ook staat alle content 20px van elke kant af.
Nu gaan we een footer maken.
In je footer zet je eventueel de copyright teksten en linken die nodig zijn om je pagina af te maken.
CSS
We zetten de tekst in het midden mettext-align: center; , en stijlen de hoogte van de tekst en de achtergrondkleur.
De HTML
De totale code die gebruikt is in dit artikel. De HTML en de CSS.
HTML
Je ziet dat ik als eerste met een container begin. We sluiten dit niet af met een </div> omdat we alles daar binnen willen zetten.
De container sluiten we als alle laatste af, zodra je een div begint sluit je deze normaal gelijk af zoals je bij<div id="header"> ziet.
Ook de footer maken we hier op alle laatste want deze komt uiteraard onderaan te staan met de tekst er in en daarna sluiten we het af.
Voorbeeld
Een voorbeeld kun hier vinden.
Voor veel mensen is het al makkelijk om een start te maken aan een website. Toch zijn er beginnende webdesigners die er moeite mee hebben en zich afvragen waar ze moeten beginnen. Dit artikel zal je een een handje op weg helpen om dit probleem op te lossen.
Hoe start je
Je begint met een body style, hier zetten we de achtergrond kleur, de standaard font en de nodige margins en paddings in.
HTML
- Code: Alles selecteren
body, html {
background-color: #E6E6E6;
font: 12px Geneva, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
Indeling van CSS
Nu gaan we een indeling maken van je website met CSS. Ik leg je stap voor stap uit wat we doen en aan het einde geef ik je een voorbeeld code.
Als eerste gaan we een container maken. De container positioneert je website en daarin zetten we de vorm van je website.
Je container ziet er zo uit:
CSS
- Code: Alles selecteren
#container {
margin: 0 auto;
width: 800px;
}
Je ziet dat we hier de breedte opgeven van de container. De breedte kun je zelf aanpassen, probeer dit wel zo breed te houden dat je content er in past.
Als je content breder is dan je header of footer dan hou je die breedte aan.
We beginnen met de header. Dit doen we door middel van een div. Hierin staat meestal een logo en wat directe tekst.
CSS
- Code: Alles selecteren
#header {
background-color: #CCCCCC;
height: 100px;
text-align: center;
}
De achtergrond is een kleur. Dit kan natuurlijk ook een plaatje zijn. We geven de header hoogte door
Nu gaan we een menu maken, een simpel menu zonder gevorderde opmaak.
Hieronder even alle nodige css voor het menu.
CSS
- Code: Alles selecteren
#menu {
text-align: center;
height: 20px;
}
#menu a {
float: left;
background-color: #FF0000;
width: 100px;
height: 20px;
color: #000;
text-decoration: none;
}
We willen dat de tekst van elke menu knop in het midden van de knop komt te staan, vandaar de
En we geven het menu een bepaalde hoogte.
De menu knoppen geven we bepaalde afmetingen en we zorgen dat de tekst link zwart is.
Nu gaan we de content maken. De centent is je text vak. Hierin worden je nodige HOOFD teksten opgegeven.
We geven hier 1 div op. De is de hoofd div, deze is belangrijk voor je content.
CSS
- Code: Alles selecteren
#content {
background-color: #00CCCC;
padding: 20px;
}
De tekst dat hier binnen staat zal dan de stijl krijgen die je in de css hebt aangegeven. Ook staat alle content 20px van elke kant af.
Nu gaan we een footer maken.
In je footer zet je eventueel de copyright teksten en linken die nodig zijn om je pagina af te maken.
CSS
- Code: Alles selecteren
#footer {
text-align: center;
line-height: 24px;
background-color: #FF0000;
}
We zetten de tekst in het midden met
De HTML
De totale code die gebruikt is in dit artikel. De HTML en de CSS.
HTML
- Code: Alles selecteren
<!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>Starterssite met CSS</title>
<style type="text/css">
body, html {
background-color: #E6E6E6;
font: 12px Geneva, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 800px;
}
#header {
background-color: #CCCCCC;
height: 100px;
text-align: center;
}
#menu {
text-align: center;
height: 20px;
}
#menu a {
float: left;
background-color: #FF0000;
width: 100px;
height: 20px;
color: #000;
text-decoration: none;
}
#content {
background-color: #00CCCC;
padding: 20px;
}
#footer {
text-align: center;
line-height: 24px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu">
<a href="index.html">Listitem 1</a>
<a href="index.html">Listitem 1</a>
<a href="index.html">Listitem 1</a>
</div>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="footer">© Copyright (hier je website naam)</div>
</div>
</body>
</html>
Je ziet dat ik als eerste met een container begin. We sluiten dit niet af met een </div> omdat we alles daar binnen willen zetten.
De container sluiten we als alle laatste af, zodra je een div begint sluit je deze normaal gelijk af zoals je bij
Ook de footer maken we hier op alle laatste want deze komt uiteraard onderaan te staan met de tekst er in en daarna sluiten we het af.
Voorbeeld
Een voorbeeld kun hier vinden.
Opzoek naar een programmeur die mij qua sponsoring wilt helpen 
Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!
Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!- Topdancer
- Teamlid
- Berichten: 333
- Geregistreerd: 26 Aug 2008 01:11
- Woonplaats: Arnhem
Re: Starterssite met CSS
door Fluring Lifes » 04 Dec 2008 02:23
Artikel aangepast + voorbeeld online gezet.
-
Fluring Lifes - Beheerder
- Berichten: 1155
- Geregistreerd: 28 Sep 2005 19:54
- Woonplaats: Alkmaar - Nederland
Re: Starterssite met CSS
door Baby Ghost » 04 Dec 2008 11:14
Ik heb wat opmerkingen, meeste zijn hele kleine en hebben meer te maken met optimalisatie dan de inhoud van de artikel, de arikel zelf is top 
CSS:
- In de (body, html) staat 2x(font: 12px Geneva, Arial, Helvetica, sans-serif;)
- In de #container
margin-left: auto;
margin-right: auto;
kan makkelijkermargin: 0 auto;
- In de header (#CCCCCC) kan als (#CCC)
- In menu a (#FF0000) kan als (#F00)
- In content (#00CCCC) als (#0CC)
- In footer (#FF0000) als (#F00)
HTML:
- In de footer © naar©
- Een menu maak je met de ul en li elementen, want het is een lijst met menu items(heeft te maken met semantiek werken)
Wel ben ik blij te zien dat er goed gebruik wordt gemaakt van de<p></p> want vaak wordt dit niet gedaan 
CSS:
- In de (body, html) staat 2x(font: 12px Geneva, Arial, Helvetica, sans-serif;)
- In de #container
margin-right: auto;
kan makkelijker
- In de header (#CCCCCC) kan als (#CCC)
- In menu a (#FF0000) kan als (#F00)
- In content (#00CCCC) als (#0CC)
- In footer (#FF0000) als (#F00)
HTML:
- In de footer © naar
- Een menu maak je met de ul en li elementen, want het is een lijst met menu items(heeft te maken met semantiek werken)
Wel ben ik blij te zien dat er goed gebruik wordt gemaakt van de
Bryan.
"Make everything as simple as possible, but not simpler" - Albert Einstein
"Make everything as simple as possible, but not simpler" - Albert Einstein
- Baby Ghost
- Teamlid
- Berichten: 509
- Geregistreerd: 28 Mei 2006 02:09
- Woonplaats: den haag
Re: Starterssite met CSS
door Fluring Lifes » 04 Dec 2008 11:35
Aangepast. Alleen de kleuren heb ik volledig laten staan. Dit is namelijk iets voor meer gevorderde mensen.
-
Fluring Lifes - Beheerder
- Berichten: 1155
- Geregistreerd: 28 Sep 2005 19:54
- Woonplaats: Alkmaar - Nederland
4 berichten
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast