Lay-out
http://users.telenet.be/ronaldinho/naamloos.JPG
Ik ben bezig met een 3de
Maar als ik nu dit wil als site-design gebruiken hoe doe ik dat dan PHP??
mvg wouter
ik bedoel je kan toch mooie design hebben hoe maak je die dan ?? hoe maak je daaar je site op
en dan via css in elkaar zetten..
begrijp je dat?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absoluut positioneren van html elementen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body, html{
margin: 0;
font-size: 90%;
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
color: #999;
}
#header{
position: absolute;
top: 5px;
left: 5px;
width: 750px;
height: 100px;
border: 1px solid #F60;
text-align: center;
}
#nav_container{
position: absolute;
top: 110px;
left: 5px;
width: 150px;
height: 300px;
border: 1px solid #F60;
text-align: center;
}
#content{
position: absolute;
top: 110px;
left: 160px;
width: 450px;
height: 300px;
border: 1px solid #F60;
text-align: center;
overflow: auto;
}
#news{
position: absolute;
top: 110px;
left: 615px;
width: 140px;
height: 300px;
border: 1px solid #F60;
text-align: center;
}
#footer{
position: absolute;
top: 415px;
left: 5px;
width: 750px;
height: 60px;
border: 1px solid #F60;
text-align: center;
}
#back{
position: absolute;
top: 500px;
left: 5px;
width: 750px;
height: 30px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="nav_container">nav_container</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="news">news</div>
<div id="footer">footer</div>
<div id="back"><p><a href="javascript:history.back(-1);"><img src="../_img/terug_naar_pagina.gif" alt="terug naar de vorige pagina" border="0" width="208" height="38" /></a></p>
</div>
</body>
</html>
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absoluut positioneren van html elementen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body, html{
margin: 0;
font-size: 90%;
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
color: #999;
}
#header{
position: absolute;
top: 5px;
left: 5px;
width: 750px;
height: 100px;
border: 1px solid #F60;
text-align: center;
}
#nav_container{
position: absolute;
top: 110px;
left: 5px;
width: 150px;
height: 300px;
border: 1px solid #F60;
text-align: center;
}
#content{
position: absolute;
top: 110px;
left: 160px;
width: 450px;
height: 300px;
border: 1px solid #F60;
text-align: center;
overflow: auto;
}
#news{
position: absolute;
top: 110px;
left: 615px;
width: 140px;
height: 300px;
border: 1px solid #F60;
text-align: center;
}
#footer{
position: absolute;
top: 415px;
left: 5px;
width: 750px;
height: 60px;
border: 1px solid #F60;
text-align: center;
}
#back{
position: absolute;
top: 500px;
left: 5px;
width: 750px;
height: 30px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="nav_container">nav_container</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="news">news</div>
<div id="footer">footer</div>
<div id="back"><p><a href="javascript:history.back(-1);"><img src="../_img/terug_naar_pagina.gif" alt="terug naar de vorige pagina" border="0" width="208" height="38" /></a></p>
</div>
</body>
</html>
Lijkt op de jouwe.. Je veranderd de grote van de div's.
Jou plaatjes verdeeld je in stukjes. Die stukjes zet je als achtergrond in de div's en klaar is wouter.
Begrijp je dit?
Gewijzigd op 01/01/1970 01:00:00 door Vincent
ÿØÿà enzo?
Edit:
Sorry, edit vergeten:S
Sorry, edit vergeten:S
Gewijzigd op 01/01/1970 01:00:00 door Vincent
Vincent schreef op 14.01.2007 20:30:
En trouwens hoe maak je je pagina zo gecodeerd?
ÿØÿà enzo?
ÿØÿà enzo?
Edit:
Sorry, edit vergeten:S
Sorry, edit vergeten:S
Misschien is het de afbeelding wel.. Als je snapt wat ik bedoel..
Stefan schreef op 14.01.2007 21:49:
Ik zou zeggen, download eerst eens de trial van Photoshop en ga daar een beetje mee klooien. Dan kun je de slice-tool gebruiken om je website te laten coderen, en als je er DAN aan toe bent, kun je zelf HTML en PHP en CSS leren! ;)
Vind je het heel erg als mijn sites nooit uit photoshop voortkomen?
Meestal alleen de headerimage, en soms de achtergrond (blokje van 10x10 oid met diagonale lijn), en soms ook een fader achtergrond voor een balkje (is plaatje van 20x1px oid..
Naar mijn mening kan een website die gesliced is nooit snel en erg gebruiksvriendelijk worden (vooral voor de programmeur zelf niet, elke keer zoeken naar wat waar moet komen. Photoshop gebruikt div's net als tabellen, wat heb je er dan aan :S)
@Wouter:
Ik vind je layout echt niet mooi. Zo te zien is het in paint gemaakt, wat het al niet mooi maakt, maar ook al ging het je alleen om de indeling, vormen en kleuren, dan vind ik hem alsnog niet mooi. Te druk omdat je teveel vakken op 1 stukje propt, maar tegelijkertijd te kaal omdat je maar 1 vorm en 2 kleuren gebruikt.
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
En dan weet je zelf ook nog eens precies hoe je layout in elkaar zit en wat waar moet komen. Dat scheelt je een heleboel zoek en prutswerk en het laad veel sneller dan een geslicede layout!
dus ik bedoel dat er wat teveel lijnen staan.
Veel succes nog
Robert schreef op 15.01.2007 09:24:
Ik ben het eens met WJ. Je kan wel een bepaalde layout bedenken in Photoshop, maar het uitwerken ervan is beste door een indeling te maken in DIVS en dan zelf eventuele en alleen de nodige afbeeldingen voor achtergronden in te stellen.
En dan weet je zelf ook nog eens precies hoe je layout in elkaar zit en wat waar moet komen. Dat scheelt je een heleboel zoek en prutswerk en het laad veel sneller dan een geslicede layout!
En dan weet je zelf ook nog eens precies hoe je layout in elkaar zit en wat waar moet komen. Dat scheelt je een heleboel zoek en prutswerk en het laad veel sneller dan een geslicede layout!
Ik maak altijd het ontwerp in photoshop en manueel maak ik de divs & css. Daarna bekijk ik welke plaatjes er nodig zijn (header etc.) en deze gebruik ik, voor de rest gewoon puure css en geen tabel te bekenen.
@vincent : ok ,, maar je maakt er toch nergens geen verwijsing naar !!
@de rest : Weeral negative commentaar maar ik vind dit heus niet erg .
ik ben al weer beizg aan een ander die ik ook laat zien. Met minder LIJNTJES !!!
misschien vincent add me ofzo
mvg wouter
Gewijzigd op 01/01/1970 01:00:00 door Wouter
ik ben ook nog opzoek naar een .MIDI pogramma voor gsm liedjes te downloaden van eigen server !! :p
css voor afbeeldingen preciesie en html voor de indeling.
Maar was die nu voor mij dat aan het doen ?
Want die geef ik maar voor degene die er graag iets mee zouden willen doen
Hehe (enkel wil ik wel dat er een vermelding naar mij wordt gegeven
Edit:
typo
typo
Gewijzigd op 01/01/1970 01:00:00 door W W