FOK!forum / Digital Corner / Deze website maken zonder ervaring, kan dat?
Nellidwoensdag 19 december 2007 @ 18:45
Ok, het zit zo: iemand heeft aan mij gevraagd of ik een website kon maken. Nou vind ik t leuk om in photoshop te kutten enzo maar een website heb ik eigenlijk alleen nog nooit ontwikkeld.

Dit heb ik in Photoshop even in elkaar geknutseld:



Nu is de vraag dus of ik dit zonder ervaring in elkaar kan zetten? En hoe?

Dit is dus de homepagia. De content (als je op dichterbij in t blauw klikt bijv.) komt in t stuk waar nu agenda en het logo van Dichterbij staat.

Er komt dus een pagina dichterbij, contact, agenda (is gewoon simpel per maand opnder elkaar waar ze optreden) en muziek (gastenboek kan weg denk ik en het fotoalbum moet in zo'n soort van flash pop up komen).

Het meest tricky wordt "muziek" daar moet namelijk een stukje van ieder nummer van een cd te beluisteren zijn. Nu had ik dit al gevonden en dat leek me wel geschikt hiervoor: XSPF Web Music Player Volgens mij gratis en ziet er wel simpel uit.

Maar goed, kan ik dat? met 10% ervaring met html...

Ik denk zelf eigenlijk totaal van niet Maar ik kan er helemaal naast zitten, misschien moet t met al die tutorials wel lukken...
RemcoDelftwoensdag 19 december 2007 @ 19:05
Google een cursusje HTML en CSS, dan lukt het wel.
Papierversnipperaarwoensdag 19 december 2007 @ 19:07
Het kan best, het duurt alleen heel lang omdat je tijdens het bouwen de nodige kennis moet vergaren. Persoonlijk vind ik dat een uitstekende manier van leren, zelf uitvinden.
killswitchwoensdag 19 december 2007 @ 19:15
quote:
Op woensdag 19 december 2007 19:05 schreef RemcoDelft het volgende:
Google een cursusje HTML en CSS, dan lukt het wel.
of je loopt hier eens een zootje tutorials door

http://www.tutorialized.com/

staan ook erg veel photoshop tutorials, dus sowieso wel toffe link
Jack.woensdag 19 december 2007 @ 19:16
Als je jezelf afvraagt of dit een ingewikkelde structuur is om een HTML website uit te ontwikkelen: zeker niet
Iemand die al eens een website in elkaar geknutseld heeft (en dus wat kennis van HTML heeft) zet dit makkelijk op een uurtje in elkaar.

Dus als je een projectje wil om HTML te leren, dan is dit zeker een goede start om de basis onder de knie te krijgen.

Hoe?
Persoonlijk doe ik het in een gewone editor (crimson editor, krijg je der ook nog kleurtjes bij zonder alle andere tralala), maar ik schrijf m'n html dan ook zelf ipv het te laten genereren door drag and drop toestanden (zoals dreamweaver etc). Wellicht dat je met dreamweaver iets sneller weg bent dan dat je pure html code gaat schrijven.
Nellidwoensdag 19 december 2007 @ 19:17
Ik had er misschien bij moeten zetten, in een redelijk korte tijd

Ik die online cursussen html en css wel maar vaak is dat vrij standaard toch? Qua opbouw van de website dan (wat html betreft)? Dit leek me zo lastig omdat ik dan met veel frames enzo moet gaan werken, omdat t in t midden moet enzo.

Maar voor de duidelijkheid: iemand met aardig wat ervaring heeft dit zo gemaakt? Anders vind ik t een beetje nutteloos daar heel veel tijd in te steken
Jack.woensdag 19 december 2007 @ 19:19
btw: http://www.handleidinghtml.nl/

Heb ik jaren geleden als naslagwerk gebruikt om HTML te leren.
Kan je ook gebruiken als je met dreamweaver aan de slag gaat ipv pure html.
Nellidwoensdag 19 december 2007 @ 19:20
quote:
Op woensdag 19 december 2007 19:16 schreef Jack. het volgende:
Als je jezelf afvraagt of dit een ingewikkelde structuur is om een HTML website uit te ontwikkelen: zeker niet
Iemand die al eens een website in elkaar geknutseld heeft (en dus wat kennis van HTML heeft) zet dit makkelijk op een uurtje in elkaar.

Dus als je een projectje wil om HTML te leren, dan is dit zeker een goede start om de basis onder de knie te krijgen.

Hoe?
Persoonlijk doe ik het in een gewone editor (crimson editor, krijg je der ook nog kleurtjes bij zonder alle andere tralala), maar ik schrijf m'n html dan ook zelf ipv het te laten genereren door drag and drop toestanden (zoals dreamweaver etc). Wellicht dat je met dreamweaver iets sneller weg bent dan dat je pure html code gaat schrijven.
Ik had deze nog niet gezien...

Maar met dreamweaver ben ik al eens bezig geweest ja, maar dat ging niet zo heel lekker Al dacht ik dat dat juist lekker simpel zou zijn.

Maar als ik iemand zoek die al aardig wat ervaring erin heeft, heeft ie t zo gemaakt? Anders is t de moeite voor mij ook niet ecth waard. Heb t best druk namelijk...
Jack.woensdag 19 december 2007 @ 19:20
quote:
Op woensdag 19 december 2007 19:17 schreef Nellid het volgende:
Ik die online cursussen html en css wel maar vaak is dat vrij standaard toch? Qua opbouw van de website dan (wat html betreft)? Dit leek me zo lastig omdat ik dan met veel frames enzo moet gaan werken, omdat t in t midden moet enzo.
Dat in het midden zetten doe je niet met frames (gebruik van frames is reeds enige tijd afgeschreven)
quote:
Op woensdag 19 december 2007 19:17 schreef Nellid het volgende:
Maar voor de duidelijkheid: iemand met aardig wat ervaring heeft dit zo gemaakt? Anders vind ik t een beetje nutteloos daar heel veel tijd in te steken
Ja iemand met aardig wat ervaring heeft het zo in elkaar geknutseld.
Nellidwoensdag 19 december 2007 @ 19:23
Hmm, t klinkt nu zo simpel dat ik mezelf een loser zou vinden als t me niet zou lukken haha

Ik zal eens kijken naar die links, maar als t me teveel tijd gaat kosten schuif ik m toch maar door

En dat frames tegenwoordig afgeschreven zijn wist ik nog niet trouwens, benieuwd hoe t nu gaat dan...
Jack.woensdag 19 december 2007 @ 19:26
Als je er geen interesse voor hebt zal het altijd te veel tijd kosten, omdat je dan die zaken niet onthoud en elke keer weer dingen moet gaan opzoeken.

Maar wat ik wilde zeggen is dat het echt geen moeilijk design is om om te zetten naar een website.
Lkwwoensdag 19 december 2007 @ 19:37
Als het snel online moet, zou ik zeker nog eens Dreamweaver opstarten en dan simpelweg de losse plaatjes via het WYSIWYG-gedeelte importeren en op de juiste plek zetten (in 'layers' bijv.). Eerst de homepage, daarna de andere pagina's.

Als eea dan online staat, kun je je op je gemak wat verdiepen in CSS / divs en andere zaken om alles wat flexibeler en makkelijker aanpasbaar te maken.

Je moet bij Dreamweaver misschien even een drempeltje over, maar die is niet zo hoog en als je 'm eenmaal hebt genomen, zet je daarna snel van alles en nog wat in elkaar. Desnoods allemaal via WYSIWYG.
wicked-jwoensdag 19 december 2007 @ 19:45
misschien CMS een idee? even googlen op de verschillende.
Joomla is een van de grotere maar hoge instap.

template kan je dan bijv tijdelijk een andere nemen zodat je op je gemak kan puzzellen om die van jou te maken.

of je besteed het natuurlijk uit. voordeel van CMS is dat je ook geen kennis nodig hebt van php / html om hem te kunnen updaten enz.
Nellidwoensdag 19 december 2007 @ 19:53
quote:
Op woensdag 19 december 2007 19:45 schreef wicked-j het volgende:
misschien CMS een idee? even googlen op de verschillende.
Joomla is een van de grotere maar hoge instap.

template kan je dan bijv tijdelijk een andere nemen zodat je op je gemak kan puzzellen om die van jou te maken.

of je besteed het natuurlijk uit. voordeel van CMS is dat je ook geen kennis nodig hebt van php / html om hem te kunnen updaten enz.
Grappig, ze gebruiken nu een CMS van Joomla

Maar heb je daarin wel flinke vrijheid om aan te passen? Bijvoorbeeld een mp3 webplayer toevoegen, kan dat eenvoudig?

Dat het geen moeilijk design is ben ik inmiddels wel achter, dat is mooi dan. Misschien toch nog maar even in Dreamweaver gaan duiken dan... iig in dat WYSIGetc. Het hoeft ook niet binnen een week af hoor. Maar ik heb gewoon niet zoveel tijd en zit eigenlijk helemaal niet in het website gebeuren. Studeer wel communicatie en heb overal altijd commentaar op Vandaar dat ze aan mij dachten...

En ohja, bedankt voor de hulp al zo snel
freisswoensdag 19 december 2007 @ 19:56
Als je het echt heel quick & dirty wil doen, er zit volgens mij in Photoshop een optie om op te slaan als webpagina.
Tarabasswoensdag 19 december 2007 @ 20:52
Slices en exporteren naar html. Button-rollovers maken met image ready en inbouwen. Is vrij makkelijk..
Nellidwoensdag 19 december 2007 @ 21:20
Het wordt steeds makkelijker, nog ff en t gaat vanzelf

Maar een en ander, de agenda bijvoorbeeld, en het fotoalbum moeten ook simpel aanpasbaar zijn. Is dat met bovengenoemde opties ook mogelijk?

En is het zo, dat als ik in Dreamweaver de website opmaak, je het naderhand gewoon kan updaten (de agenda bijvoorbeeld) met kladblok? Of moet dat dan per se ook met dreamweaver? Want een maand en wat data toevoegen kan makkelijk met kladblok of een andere html editor...
Nellidwoensdag 19 december 2007 @ 21:21
quote:
Op woensdag 19 december 2007 19:56 schreef freiss het volgende:
Als je het echt heel quick & dirty wil doen, er zit volgens mij in Photoshop een optie om op te slaan als webpagina.
Niet in mijn versie geloof ik, maar dat lijkt me ook niet handig... Zeker niet met updaten enzo. Maar zou inderdaad wel lekker snel zijn
Nellidwoensdag 19 december 2007 @ 21:22
quote:
Op woensdag 19 december 2007 20:52 schreef Tarabass het volgende:
Slices en exporteren naar html. Button-rollovers maken met image ready en inbouwen. Is vrij makkelijk..
Deze begrijp ik niet helemaal, slices?

edit: gevonden. Zijn ook wel tutorials over te vinden. Zat Ik ga met alles wel even aan de gang, op zich moet t zo moeilijk niet zijn Maar ook een leek moet t kunnen updaten, dat wordt nog de grootste klus volgens mij...

[ Bericht 32% gewijzigd door Nellid op 19-12-2007 21:46:41 ]
mscholwoensdag 19 december 2007 @ 21:55
quote:
Op woensdag 19 december 2007 19:16 schreef Jack. het volgende:
Als je jezelf afvraagt of dit een ingewikkelde structuur is om een HTML website uit te ontwikkelen: zeker niet
Iemand die al eens een website in elkaar geknutseld heeft (en dus wat kennis van HTML heeft) zet dit makkelijk op een uurtje in elkaar.

Dus als je een projectje wil om HTML te leren, dan is dit zeker een goede start om de basis onder de knie te krijgen.

Hoe?
Persoonlijk doe ik het in een gewone editor (crimson editor, krijg je der ook nog kleurtjes bij zonder alle andere tralala), maar ik schrijf m'n html dan ook zelf ipv het te laten genereren door drag and drop toestanden (zoals dreamweaver etc). Wellicht dat je met dreamweaver iets sneller weg bent dan dat je pure html code gaat schrijven.
DW drag & drop? nee niet echt...
DW gebruik ik ook alleen maar in code view voor zowel php als html.
en de autocomplete feature is verdomde handig, versneld het hele proces enorm..
mcDavidwoensdag 19 december 2007 @ 22:29
www.w3schools.com
http://www.flos-freeware.ch/notepad2.html

En succes!

Ohja en die muziek is heel makkelijk. Die doe je gewoon niet.
Nellidvrijdag 21 december 2007 @ 17:46
Zo, ben inmiddels met Dreamweaver begonnen en ik moet zeggen dat t best aardig gaat

Ik kom hier alleen niet uit:



De menubuttons moeten natuurlijk gewoon blijven staan... Zoals in mijn OP. En wat me ook niet lukt is de tekst te versmallen zeg maar, zodat t niet meteen tegen de buttons aan staat maar dat er nog wat ruimte zit tussen de tekst en de buttons.

Kan t ook niet in een tutorial vinden zo snel, thanx alvast!
Swetseneggervrijdag 21 december 2007 @ 19:33
verschillende divjes gebruiken (en geen tabellen) en de ruimte kan je creëren door padding toe te voegen.
Swetseneggervrijdag 21 december 2007 @ 19:37
Ow en het antwoord op je originele vraag is "neen". Je kan deze website niet snel zonder ervaring bouwen. Je kan heel snel tot 98% van je originele idee komen. Vervolgens ben je gedurende lange tijd bezig met finetuning tot 100%.... En dan ga je het resultaat bekijken in een andere browser...
WyriHaximusvrijdag 21 december 2007 @ 22:30
quote:
Op vrijdag 21 december 2007 19:37 schreef Swetsenegger het volgende:
Ow en het antwoord op je originele vraag is "neen". Je kan deze website niet snel zonder ervaring bouwen. Je kan heel snel tot 98% van je originele idee komen. Vervolgens ben je gedurende lange tijd bezig met finetuning tot 100%.... En dan ga je het resultaat bekijken in een andere browser...
Ja dit idee dus een beetje .
Nellidvrijdag 21 december 2007 @ 22:57
quote:
Op vrijdag 21 december 2007 22:30 schreef WyriHaximus het volgende:

[..]

Ja dit idee dus een beetje .
[ afbeelding ]


Ik moet zeggen dat ik al redelijk wat heb, krijg er zelfs muziek op Wel meteen ff een training gedownload, wordt t wel simpel uitgelegd...

Maar goed, met divjes ( ) aan de gang dus. Zal eens even kijken of dat gaat lukken.
Nellidzaterdag 22 december 2007 @ 00:32
quote:
Op vrijdag 21 december 2007 19:33 schreef Swetsenegger het volgende:
verschillende divjes gebruiken (en geen tabellen) en de ruimte kan je creëren door padding toe te voegen.
Hmm, misschien een goede tutorial over die divjes? Kan er geen wijs uit worden...

Inmiddels padding wel gevonden maar als ik dat toe pas in mn CSS sheet dan stopt ie overal 20px tussen, dus ook tussel alle buttons enzo. Dat is niet de bedoeling, kan ik het ook toe passen op alleen het stukje tekst? (ja natuurlijk, maar hoe dus )

Bedankt weer.
mscholzaterdag 22 december 2007 @ 00:57
quote:
Op vrijdag 21 december 2007 22:30 schreef WyriHaximus het volgende:

[..]

Ja dit idee dus een beetje .
[ afbeelding ]
het is gewoon niet eens grappig ....
gewoon zielig dat mensen dit verzinnen...

zeker gemaakt door een W3C fetishist?
Dzyzaterdag 22 december 2007 @ 02:13
quote:
Op zaterdag 22 december 2007 00:57 schreef mschol het volgende:

[..]

het is gewoon niet eens grappig ....
gewoon zielig dat mensen dit verzinnen...

zeker gemaakt door een W3C fetishist?
Nou ik ben het er anders wel mee eens. Al ben ik over het algemeen iets meer bezig met het schelden.
Swetseneggerzaterdag 22 december 2007 @ 09:12
quote:
Op zaterdag 22 december 2007 00:32 schreef Nellid het volgende:

[..]

Hmm, misschien een goede tutorial over die divjes? Kan er geen wijs uit worden...
handleidinghtml.nl legt het goed uit.
quote:
Inmiddels padding wel gevonden maar als ik dat toe pas in mn CSS sheet dan stopt ie overal 20px tussen, dus ook tussel alle buttons enzo. Dat is niet de bedoeling, kan ik het ook toe passen op alleen het stukje tekst? (ja natuurlijk, maar hoe dus )

Bedankt weer.
Door je tekst in een aparte div te stoppen, kan je alleen op dat 'block element' een padding toepassen.

Heel kort, je hebt inline elementen en block elementen. Daarmee bouw je een website op. Je volledige content staat in een block element. In dat block element kan je natuurlijk andere block elementen nesten, waardoor je bv een plaatje op elke positie in je tekst kan zetten. Met inline elementen kan je binnen dat block element bv een stuk tekst bold maken.

block elementen zijn bv <div> & <p>. Inline elementen zijn bv <span> en <a>
Nellidzaterdag 22 december 2007 @ 12:08
quote:
Op zaterdag 22 december 2007 09:12 schreef Swetsenegger het volgende:

[..]

handleidinghtml.nl legt het goed uit.
[..]

Door je tekst in een aparte div te stoppen, kan je alleen op dat 'block element' een padding toepassen.

Heel kort, je hebt inline elementen en block elementen. Daarmee bouw je een website op. Je volledige content staat in een block element. In dat block element kan je natuurlijk andere block elementen nesten, waardoor je bv een plaatje op elke positie in je tekst kan zetten. Met inline elementen kan je binnen dat block element bv een stuk tekst bold maken.

block elementen zijn bv <div> & <p>. Inline elementen zijn bv <span> en <a>
Thanx!

Aleen ik gebruik nu dreamweaver en eigenlijk doe ik niks met html, zag wel dat je een div in kon voegen in dreamweaver maar t lukt me niet dat ding op de goede plek te krijgen Maar we gaan er weer mee verder...
Swetseneggerzaterdag 22 december 2007 @ 12:20
quote:
Op zaterdag 22 december 2007 12:08 schreef Nellid het volgende:

[..]

Thanx!

Aleen ik gebruik nu dreamweaver en eigenlijk doe ik niks met html, zag wel dat je een div in kon voegen in dreamweaver maar t lukt me niet dat ding op de goede plek te krijgen Maar we gaan er weer mee verder...
En dat is de reden waarom dreamweaver zuigt voor beginners. wat mij betreft zijn sleur en pleur omgevingen JUIST voor gevorderde gebruikers, die weten hoe ze de boel kunnen rechtzetten als dreamweaver er weer eens een zooi van maakt.
Nellidmaandag 24 december 2007 @ 22:52
Ik heb nu alles in divjes staan en t gaat best redelijk moet ik zeggen

Ik krijg alleen die divjes niet gecentreerd op de pagina. Al die losse elementen heb ik dus in divjes gezet (de buttons en jpegs) maar ze staan nu allemaal linksbovenin en ik krijg ze niet gecentreerd, heb ook geen optie align ofzo. Iemand die me uit kan leggen hoe ik dat moet doen? Het zijn die AP divs, mag toch hopen dat ik die wel kan verplaatsen
Swetseneggermaandag 24 december 2007 @ 22:55
quote:
Op maandag 24 december 2007 22:52 schreef Nellid het volgende:
Ik heb nu alles in divjes staan en t gaat best redelijk moet ik zeggen

Ik krijg alleen die divjes niet gecentreerd op de pagina. Al die losse elementen heb ik dus in divjes gezet (de buttons en jpegs) maar ze staan nu allemaal linksbovenin en ik krijg ze niet gecentreerd, heb ook geen optie align ofzo. Iemand die me uit kan leggen hoe ik dat moet doen? Het zijn die AP divs, mag toch hopen dat ik die wel kan verplaatsen
Nesten.
Dus je maakt een container div waar je de rest ingooit. Overigens zou ik niet voor elke knop een aparte div maken. Je maakt gewoon een menu div.
Nellidmaandag 24 december 2007 @ 22:59
quote:
Op maandag 24 december 2007 22:55 schreef Swetsenegger het volgende:

[..]

Nesten.
Dus je maakt een container div waar je de rest ingooit. Overigens zou ik niet voor elke knop een aparte div maken. Je maakt gewoon een menu div.
Dat wilde ik ook doen, maar dat lukt niet (alles in 1 div).

Hoe doe ik dat nesten? Want wat me tot nu toe is gelukt is dat ik een div heb die precies om alle andere divs heen staat maar die erboven hangt zeg maar en leeg is (als ik die dus verplaats verplaats ik alleen de div en alles dat "erin" staat blijft gewoon staan. De div die ik verplaats is dus leeg... Hoe krijg ik alles in die ene div?

Een menu div? Tsja, heb nu alles al los Is niet zo heel veel gelukkig.

Wat ik nu dus heb is dit:

klik
Swetseneggermaandag 24 december 2007 @ 23:22
quote:
Op maandag 24 december 2007 22:59 schreef Nellid het volgende:

[..]

Hoe doe ik dat nesten? Want wat me tot nu toe is gelukt is dat ik een div heb die precies om alle andere divs heen staat maar die erboven hangt zeg maar en leeg is (als ik die dus verplaats verplaats ik alleen de div en alles dat "erin" staat blijft gewoon staan. De div die ik verplaats is dus leeg... Hoe krijg ik alles in die ene div?
1
2
3
4
<div id="container" style="width:750px;margin:auto 0">
     <div>iets</div>
     <div>iets anders</div>
</div>
quote:
Een menu div? Tsja, heb nu alles al los :) Is niet zo heel veel gelukkig.

Wat ik nu dus heb is dit:

klik
Je moet het zelf weten, maar het wordt minder hanteerbaar.
SuperRembomaandag 24 december 2007 @ 23:26
Persoonlijk vind ik deze zooi onsamenhangende absoluut gepositioneerde divjes niet totaal "beter", "mooier" of "handiger" dan een tabel. Maar laat dat je vooral niet tegenhouden
Nellidmaandag 24 december 2007 @ 23:26
quote:
Op maandag 24 december 2007 23:22 schreef Swetsenegger het volgende:

[..]
[ code verwijderd ]

[..]

Je moet het zelf weten, maar het wordt minder hanteerbaar.
Thanx.

Maar ik heb nu alles al, het is in feite af (behalve die kut muziek) Dus dan kan ik het toch net zo goed zo laten? De volgende keer zal ik dan de menu optie gebruiken maar voorlopig kijk ik eerst wel even of t zo kan blijven
Nellidmaandag 24 december 2007 @ 23:29
quote:
Op maandag 24 december 2007 23:26 schreef SuperRembo het volgende:
Persoonlijk vind ik deze zooi onsamenhangende absoluut gepositioneerde divjes niet totaal "beter", "mooier" of "handiger" dan een tabel. Maar laat dat je vooral niet tegenhouden
Joh, ik ben al blij dat ik heb wat ik heb

Wilde trouwens ook uiteindelijk tabellen gebruiken met de tracing image functie maar ik kreeg mn image niet exact getraced, dat lukte gewoon echt niet. Daarna met tracing image ap divjes gemaakt en dat lukte wel, vandaar divjes.

Ik had voor een tabel gekozen omdat ik die volgens mij wel in 1 keer had kunnen centreren op de pagina...
SuperRembomaandag 24 december 2007 @ 23:33
quote:
Op maandag 24 december 2007 23:29 schreef Nellid het volgende:
Ik had voor een tabel gekozen omdat ik die volgens mij wel in 1 keer had kunnen centreren op de pagina...
Dat maakt niet zo gek veel veel verschil.
Nellidmaandag 24 december 2007 @ 23:36
hmm, lukt niet :) Zal wel iets fout doen...

Heb nu dit bij mn indexpagina:

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<?php
<!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>Welkom bij dichterbij!</title>
<
style type="text/css">
<!--
#apDiv1 {
    
position:absolute;
    
left:563px;
    
top:15px;
    
width:133px;
    
height:26px;
    
z-index:1;
}
#apDiv2 {
    
position:absolute;
    
left:563px;
    
top:0px;
    
width:133px;
    
height:41px;
    
z-index:1;
}
#apDiv3 {
    
position:absolute;
    
left:563px;
    
top:41px;
    
width:133px;
    
height:51px;
    
z-index:2;
}
#apDiv4 {
    
position:absolute;
    
left:563px;
    
top:92px;
    
width:133px;
    
height:41px;
    
z-index:3;
}
#apDiv5 {
    
position:absolute;
    
left:0px;
    
top:0px;
    
width:133px;
    
height:133px;
    
z-index:4;
}
#apDiv6 {
    
position:absolute;
    
left:0px;
    
top:133px;
    
width:133px;
    
height:68px;
    
z-index:5;
}
#apDiv7 {
    
position:absolute;
    
left:0px;
    
top:201px;
    
width:133px;
    
height:65px;
    
z-index:6;
}
#apDiv8 {
    
position:absolute;
    
left:133px;
    
top:0px;
    
width:430px;
    
height:133px;
    
z-index:7;
}
#apDiv9 {
    
position:absolute;
    
left:133px;
    
top:133px;
    
width:172px;
    
height:45px;
    
z-index:8;
}
#apDiv10 {
    
position:absolute;
    
left:133px;
    
top:178px;
    
width:172px;
    
height:88px;
    
z-index:9;
}
#apDiv11 {
    
position:absolute;
    
left:305px;
    
top:133px;
    
width:258px;
    
height:151px;
    
z-index:10;
}
#apDiv12 {
    
position:absolute;
    
left:0px;
    
top:0px;
    
width:133px;
    
height:133px;
    
z-index:11;
}
#apDiv13 {
    
position:absolute;
    
left:133px;
    
top:0px;
    
width:430px;
    
height:133px;
    
z-index:12;
}
#apDiv14 {
    
position:absolute;
    
left:133px;
    
top:133px;
    
width:172px;
    
height:45px;
    
z-index:13;
}
#apDiv15 {
    
position:absolute;
    
left:133px;
    
top:178px;
    
width:172px;
    
height:88px;
    
z-index:14;
}
#apDiv16 {
    
position:absolute;
    
left:0px;
    
top:201px;
    
width:133px;
    
height:65px;
    
z-index:15;
}
#apDiv17 {
    
position:absolute;
    
left:0px;
    
top:133px;
    
width:133px;
    
height:68px;
    
z-index:16;
}
-->
</
style>
</
head>

<
div id="container" style="width:750px;margin:auto 0">
    <
body tracingsrc="assets/layout_index.jpg" tracingopacity="65" tracingx="0" tracingy="0">
    <
div id="apDiv2"><img src="images/home.jpg" width="133" height="41" /></div>
    <
div id="apDiv3"><a href="dichterbij.html"><img src="images/dichterbij.jpg" width="133" height="51" border="0" /></a></div>
    <
div id="apDiv4"><a href="contact.html"><img src="images/contact.jpg" width="133" height="45" border="0" /></a></div>
    <
div id="apDiv11"><img src="images/logo.jpg" width="258" height="151" /></div>
    <
div id="apDiv12"><img src="images/gedicht.jpg" width="133" height="133" /></div>
    <
div id="apDiv13"><img src="images/foto_header.jpg" width="430" height="133" /></div>
    <
div id="apDiv14"><a href="agenda.html"><img src="images/agenda.jpg" width="172" height="45" border="0" /></a></div>
    <
div id="apDiv15"><img src="images/upcoming.jpg" width="172" height="88" /></div>
    <
div id="apDiv16"><a href="fotoalbum.html"><img src="images/fotoalbum.jpg" width="133" height="65" border="0" /></a></div>
    <
div id="apDiv17"><a href="muziek.html"><img src="images/muziek.jpg" width="133" height="68" border="0" /></a></div>
</
div>
</
body>
</
html>
?>
Swetseneggermaandag 24 december 2007 @ 23:36
tering
Nellidmaandag 24 december 2007 @ 23:38
quote:
Op maandag 24 december 2007 23:36 schreef Swetsenegger het volgende:
tering
haha.

Ik dacht al dat ik zo'n antwoord zou krijgen

Onthou ff dat t mn eerste website ooit is he Nog nooit iets met html gedaan...
Swetseneggermaandag 24 december 2007 @ 23:38
Overigens staat je body binnen de container div. Das niet de bedoeling.

1
2
3
</head>
<body tracingsrc="assets/layout_index.jpg" tracingopacity="65" tracingx="0" tracingy="0">
<div id="container" style="width:750px;margin:auto 0">
devvertjemaandag 24 december 2007 @ 23:39
doe ff kappuh met die onnodige 'position:absolute;'

en gebruik gewoon relatieve positionering
Swetseneggermaandag 24 december 2007 @ 23:42
quote:
Op maandag 24 december 2007 23:39 schreef devvertje het volgende:
doe ff kappuh met die onnodige 'position:absolute;'

en gebruik gewoon relatieve positionering
De jongen weet net wat html is. Geef dan gelijk een relevant voorbeeld.
Nellidmaandag 24 december 2007 @ 23:42
quote:
Op maandag 24 december 2007 23:39 schreef devvertje het volgende:
doe ff kappuh met die onnodige 'position:absolute;'

en gebruik gewoon relatieve positionering
oh ja, natuurlijk.

ik weet niet eens wat t verschil is
Nellidmaandag 24 december 2007 @ 23:45
quote:
Op maandag 24 december 2007 23:38 schreef Swetsenegger het volgende:
Overigens staat je body binnen de container div. Das niet de bedoeling.
[ code verwijderd ]
Zo heb ik m nu staan ja, maar waar vul ik precies welke marges in om m in t midden van de pagina te krijgen? Dus left, top en right...

En bedankt nog
devvertjemaandag 24 december 2007 @ 23:45
www.google.com

zoek ff op "CSS positioning", het spijt me dat ik je overschat heb TS
Swetseneggermaandag 24 december 2007 @ 23:46
quote:
Op maandag 24 december 2007 23:42 schreef Nellid het volgende:

[..]

oh ja, natuurlijk.

ik weet niet eens wat t verschil is
Bij relatieve positionering, wordt elk element relatief tov de voorgaande geplaatst.
Dus "top:10px;" zal het element bij absolute positionering 10 pixels vanaf de top van je browserscherm (het canvas) zetten en bij relatieve positionering 10 pixels vanaf de onderzijde van het voorgaande element.
Swetseneggermaandag 24 december 2007 @ 23:47
quote:
Op maandag 24 december 2007 23:45 schreef Nellid het volgende:

[..]

Zo heb ik m nu staan ja, maar waar vul ik precies welke marges in om m in t midden van de pagina te krijgen? Dus left, top en right...

En bedankt nog
Je zal ze relatief moeten positioneren.
Nellidmaandag 24 december 2007 @ 23:50
quote:
Op maandag 24 december 2007 23:45 schreef devvertje het volgende:
www.google.com

zoek ff op "CSS positioning", het spijt me dat ik je overschat heb TS
Ik heb op t moment eigenlijk alles gedaan door wat termen die ik in dit topic heb gezien en verder met behulp van de training van lynda.com die ik heb gedownload, dat ik op deze html code uitkom is puur het volgen van handelingen waarvan ik denk dat ik ze moet doen. Ik kan totaal geen oordeel geven over die code, of t omslachtig is, veel te veel etc. Dat dat zo is geloof ik meteen.

Ben alleen blij als ik op preview klik en t klopt wat ik zie
Nellidmaandag 24 december 2007 @ 23:53
quote:
Op maandag 24 december 2007 23:46 schreef Swetsenegger het volgende:

[..]

Bij relatieve positionering, wordt elk element relatief tov de voorgaande geplaatst.
Dus "top:10px;" zal het element bij absolute positionering 10 pixels vanaf de top van je browserscherm (het canvas) zetten en bij relatieve positionering 10 pixels vanaf de onderzijde van het voorgaande element.
Ik snapte t ook wel een beetje weet ook wel t verschil tussen absoluut en relatief, was meer om aan te geven dat ik weinig tot geen kennis heb van html...

Maar ik ga er weer mee aan de slag, wordt iets voor morgen.
Aaargh!dinsdag 25 december 2007 @ 02:29
quote:
Op maandag 24 december 2007 23:46 schreef Swetsenegger het volgende:

[..]

Bij relatieve positionering, wordt elk element relatief tov de voorgaande geplaatst.
Dus "top:10px;" zal het element bij absolute positionering 10 pixels vanaf de top van je browserscherm (het canvas) zetten en bij relatieve positionering 10 pixels vanaf de onderzijde van het voorgaande element.
Dat is niet correct, of eigenlijk: veel simpeler voorgesteld dan het daadwerkelijk is (wat haast nog erger is). Bij absolutie positionering wordt het element uit de normale flow gehaald en heeft dus ook geen invloed meer op volgende elementen.

Bij relatieve positionering wordt het element eerst geplaatst volgens de normale flow, en daarna pas verplaats relatief aan de positie die het element in de normale flow heeft. Alle opvolgende elementen worden dus ook gelayout alsof het relatief verplaatste element niet verschoven was. Stel dat een element een position:relative heeft en een left: -10px. dan wordt dit element gelayout en daarna 10 pixels naar links verplaatst. Stel dat hiernaast nog een element staat met position: relative en een left: 10px; dan staat deze dus NIET 10 pixels rechts van het element ervoor , maar 20 pixels. Beide elementen worden volgende de normale flow gelayout, en daarna wordt het eerste element 10 pixels naar links geschoven en het tweede element 10 pixels naar rechts.

Het is misschien handig om eens in de W3C CSS documentatie te lezen hoe het box-model werkt en hoe het 'visual formatting' model werkt. Misschien wat taaie kost maar het helpt wel te begrijpen hoe een browser de positie van het e.a. bepaald.
Swetseneggerdinsdag 25 december 2007 @ 07:38
quote:
Op dinsdag 25 december 2007 02:29 schreef Aaargh! het volgende:

[..]

Dat is niet correct, of eigenlijk: veel simpeler voorgesteld dan het daadwerkelijk is (wat haast nog erger is). Bij absolutie positionering wordt het element uit de normale flow gehaald en heeft dus ook geen invloed meer op volgende elementen.

Bij relatieve positionering wordt het element eerst geplaatst volgens de normale flow, en daarna pas verplaats relatief aan de positie die het element in de normale flow heeft. Alle opvolgende elementen worden dus ook gelayout alsof het relatief verplaatste element niet verschoven was. Stel dat een element een position:relative heeft en een left: -10px. dan wordt dit element gelayout en daarna 10 pixels naar links verplaatst. Stel dat hiernaast nog een element staat met position: relative en een left: 10px; dan staat deze dus NIET 10 pixels rechts van het element ervoor , maar 20 pixels. Beide elementen worden volgende de normale flow gelayout, en daarna wordt het eerste element 10 pixels naar links geschoven en het tweede element 10 pixels naar rechts.

Het is misschien handig om eens in de W3C CSS documentatie te lezen hoe het box-model werkt en hoe het 'visual formatting' model werkt. Misschien wat taaie kost maar het helpt wel te begrijpen hoe een browser de positie van het e.a. bepaald.
Ja HIER gaat TS het mee snappen.

Leuk hoor volledig correct willen zijn, maar niet altijd op zijn plaats.
devvertjedinsdag 25 december 2007 @ 11:56
True Swetselnigger