Opbouwen van site met div
En nu probeer ik hem dus met <div> dingen op te bouwen. helaas krijg ik het niet geheel voor elkaar zoals ik wil.
heb een main-div waar ik alles binnen probeer te zetten als ik de header en het menu erin plaats pakt die nog de achtergrond van de main div.
nu probeer ik onder het menu een linker een midden en een rechter stuk te krijgen.
maar als ik een linker kolom maak en daarin weer divjes plaats valt dit eigenlijk weer buiten de main div. als ik dan de linker kolom verwijder en dan wel de divjes laat staan die daarin staan komt het wel binnen de maindiv te staan..
Euhmz ja begrijpen jullie het nog :)
Heb een voorbeeldje bijgevoegd zoals ik het graag zou willen maar niet krijg..
iemand tips hoe ik het wel zo voor elkaar krijg.?
alvast bedankt.
Kan je je cssstyle eens laten zien..
In principe is het niet zo moeilijk hoor..
Je maakt in jou geval 3 "hoofd" div's
#header
#content
#footer
dan om het simpel te houden voor je content maak je 3 divjes
.links
.center
.rechts
En zo kan je rustig verder op bouwen..
Let wel op dat je totale breedte van die .links/rechts/center evenveel als je breedte van je #content.
En anders moet je eens online kijken voor wat css tutorials..want ik kan het toch niet goed uitleggen :p
heel moeilijk is het niet ze..
Succes!!
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
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
<div class="wrapper">
<div class="header">
</div>
<ul class="menu">
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
</ul>
<div class="left">
<div class="blok">
</div>
<div class="blok">
</div>
</div>
<div class="middle">
</div>
<div class="right">
<div class="blok">
</div>
<div class="blok">
</div>
</div>
</div>
<div class="header">
</div>
<ul class="menu">
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
</ul>
<div class="left">
<div class="blok">
</div>
<div class="blok">
</div>
</div>
<div class="middle">
</div>
<div class="right">
<div class="blok">
</div>
<div class="blok">
</div>
</div>
</div>
Dan kan je door middel van css classes je pagina opmaken.
Hierin staat met commentaar wat nodig is om jou opbouw te geven derest kan je zelf toevoegen.
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
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
body {
/*
Aangeven welke lettertyp, kleur, formaat.
*/
}
div.wrapper {
/*
Vaste breedte meegeven en margin: 0px auto; zodat hij in het midden komt.
*/
}
div.header {
/*
Deze div geef je vaste breedte en hoogte
En je float naar links
*/
}
div.left {
/*
Deze div geeft je een vaste breedte + een left margin.
En je float naar links.
*/
}
div.right {
/*
Deze div geeft je een vaste breedte + een right margin.
En je float naar links.
*/
}
div.blok {
/*
De div geeft je een vaste breedte en eventueel een lijntje / achtergrond kleur.
En je float naar links.
*/
}
div.middle {
/*
Deze float je naar links met een vaste breedte.
*/
}
/*
Aangeven welke lettertyp, kleur, formaat.
*/
}
div.wrapper {
/*
Vaste breedte meegeven en margin: 0px auto; zodat hij in het midden komt.
*/
}
div.header {
/*
Deze div geef je vaste breedte en hoogte
En je float naar links
*/
}
div.left {
/*
Deze div geeft je een vaste breedte + een left margin.
En je float naar links.
*/
}
div.right {
/*
Deze div geeft je een vaste breedte + een right margin.
En je float naar links.
*/
}
div.blok {
/*
De div geeft je een vaste breedte en eventueel een lijntje / achtergrond kleur.
En je float naar links.
*/
}
div.middle {
/*
Deze float je naar links met een vaste breedte.
*/
}
voor een menu moet je maar even googlen op "menu html css" dan vind je zoveel goede resultaten, ik heb nu geen tijd meer om dat te laten zien dus moet je even googlen.
Gewijzigd op 29/08/2010 21:20:04 door Milo S
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
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
<div id="mainsite">
<!--- BEGIN HEADER -->
<div id="header">
<img src="images/layout/header.jpg" style="opacity: 0.2; filter: alpha(opacity=20);">
</div>
<!--- END HEADER -->
<!--- BEGIN MENU -->
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Gastenboek</a>
<ul>
<li><a href="sponsor.php">Bekijken</a></li>
<li><a href="clubvan.php">Schrijven</a></li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<!--- END MENU -->
<!--- BEGIN mainleft -->
<!--- BEGIN fotoleft -->
<div id="mainleft">
<div id="fotoleft">
<img src="images/tijdelijk/foto200.jpg" />
</div>
<!--- BEGIN fotoleft -->
<div id="sponsortable">
<div id="headsmall">
TITEL
</div>
TABEL 1
</div>
</div>
<!--- END mainleft -->
</div>
</div>
<!--- BEGIN HEADER -->
<div id="header">
<img src="images/layout/header.jpg" style="opacity: 0.2; filter: alpha(opacity=20);">
</div>
<!--- END HEADER -->
<!--- BEGIN MENU -->
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Gastenboek</a>
<ul>
<li><a href="sponsor.php">Bekijken</a></li>
<li><a href="clubvan.php">Schrijven</a></li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<!--- END MENU -->
<!--- BEGIN mainleft -->
<!--- BEGIN fotoleft -->
<div id="mainleft">
<div id="fotoleft">
<img src="images/tijdelijk/foto200.jpg" />
</div>
<!--- BEGIN fotoleft -->
<div id="sponsortable">
<div id="headsmall">
TITEL
</div>
TABEL 1
</div>
</div>
<!--- END mainleft -->
</div>
</div>
en de css
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
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
div#mainsite{
width:1024px;
left: 50%;
margin-left: -512px; /* - (width/2) */
position: relative;
border-left:1px solid black;
border-right:1px solid black;
height:100%;
background-color: #CCCCCC;
}
div#header {
border: 0 none;
top-margin:0px;
margin-bottom:0px;
}
div#sponsortable {
width: 210px;
height: 100%;
border: 1px solid black;
margin-left: 6px;
background-color:#000;
color:#0F3;
text-align:center;
height: 100%;
}
div#headsmall {
width: 198px;
border: 1px solid black;
margin: 5px;
text-align:center;
}
div#mainleft {
width: 225px;
height: 100%;
background-color:#C00;
float: left;
}
div#fotoleft {
width: 200px;
background-color:#C00;
margin: 12px;
background-color:#000;
}
width:1024px;
left: 50%;
margin-left: -512px; /* - (width/2) */
position: relative;
border-left:1px solid black;
border-right:1px solid black;
height:100%;
background-color: #CCCCCC;
}
div#header {
border: 0 none;
top-margin:0px;
margin-bottom:0px;
}
div#sponsortable {
width: 210px;
height: 100%;
border: 1px solid black;
margin-left: 6px;
background-color:#000;
color:#0F3;
text-align:center;
height: 100%;
}
div#headsmall {
width: 198px;
border: 1px solid black;
margin: 5px;
text-align:center;
}
div#mainleft {
width: 225px;
height: 100%;
background-color:#C00;
float: left;
}
div#fotoleft {
width: 200px;
background-color:#C00;
margin: 12px;
background-color:#000;
}
Dat was dus wat ik tot nu toe had maar dat ging dan dus niet goed.
Ben nu bezig de dingen die hierboven staat uit te proberen kijken of dat wel lukt.
In ieder geval al bedankt voor de hulp.
Helaas wil het me dus nog steeds niet lukken.. de "basis" ( header en daaronder 3 rijen naast elkaar) krijg ik er wel in maar als ik dan wat extra's toevoeg gaat alles in de war :)
Aar anoniem op 10/10/2010 16:50:30:
Wat voeg je dan waar toe?
Als ik in het midden gedeelte iets bij voeg zorgt dat ervoor dat alles weer verspringt en doet.
dus een main content midden div en daarin dus weer een paar verdeel divjes plaats.
Toevoeging op 10/10/2010 17:29:01:
Als ik een border links en rechts aangeef aan de "hoofd" div dan geeft hij deze border alleen aan de header ook als ik er nog een "content" div onderzet.. als ik hierbij geen class of id aangeef bij de content div dan wordt de border wel weergegeven.
<div id=hoofd>
<div id=header>
De header
</div>
<div id=content>
De content
</div>
</div>
Gewijzigd op 11/10/2010 15:16:01 door Roel H
iemand idee? of zit ik verkeerd te zoeken ?
FF en derest: margin: 0px auto;
Milo S op 11/10/2010 20:45:22:
IE: text-align: center;
FF en derest: margin: 0px auto;
FF en derest: margin: 0px auto;
Nou dan zal er wel weer iets niet kloppen maar dat doet dus niets.
gebruik google Chrome
Dat helpt namelijk wat makkelijker.
Roel H op 11/10/2010 20:59:59:
Nou dan zal er wel weer iets niet kloppen maar dat doet dus niets.
gebruik google Chrome
Milo S op 11/10/2010 20:45:22:
IE: text-align: center;
FF en derest: margin: 0px auto;
FF en derest: margin: 0px auto;
Nou dan zal er wel weer iets niet kloppen maar dat doet dus niets.
gebruik google Chrome
Dan staat er warschijnlijk position: absolute/relative in de div
float css
clear css
beiden is te gebruiken met divs
Teun Hesseling op 12/10/2010 14:13:23:
ik gebruik vaak een validator, is voor dit soort dingen heel handig
Gebruik de addon van Firefox (HTML validator) Werkt veel makkelijker en sneller en is tevens ook offline te gebruiken.
http://www.kbdracing.nl/divtest/
de kleuren zijn genomen om het voor me eigen iets duidelijk te krijgen qua breedtes en tabellen.
Zal de validator er eens over heen halen
Bedankt voor alle reacties
Gewijzigd op 12/10/2010 17:18:14 door Roel H
Je gebruikt nog steeds position is heel niet nodig. Zie je dat bij mijn vb staan als absoluut nodig? Nee precies met margin en float kan je deze lay-out zo maken.
Maak deze lay-out eerst eens met allen kleuren zonder afbeeldingen. En scrollbar meuk is niet voor alle browsers. Dit laat ons ook meteen weten dat je IE gebruikt, want in FF zie je er niks van Gelukkig.
JS is trouwens uitschakelbaar en daarom niet handig om te gebruiken en zeker niet voor je menu!
Milo S op 12/10/2010 17:58:31:
Waarom zo eigenwijs? Heb in het begin van dit topic bijna kant en klaar vb gegeven en je doet er bijna niks mee? Daarmee kan je precies jou lay-out maken zonder dat het een chaos is.
Je gebruikt nog steeds position is heel niet nodig. Zie je dat bij mijn vb staan als absoluut nodig? Nee precies met margin en float kan je deze lay-out zo maken.
Maak deze lay-out eerst eens met allen kleuren zonder afbeeldingen. En scrollbar meuk is niet voor alle browsers. Dit laat ons ook meteen weten dat je IE gebruikt, want in FF zie je er niks van Gelukkig.
JS is trouwens uitschakelbaar en daarom niet handig om te gebruiken en zeker niet voor je menu!
Je gebruikt nog steeds position is heel niet nodig. Zie je dat bij mijn vb staan als absoluut nodig? Nee precies met margin en float kan je deze lay-out zo maken.
Maak deze lay-out eerst eens met allen kleuren zonder afbeeldingen. En scrollbar meuk is niet voor alle browsers. Dit laat ons ook meteen weten dat je IE gebruikt, want in FF zie je er niks van Gelukkig.
JS is trouwens uitschakelbaar en daarom niet handig om te gebruiken en zeker niet voor je menu!
Het is niet om eigenwijs te doen, meer om dat het op dat moment niet wil en dan begin ik er dus dingen om heen te prutsen om het wel werkend te krijgen... wat dus ook niet wil :)
Maar heb nu die gehele op zet van jou gebruikt maar krijg nu nog steeds die blokken niet auto gecenterd.
-- edit--
het begint te werken.. :)
bij .blok had jij (Milo S) bij jou voorbeeld float: left; staan waarom is dat ?
als ik dat daar weg haal en margin: 0px auto; erneer zet wordt het wel gecentreerd.
Gewijzigd op 12/10/2010 22:08:55 door Roel H