Toon posts:

DIV Hoogte + breedte gecentreerd

Pagina: 1
Acties:
  • 133 views sinds 30-01-2008
  • Reageer

woensdag 8 oktober 2003 13:48

Acties:

Verwijderd

Topicstarter
Dag mensen,

Ik ben nu even met een nieuw projectje bezig. Na een beetje onderzoek (o.a hier op GOT en alle links en artikelen die ik heb kunnen vinden) lijkt mij het de beste keuze om dit doormiddel van DIV te doen ipv frames of tabellen.

Mijn bedoeling is dat ik 1 content-div maak waar de gehele pagina in moet komen.
Deze content-div moet precies evengroot zijn als je scherm (dus zonder scroll-balk) en resolutie onafhankelijk worden.
En de div die daaringeladen worden dienen weer in deze div te komen. (de content-div mag nooit groter worden dan je scherm.) De content-div krijgt een margin van 10px ofzo, zodat het lijkt dat de site ook in het midden van het scherm staat.

Dus in deze content div komen nog:
  • header-div
  • left-div
  • main-div
  • right-div
  • footer-div
De bedoeling is dus dat dit alles niet buiten het zichtbare scherm komt (vandaar de content-div)

Ik wil de main-div een scroll-balk geven voor wanneer de tekst groter is dan op het scherm kan.

Probleem:
(Voor zover ik heb kunnen vinden) Dient de content-div dient position=relative te hebben, wil ik dat hij goed mee resized.
Maar wanneer ik dan bijvoorbeeld left-div een height=100% geef. Knalt ie buiten de content-div.
Wanneer je de content-div position=absolute geeft. Dan blijft de left-div met height=100% mooi binnen de content div.
Alleen heb je dan een groot probleem met resizen :S

Is er een manier om dit op te lossen met css?
Dus hoe zorg ik ervoor dat de center-div mooi gecentreerd blijft, zowel hoogte als breedte, en hoe zorg ik er dan voor dat mijn inhoud (header-div, left-div, right-div, footer-div) niet buiten deze content-div komt!

Ik hoop dat ik het een beetje duidelijk hebben kunnen uitleggen wat het probleem is.

Ik dank u

(AUB geen geflame van search etc.. Want dat is het eerste wat ik uitgebreid gedaan heb. Alleen een soortgelijk probleem heb ik nog nergens kunnen vinden!)

woensdag 8 oktober 2003 14:39

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:21

crisp

Devver

Pixelated

verwacht geen wonderen met dit soort constructies (Opera bakt er al niets van bijvoorbeeld), maar deze doet het hier wel goed in IE en Mozilla:

HTML:
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

<html>
<head>
<title>test</title>
<style type="text/css">

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

body {
  padding: 10px;
  background-color: #000000;
}

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

#content {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#innercontainer {
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

#left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100%;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#main {
  height: 100%;
  margin-left: 100px;
  margin-right: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
  overflow: auto;
}

#right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100%;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

</style>
<body>
<div id="content">
  <div id="header">header</div>
  <div id="innercontainer">
    <div id="left">left</div>
    <div id="main">main<br /><br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
      content hier<br />
    </div>
    <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>

Intentionally left blank

woensdag 8 oktober 2003 15:09

Acties:

Verwijderd

Topicstarter
Dank je voor je reply.

Grotendeels komt je code overeen met wat ik ook al had.
alleen dit had ik anders/niet:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

body.html {
  margin: 0px;
  padding: 0px;
  height: 100%;
  [b]overflow: hidden;[/b]
}

body {
  padding: 10px;
  background-color: #000000;
}

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

Waar dient dat [b]overflow: hidden;[b] voor?
En waarom die body.html en body apart?
En een div.body? Ik zie deze nergens aangeroepen worden in de html code. (behalve body)
verwacht geen wonderen met dit soort constructies (Opera bakt er al niets van bijvoorbeeld), maar deze doet het hier wel goed in IE en Mozilla:
Wordt dit niet goed ondersteunt? Ik meende dat CSS ondertussen juist wel goed ondersteunt wordt door alle brouwers (dat is 1 van de redenen waarom ik voor CSS heb gekozen)

ik dank u :D

Ik ga dit zodra ik thuis ben meteen uitproberen :D

woensdag 8 oktober 2003 15:13

Acties:

Verwijderd

Verwijderd schreef op 08 oktober 2003 @ 15:09:

code:
1

body.html {

Waar dient dat [b]overflow: hidden;[b] voor?
En waarom die body.html en body apart?
En een div.body? Ik zie deze nergens aangeroepen worden in de html code. (behalve body)
Er staat body, html en div, body. De komma geeft aan dat de bijbehorende rules voor allebei de elementen gelden.
Overflow bepaalt wat er met de content die buiten een element valt gebeurd, scrollen, (on)zichtbaar, etc.

kijk hier maar eens :
http://www.w3.org/TR/CSS21/indexlist.html

woensdag 8 oktober 2003 15:19

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:21

crisp

Devver

Pixelated

Verwijderd schreef op 08 oktober 2003 @ 15:09:
Dank je voor je reply.

Grotendeels komt je code overeen met wat ik ook al had.
alleen dit had ik anders/niet:

code:
1

knip

Waar dient dat [b]overflow: hidden;[b] voor?
En waarom die body.html en body apart?
En een div.body? Ik zie deze nergens aangeroepen worden in de html code. (behalve body)
let op, het is geen punt (zoals een classverwijzing), maar een komma - je kan op die manier styles aan meerdere elementen tegelijk toekennen.
De overflow is wellicht overbodig, maar ik kies er meestal voor dat toch expliciet op te geven.

de box-sizing zou Mozilla en Opera moeten dwingen het IE box-model te gebruiken, anders gaan die browsers de mist in door de paddings en borders. In Mozilla werkt dat goed, in Opera blijkbaar (nog) niet helemaal.
[...]

Wordt dit niet goed ondersteunt? Ik meende dat CSS ondertussen juist wel goed ondersteunt wordt door alle brouwers (dat is 1 van de redenen waarom ik voor CSS heb gekozen)
[...]
zoveel browsers, zoveel bugs en nog-niet-volledig geimplementeerde features.
Als IE min-height en max-height zou ondersteunen, en gewoon een element goed zou kunnen sizen als je een top en bottom property opgeeft, dan was ons leven al een stuk eenvoudiger...

De enige manier om te bepalen of een oplossing acceptabel is, is door te testen in alle browsers die je wilt ondersteunen...

Intentionally left blank

Reageer