vraagje van een beginner in css

Status
Niet open voor verdere reacties.

miiranda

Gebruiker
Lid geworden
20 jan 2011
Berichten
15
En daar ben ik weer, met een vraagje over css, ben een beginner, misschien voor jullie simpel, maar ik moet het allemaal ontdekken en ken niemand anders in mijn omgeving die met css bezig is, dus hoop hier af en toe wat hulp te krijgen, als jullie een ander forum weten die daar meer geschikt voor is, dan hoor ik dat graag...

ik ben een startpagina aan het maken, willen jullie de code eens bekijken of ik op de goede weg ben? Of de css en html kloppen, of dat ik het misschien anders moet neerzetten? Dan kan ik van daaruit weer verder proberen?
Alvast bedankt

groeten Miranda



html
HTML:
<!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>startpagina</title>
<link href="start/start.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
  <div id="kop">Hier wordt de inhoud voor  id "kop" weergegeven</div>
  <div id="kolom">Hier wordt de inhoud voor  id "kolom1" weergegeven</div>
  <div id="kolom">Hier wordt de inhoud voor  id "kolom2" weergegeven</div>
  <div id="kolom"><a href="http://www.hyves.nl/?&amp;pageid=96BH2FHIIJ8C0CW0" target="_new">hyves home</a></div>
  <div id="kolom">Hier wordt de inhoud voor  id "kolom4" weergegeven</div>
</div>
</body>
</html>
Code:
css
@charset "utf-8";
body {
	background: #C33;
	margin: 0px;
}
#main {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #666;
	background: #9CC;
	margin: 0px auto;
	height: 800px;
	width: 1000px;
}
#kop {
	height: 200px;
	width: 1000px;
}
#kolom {
	margin: 5px;
	height: 568px;
	width: 218px;
	border: 1px solid #C33;
	float: left;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #333;
	padding: 10px;
}

a {
	font-size: 16px;
	color: #666;
}
a:link {
	text-decoration: none;
	color: #333;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: underline;
	color: #C33;
}
a:active {
	text-decoration: none;
	color: #C03;
}
 
Laatst bewerkt:
Valideer het met de W3 validator.

Deze geeft aan dat het id 'kolom' meerdere keren wordt gebruikt. Een id mag je maar één keer gebruiken in je HTML code, waarschijnlijk kun je er net zo goed een class van maken.

Voor je CSS kun je deze validator gebruiken.
 
ik heb een paar veranderingen gemaakt en hij is nu bij beiden "gevalideerd" en er zitten geen fouten in, is de opbouw ook goed, of zouden jullie het anders doen??
<!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>startpagina</title>
<link href="start/start.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div id="kop">Hier wordt de inhoud voor id "kop" weergegeven</div>
<div class="kolom">Hier wordt de inhoud voor id "kolom1" weergegeven</div>
<div class="kolom">Hier wordt de inhoud voor id "kolom2" weergegeven</div>
<div class="kolom"><a href="http://www.hyves.nl/?&amp;pageid=96BH2FHIIJ8C0CW0" target="_new">hyves home</a></div>
<div class="kolom">Hier wordt de inhoud voor id "kolom4" weergegeven</div>
</div>
</body>
</html>

@charset "utf-8";
body {
background: #C33;
margin: 0px;
}
#main {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #666;
background: #9CC;
margin: 0px auto;
height: 800px;
width: 1000px;
}
#kop {
height: 200px;
width: 1000px;
}
.kolom {
margin: 5px;
height: 568px;
width: 218px;
border: 1px solid #C33;
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #333;
padding: 10px;
}

a {
font-size: 16px;
color: #666;
}
a:link {
text-decoration: none;
color: #333;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
color: #C33;
}
a:active {
text-decoration: none;
color: #C03;
}
 
Hi,
waarom zet je het niet online en bekijk je of het resultaat je bevalt? Het ziet er goed genoeg uit om mee verder te werken, testen en bouwen.
 
ik heb hem online staan, om te testen,
maar vind het wel ingewikkeld, wil gewoon de basis goed hebben, want anders begin je gelijk al verkeerd,
nou ik ga er weer verder mee, bedankt voor je antwoord

groeten Miranda
(die nog wel een keer iets komt vragen:D)
 
Kleine, wellicht overbodige, opmerking.
<div id="kop">Hier wordt de inhoud voor id "kop" weergegeven</div>
(sub)Koppen van artikelen en onderdelen van een site horen tussen <h#> </h#>tags te staan (waarbij # een nummer is dat het niveau van de kop aangeeft, dus <h1> voor een kop, <h2> voor een subkop, enzovoorts). Die kop mag je vervolgens uiteraard wel ook in een div zetten
 
ik had die div misschien een andere naam moeten geven, want die ruimte heb ik gereserveerd voor een afbeelding of zoiets, maar dat werkt dus wel verwarrend, zal die div nog een andere naam geven,

bedankt voor het meedenken!:thumb:

groeten Miranda
 
Iedereen heeft een andere voorkeur voor de opbouw maar gezien je een beginner bent zal ik hier rekening mee houden.

Het zijn kleine puntjes maar misschien daardoor wel uiteindelijk duidelijker om je code nogmaals te lezen.

HTML:
<!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>startpagina</title>
		<link href="start/start.css" rel="stylesheet" type="text/css" />
	</head>
	
	<body>
		<div id="main">
			<div id="kop">
				Hier wordt de inhoud voor id "kop" weergegeven
			</div>
			<div class="kolom">
				Hier wordt de inhoud voor id "kolom1" weergegeven
			</div>
			<div class="kolom">
				Hier wordt de inhoud voor id "kolom2" weergegeven
			</div>
			<div class="kolom">
				<a href="http://www.hyves.nl/?&amp;pageid=96BH2FHIIJ8C0CW0" target="_new">hyves home</a>
			</div>
			<div class="kolom">
				Hier wordt de inhoud voor id "kolom4" weergegeven
			</div>
		</div>
	</body>
</html>

Op deze manier is duidelijker te zien welke code waar in zit.
Als je je css ook opbouwt met deze manier van inspringen zul je alles veel sneller kunnen vinden als je straks gaat werken met bestanden van meer dan 10.000 regels code.

De CSS zou ik persoonlijk helemaal achter elkaar uitschrijven, maar als beginneling is dit erg onleesbaar ben ik bang. ik doe dit echter ook alleen omdat t me ooit is aangeleerd en mijn css bestanden sowieso al honderden regels lang zijn.

Succes verder!
 
dankjewel voor de tip, ga er zeker wat mee doen, want het is veel duidelijker zo,

groeten Miranda
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan