Toon posts:

[html/css] layout met div's

Pagina: 1
Acties:

maandag 20 december 2004 19:43

Acties:

Verwijderd

Topicstarter
Voordat jullie mij doorverwijzen naar de search, google of iets dergelijks: deze heb ik al gebruikt.

Ik wil de volgende layout creeeren met html, div's en css:
Afbeeldingslocatie: http://www.digitalminds.nl/tmpfiles/layout.gif

1. dient een vaste hoogte en breedte te hebben (dit lukt)
2. dient een vaste breedte en een variabele hoogte te hebben (dit lukt)
3. dient een vaste breedte en een variabele hoogte te hebben (dit lukt)
4. dient een vaste hoogte en breedte te hebben, maar een variabele locatie

daar zit hem het probleem in, ik krijg het met geen mogelijkheid voor elkaar omdat de positie van
div 4 afhankelijk is van de hoogte van div 2 en 3. Ik heb zelf het vermoeden dat dit iets met het 'boxmodel' te maken heeft (wel de klok horen luiden maar niet wetend waar de klepel zit) kom ik alleen op sites met een engelstalige uitleg terecht. Kan iemand mij duidelijk uitleggen hoe ik te werk moet gaan, eventueel een nederlandstalige uitleg van het boxmodel?

maandag 20 december 2004 19:48

Acties:
  • MaZo
  • Registratie: Mei 2002
  • Niet online

MaZo

Google is ur best friend! ;)

http://www.google.nl/sear...boxmodel%2Bcss&lr=lang_nl

maandag 20 december 2004 19:48

Acties:

Verwijderd

3 divs:
1, 2en 3 samengevoegd met eventueel een faux collumns iets en vervolgens 4

in die middelste 2 floating blocks en erna een lege met :clear_both; om te zorgen dat die container opgerekt wordt.

Ondanks dat je goed gezocht hebt is dit toch wel erg vaak langs geweest, dus misschien nog maar eens verder zoeken ;)

maandag 20 december 2004 19:49

Acties:
  • Willem
  • Registratie: Februari 2001
  • Laatst online: 19:48

Willem

Ik zie geen "2" O-) ;)

Wat heb je tot nu toe aan sourcecode? :)
Als je daar eens wat van post kunnen we eens kijken wat je al hebt geprobeerd.

Motor (of auto) onderhoud bijhouden

maandag 20 december 2004 19:49

Acties:
  • PhysicsRules
  • Registratie: Februari 2002
  • Laatst online: 22-12-2025

PhysicsRules

Dux: Linux voor Eenden

Als je het in het NL wil, zoek ook naar een post van crisp. die zou eigenlijk in de FAQ moeten!!!

Edit: heb 'm ff opgezocht
[css] 3 rows, 2 vast, de ander zoekt het maar uit

[ Voor 43% gewijzigd door PhysicsRules op 20-12-2004 19:55 ]

maandag 20 december 2004 19:50

Acties:
  • dev icey
  • Registratie: Augustus 2003
  • Laatst online: 09-12-2025

dev icey

Het helpt misschien als je de huidige source van je post, maar ik denk dat je bij div 4, position: relative moet gaan gebruiken. Maar verder kom ik niet echt zonder je sourcecode.

maandag 20 december 2004 21:01

Acties:

Verwijderd

Topicstarter
idd excuses, ik was de 2 vergeten. maar hier mijn broncode

html
code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../include/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="containerDiv">

    <div id="headerDiv"></div>
    
    <div id="menuDiv"></div>
    
    <div id="contentDiv"></div>
    
    <div id="bottomDiv"></div>
</div>

    
</body>
</html>


css
code:
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

/* CSS Document */

body {
    overflow:hidden;
    }

#containerDiv {
    position:absolute;
    top:5px;
    left:50%;
    width:700px;
    margin-left:-350px; 
    margin-top:0px;
    border-width:1px;
    border-color:#000000;
    border-style:solid;
    }
    
#headerDiv {
    position:absolute;
    top:0px;
    left:0px;
    width:700px;
    height:100px;
    margin-left:0px; 
    margin-top:0px;
    border-width:1px;
    border-color:#000000;
    border-style:dotted;
    }

#menuDiv {
    position:absolute;
    top:100px;
    left:0px;
    width:100px;
    margin-left:0px; 
    margin-top:0px;
    border-width:1px;
    border-color:#000000;
    border-style:dotted;
    }
    
#contentDiv {
    position:absolute;
    top:100px;
    left:100px;
    width:600px;
    margin-left:0px; 
    margin-top:0px;
    border-width:1px;
    border-color:#000000;
    border-style:dotted;
    }
    
#contentDiv {
    position:absolute;
    top:100px;
    left:100px;
    width:600px;
    margin-left:0px; 
    margin-top:0px;
    border-width:1px;
    border-color:#000000;
    border-style:dotted;
    }

#bottomDiv {
    position:relative;
    top:0px;
    left:0px;
    width:700px;
    height:100px;
    margin-left:0px; 
    border-width:1px;
    border-color:#000000;
    border-style:dotted;
    }

[ Voor 20% gewijzigd door Verwijderd op 20-12-2004 21:02 ]

maandag 20 december 2004 21:05

Acties:
  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Heb je al naar het topic gekeken wat in deze reactie werd gemeld:

[rml]PhysicsRules in "[ html/css] layout met div's"[/rml]

maandag 20 december 2004 21:24

Acties:

Verwijderd

Topicstarter
uit dat topic heb ik deze code kunnen halen:
code:
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

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: auto;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -395px;
  height: 100%;
  width: 790px;
  padding-top: 80px;
  padding-bottom: 80px;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  border: 1px solid red;
}

#content {
  position: relative;
  height: 100%;
  border: 1px solid blue;
  overflow: none;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  border: 1px solid red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="content">
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>


ik heb mn div2 dan nog niet maar dat is geen probleem, wat ik wel een probleem vind is dat dit niet goed werkt bij mij in mozilla firefox.

maandag 20 december 2004 21:47

Acties:
  • MaZo
  • Registratie: Mei 2002
  • Niet online

MaZo

Ik worstel min of meer met een soortgelijk probleem, ik krijg namelijk het bottomgedeelte niet kleiner dan een hoogte of 30. Mijn bottom div moet een height van 8px krijgen, ik krijg dit echter niet (content komt wel meer naar onder, bottom blijft echter gewoon staan) voor elkaar.
Iemand een idee?

P.S. Ik vond het onnodig om weer een soortgelijk topic te openen, vandaar dat ik mijn vraag hier even stel.

maandag 20 december 2004 22:09

Acties:
  • Genoil
  • Registratie: Maart 2000
  • Laatst online: 12-11-2023

Genoil

MaZo schreef op maandag 20 december 2004 @ 21:47:
Ik worstel min of meer met een soortgelijk probleem, ik krijg namelijk het bottomgedeelte niet kleiner dan een hoogte of 30. Mijn bottom div moet een height van 8px krijgen, ik krijg dit echter niet (content komt wel meer naar onder, bottom blijft echter gewoon staan) voor elkaar.
Iemand een idee?

P.S. Ik vond het onnodig om weer een soortgelijk topic te openen, vandaar dat ik mijn vraag hier even stel.
moet je de font-face en/of line-height van die div even op 0px zetten.

maandag 20 december 2004 22:24

Acties:
  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Verwijderd schreef op maandag 20 december 2004 @ 21:24:
uit dat topic heb ik deze code kunnen halen:
[...] wat ik wel een probleem vind is dat dit niet goed werkt bij mij in mozilla firefox.
Wat werkt er dan niet goed binnen Firefox? Ik zie namelijk wanneer ik dat voorbeeld van crisp gebruikt geen problemen onder Firefox...

maandag 20 december 2004 22:41

Acties:

Verwijderd

Topicstarter
Ik bedoel dat dit is wat er fout gaat:

Afbeeldingslocatie: http://www.digitalminds.nl/tmpfiles/mozilla.gif

dit is gebeurd na een verandering in de overflow in de style bij html en content deze heb ik op auto en respectivelijk none gezet. de content div wil ik namelijk geen scrollbalk geven maar de gehele pagina wel omdat het er ander net uit ziet als of er frames zijn gebruikt en de tekst uit het content onder de top en de bottom doorschuift.

maandag 20 december 2004 22:55

Acties:
  • MaZo
  • Registratie: Mei 2002
  • Niet online

MaZo

Nevermind.

[ Voor 100% gewijzigd door MaZo op 20-12-2004 23:12 ]

maandag 20 december 2004 23:14

Acties:
  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Verwijderd schreef op maandag 20 december 2004 @ 22:41:
dit is gebeurd na een verandering in de overflow in de style bij html en content deze heb ik op auto en respectivelijk none gezet. de content div wil ik namelijk geen scrollbalk geven maar de gehele pagina wel omdat het er ander net uit ziet als of er frames zijn gebruikt en de tekst uit het content onder de top en de bottom doorschuift.
OK, jij wilt dus geen nabouw van frames en dat is de oplossing van crisp wel. Ik had je nog verder opweg willen helpen met deze link van Anne waar ook een aantal voorbeelden staan van het werken met 'Fixed Position'. Wat je overigens ook nog kan doen is:
[list]
• Zoeken naar 'CSS header content footer of
• Googlen naar 'CSS header content footer


Verder kan je nog eens kijken naar de css site van glish of naar de 'Box Lessons bij The Noodel Incident.
Pagina: 1
Reageer