Site opbouwen met css

Door Milo op 10-07-2009 15:27

337 views

Hey,
ik ben nieuw met css en divs en nu wil ik mijn site op de volgende manier opbouwen...
http://after-party.nl/eff.png

maar nu wil ik vervolgens die pagina-titel, de content en de rechter div uitlijnen maar dat wil hij neit goed doen
http://after-party.nl/

mijn huidige css:


/*
Design by Party-Vision disigns
http://www.party-vision.nl
ALL COPYRIGHTS SERVET
*/


/* Algemene items */
.errors {
	font-family: Verdana;
	font-size: 18px;
	color: #FF0000;
	text-decoration: none;
}
a.link {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
a.visited {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}
a.hover {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
	text-decoration: underline;
}
a.active {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}


/* Lay-out pagina */
body {
	text-align: center;
	margin-top: 0px; 
	margin-bottom: 0px;
	background: url(images/img01.jpg) repeat-x;
}
.container {
	width: 780px;
	height: 180px;
}
.header {
	width: 760px;
	height: 180px;
	position: relative;
	left: 10px;
	background: url(images/img02.jpg);
}


/* Tekst gebieden */
.menu {
	width: 760px;
	height: 22px;
	position: relative;
	background: url('images/img03.gif');
}
a.menu:link {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}
a.menu:visited {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}
a.menu:hover {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
}
a.menu:active {
	font-family: Verdana;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
}

.pagina-titel{
	width: 488px;
	height: 20px;
	position: absolute;
	top: 222px;
	left: 10px;
		/* Tekst opmaak */
		font-family: Verdana;
		font-size: 18px;
		color: #000000;
		text-decoration: none;
}
.text-box {
	width: 488px;
	position: absolute;
	top: 242px;
	left: 10px;
	float: left
	border-top: 1px dotted black;
		/* Tekst opmaak */
		font-family: Verdana;
		font-size: 12px;
		color: #000000;
		text-decoration: none;
}

wat doe ik fout kan iemand mij dat uitleggen?

Mitchell

10-07-2009 15:35

Je gaat in de fout met je positions, gebruik geen positions, maar floats.

[off] Het is "all rights reserved". [/off]

Milo

10-07-2009 15:40

dus overal position weghalen en dan float: left etc.. doen maar dan kan ik toch niet positioneren?

is eigenlijk voor dit typ lay-out een tabel niet beter / makkelijker

Mitchell

10-07-2009 15:48

Haha, nee. Een tabel mag en moet je nooit gebruiken voor de layout van een site. Gebruik gewoon divs en float en deze hoef je ook niet te positioneren, als je ze gewoon goed float en cleared, komt er vanzelf een layout zoals je hem wilt.

Milo

10-07-2009 15:55

cleared???

dus voor de header gewoon:
.header {
width: 760px;
height: 180px;
float: top;
}
en de links hetzelfde..

en dan de linker tekst balk
text-blok {
width: 500px;
float: left;
}

of niet?

Mitchell

10-07-2009 16:21

Float, zoals de naam zweven in je layout en kunnen over de rest van je content gaan zweven als je niet uitkijkt, clearen zorgt ervoor dat je bijvoorbeeld een footer onderaan je pagina kunt maken zonder dat het menu of de content er overheen komt te staan, zoek maar eens op google.

Reageren

Inloggen om te reageren