Toon posts:

[CSS] Floating divs als content meetellen

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

woensdag 16 februari 2005 22:10

Acties:

Verwijderd

Topicstarter
Ik probeer d.m.v. min-height te zorgen dat de buitenste div een hoogte heeft van 100% (viewport) tenzij de content groter is, dan moet hij deze als hoogte nemen. Maar in FireFox/IE werkt noch de minimumhoogte van 100% noch rekt hij uit samen met de floating divs, die hij blijkbaar niet als content meetelt...:
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

<style type="text/css"><!--
html { 
    margin: 0;
    height: auto;
    min-height: 100%;
}

body {
    background-color: #C0C0C0;
    font-size: 12px;
    font-family: Arial, Verdana;
    color:#000;
    margin: 0;
    height: auto;
    min-height: 100%;
}

#shadow {
    position: relative;
    width: 812px;
    margin: auto;
    background-color: #000;
    background-image:url(sshadow4.gif);
    background-repeat: repeat-y;
    height: auto;
    min-height: 100%;
}

#geheel {
    position: relative;
    width: 800px;
    margin-left: 6px;
    background-color: #000;
    background-image:url(geheel.gif);
    background-repeat: repeat-y;
    height: 100%;
}


In het geheel zitten enkel divs met float: left;
Als ik onderaan, voor de </div> tag van #shadow een aantal <br>'s zet, dan rekt hij wel uit, maar indien niet rekt hij maar tot het einde van de #top div...

Ik heb al allerlei work-around geprobeerd, maar niets is gelukt. Weet iemand een oplossing die:
1. Valideert met de stricte W3 DOCTYPE
2. Geen gebruik maakt van JavaScript

Met tables kreeg ik alles (bijna) zoals het moest, maar op aanraden van jullie (vorig topic) probeer ik het zonder tables. Helaas is het niet zo eenvoudig :/

woensdag 16 februari 2005 22:13

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

Woudloper

« - _ - »

Wellicht helpt het om nog wat na te lezen over min-height, aangezien de ondersteuning niet heel erg goed is. In het gelinkte artikel staat het één en ander goed uitgelegd...

woensdag 16 februari 2005 22:20

Acties:

Verwijderd

Topicstarter
Die pagina heb ik al gelezen, maar het maakt me zelfs niet uit dat de min-height niet werk in IE en Safari, daar kan ik desnoods later nog een kleine hack voor gebruiken. Het zou in FF moeten werken, maar dat doet het zelfs niet :(

woensdag 16 februari 2005 22:26

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Heb je misschien een voorbeeld, want ik zie sowieso helemaal geen floats :)

Daarnaast ben je wel op de hoogte wat de bedoeling is van een float en wat het gedrag daarvan is :)


Je lost het probleem waarschijnlijk wel op door op 't einde van je container div het volgende te plaatsen:

<br clear=all>

Mag je zelf nog bepalen of je dat via je CSS file wilt laten lopen (dan is de value: both ;))

[ Voor 81% gewijzigd door BtM909 op 16-02-2005 22:31 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 16 februari 2005 22:51

Acties:

Verwijderd

Topicstarter
BtM909 schreef op woensdag 16 februari 2005 @ 22:26:
Je lost het probleem waarschijnlijk wel op door op 't einde van je container div het volgende te plaatsen:

<br clear=all>
Ik had kunnen weten dat het weer zo'n simpele oplossing zou zijn :)

Dus; nu werkt de auto-hight wel (bedankt!), maar zowel in FF als IE werkt de min-height nog steeds niet... Als het in alleen FF zou werken ben ik (voorlopig) al blij :)

Edit: De floats zijn overigens het probleem niet, die werken perfect, vandaar dat ik enkel de code die van belang was heb geplakt.

[ Voor 15% gewijzigd door Verwijderd op 16-02-2005 22:53 ]

woensdag 16 februari 2005 22:52

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Verwijderd schreef op woensdag 16 februari 2005 @ 22:51:
[...]


Ik had kunnen weten dat het weer zo'n simpele oplossing zou zijn :)

Dus; nu werkt de auto-hight wel (bedankt!), maar zowel in FF als IE werkt de min-height nog steeds niet... Als het in alleen FF zou werken ben ik (voorlopig) al blij :)
Zet ff dat voorbeeld online... Wordt anders teveel gissen hoe je het wellicht zou kunnen hebben ;)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 16 februari 2005 22:57

Acties:

Verwijderd

Topicstarter
BtM909 schreef op woensdag 16 februari 2005 @ 22:52:
[...]

Zet ff dat voorbeeld online... Wordt anders teveel gissen hoe je het wellicht zou kunnen hebben ;)
Okay dan, hier is de hele code:

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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Komt nog&#8230;</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
html { 
    margin: 0;
    height: auto;
    min-height: 100%;
}

body {
    background-color: #C0C0C0;
    font-size: 12px;
    font-family: Arial, Verdana;
    color:#000;
    margin: 0;
    height: auto;
    min-height: 100%;
}

#shadow {
    position: relative;
    width: 812px;
    margin: auto;
    background-color: #000;
    background-image:url(sshadow4.gif);
    background-repeat: repeat-y;
    height: auto;
    min-height: 100%;
}

#geheel {
    position: relative;
    width: 800px;
    margin-left: 6px;
    background-color: #000;
    background-image:url(geheel.gif);
    background-repeat: repeat-y;
    height: 100%;
}

#top {
    background-image: url(banner.jpg);
    width: 800px;
    height: 150px;
    border-bottom: 1px solid #000;
}

#title {
    position: absolute;
    left: 482px;
    top: 92px;
}

#center {
    width: 498px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background-color: #FFF;  
    float:left;
}

#slogan {
    color: #000066;
    font-family: Verdana, Arial; 
    text-align: center;
    height: 20px;
    background-image:url(shadow.gif);
    background-repeat: repeat-x;
    padding-top: 8px;
    border-bottom: 1px dashed #C0C0C0;
}

#left {
    position: relative;
    width: 150px;
    color: #FFF;
    float:left;
    background-color:#004D81;
}

#right {
    position: relative;
    width: 150px;
    color: #000;
    float:left;
    background-color:#004D81;
}

#bottom {
    position: relative;
    left: inherit;
    bottom: 0;
    background: #FFF;
    width: 800px;
    height: 29px;
    float: left;
}

#bcenter {
    width: 498px;
    margin: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px dashed #C0C0C0;
    border-bottom: 1px dashed #C0C0C0;
    background-color: #FFF;
    float:left;
    height: 27px;
}

#copyright {
    margin: 0;
    color: #000066;
    font-family: Verdana, Arial;
    text-align: center;
    padding-top: 6px;
}

#bleft {
    padding-top: 7px;
}

#bright {
    padding-top: 7px;
}

#tleft {
    padding-top: 7px;
}

#tright {
    padding-top: 7px;
}

.bbox {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position: relative;
    width: 150px;
    color: #FFF;
    float:left;
    background-color:#000;
    height: 22px;
    text-align: center;
}

.hlinks {
    font-family: Verdana, Arial;
    font-weight: bold;
    text-align: center;
    margin: 0;
    height: 23px;
    padding-top: 6px;
    cursor: pointer;
}

.classover {
    background-image: url(back.gif);
}
-->
</style>
</head>

<body>
<div id="shadow">
    <div id="geheel">
        <div id="top">
            <div id="title">
            [img]"bannertext2.gif">
            </div>
        </div>
        <div[/img]
            <div id="tleft" class="bbox">
            TLEFT
            </div>
            <br><br><br>
        </div>
        <div id="center">
            <div id="slogan">
            Slogan hier
            </div>
            center
        </div>
        <div id="right">
            <div id="tright" class="bbox">
            FEATURES
            </div>
            <br><br><br>right
        </div>
        <div id="bottom">
            <div id="bleft" class="bbox">
            NAAR BOVEN
            </div>
            <div id="bcenter">
                <div id="copyright">
                Copyright © 2002 - <?php print (date ("Y")); ?> 
                </div>
            </div>
            <div id="bright" class="bbox">
            FEATURES
            </div>
        </div>
    </div>
    <br clear=all>
</div>

</body>
</html>


Hopelijk is het nu duidelijker :)

donderdag 17 februari 2005 00:06

Acties:

Verwijderd

Topicstarter
The short version is you need to use min-height and height in combination in order to get your content to be 100% of the viewport but stretch to hold content that is longer than the screen is tall. IE doesn't support min-height, however, so workarounds are needed.
Het moet dus zeker lukken... Ik zie echter niet waarom dit bij mij niet het geval is :'(

Ik heb overigens nog eens geprobeerd ook #geheel met een min-height: 100%; uit te rusten, maar dat veranderde niets.

donderdag 17 februari 2005 12:43

Acties:

Verwijderd

Topicstarter
BtM909 schreef op woensdag 16 februari 2005 @ 22:26:
Heb je misschien een voorbeeld, want ik zie sowieso helemaal geen floats :)

Daarnaast ben je wel op de hoogte wat de bedoeling is van een float en wat het gedrag daarvan is :)


Je lost het probleem waarschijnlijk wel op door op 't einde van je container div het volgende te plaatsen:

<br clear=all>

Mag je zelf nog bepalen of je dat via je CSS file wilt laten lopen (dan is de value: both ;))
Het bleek dat <br clear=all> geen geldige code is volgens W3, dus heb ik dit geprobeerd met
code:
1

<div style="clear: both; height: 0px;"></div>

Maar dit werkt weer niet in FireFox... Dan ziet hij de floating divs weer niet als content. Er moet toch een volledig correcte manier zijn om dit te doen?

[ Voor 9% gewijzigd door Verwijderd op 17-02-2005 12:44 ]

vrijdag 18 februari 2005 13:58

Acties:

Verwijderd

Topicstarter
Ik heb nog geen oplossing kunnen vinden, vandaar... *kick*

vrijdag 18 februari 2005 15:39

Acties:
  • Spruit_elf
  • Registratie: Februari 2001
  • Laatst online: 20-01 10:55

Spruit_elf

Intentionally left blank

Verwijderd schreef op donderdag 17 februari 2005 @ 12:43:
[...]


Het bleek dat <br clear=all> geen geldige code is volgens W3, dus heb ik dit geprobeerd met
code:
1

<div style="clear: both; height: 0px;"></div>

Maar dit werkt weer niet in FireFox... Dan ziet hij de floating divs weer niet als content. Er moet toch een volledig correcte manier zijn om dit te doen?
volgens mij is dat ook correct en volgens mij zou firefox dat ook correct moeten doen, ik heb igg nooit problemen gehad met clear:both; zet anders ff een testcase oid online zodat we kunnen zien wat je hebt.

Those who danced were thought to be quite insane by those who could not hear the music.

vrijdag 18 februari 2005 15:46

Acties:

Verwijderd

Verwijderd schreef op vrijdag 18 februari 2005 @ 13:58:
Ik heb nog geen oplossing kunnen vinden, vandaar... *kick*
Als je nou in body height: 100%; zet in plaats van auto?

Ik neem aan dat die sshadow4.gif een (grafisch) rand moet vormen om de inhoud heen? In dat geval kun je ook deze achtergrond in body zetten en vervolgens centreren.

Dat min-height werkt, zoals al opgemerkt, niet erg lekker in de verschillende browsers

vrijdag 18 februari 2005 20:03

Acties:

Verwijderd

Topicstarter
mrcactus schreef op vrijdag 18 februari 2005 @ 15:39:
[...]


volgens mij is dat ook correct en volgens mij zou firefox dat ook correct moeten doen, ik heb igg nooit problemen gehad met clear:both; zet anders ff een testcase oid online zodat we kunnen zien wat je hebt.
De code is precies hetzelfde gebleven als hierboven; behalve de <br clear=all> regel, die is nu <div style="clear: both; height: 0px;"></div>.

vrijdag 18 februari 2005 23:59

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:43

crisp

Devver

Pixelated

zet ook iets van content in je div; ik gebruik vaak dit:
HTML:
1

<div class="clear"><hr></div>

die hr hide ik vervolgens in CSS:
Cascading Stylesheet:
1
2
3
4
5
6

div.clear {
  clear: both;
}
div.clear hr {
  display: none;
}

UA's hoeven elementen zonder inhoud niet te renderen, vandaar...

Intentionally left blank

zaterdag 19 februari 2005 01:05

Acties:

Verwijderd

Topicstarter
crisp schreef op vrijdag 18 februari 2005 @ 23:59:
zet ook iets van content in je div; ik gebruik vaak dit:
HTML:
1

<div class="clear"><hr></div>

die hr hide ik vervolgens in CSS:
Cascading Stylesheet:
1
2
3
4
5
6

div.clear {
  clear: both;
}
div.clear hr {
  display: none;
}

UA's hoeven elementen zonder inhoud niet te renderen, vandaar...
Ik heb bij wijze van test een <hr> gezet in de DIV, maar hem niet verborgen. Maar helaas werkt het niet. De code is nu overigens wel iets anders zodat ik 100% height kon hebben in FF (helaas nog niet in IE, misschien bij IE7... :))

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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #C0C0C0;
    font-size: 12px;
    font-family: Arial, Verdana;
    color: #000;
}

#outer{
    min-height: 100%;
    margin-bottom: -29px;
    height: auto;
}

#clearfooter {
    clear: both;
    height: 0px;
}


#minHeight {
    float: left;
    width: 0px;
    height: 100%;
    margin-bottom: -29px;
}


#shadow {
    position: relative;
    width: 812px;
    margin: auto;
    background-color: #000;
    background-image:url(sshadow4.gif);
    background-repeat: repeat-y;
    height: auto;
    min-height: 100%;
}

#geheel {
    position: relative;
    width: 800px;
    margin-left: 6px;
    background-color: #000;
    background-image:url(geheel.gif);
    background-repeat: repeat-y;
    height: 100%;
}

#top {
    background-image: url(banner.jpg);
    width: 800px;
    height: 150px;
    border-bottom: 1px solid #000;
}

#title {
    position: absolute;
    left: 482px;
    top: 92px;
}

#center {
    width: 498px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background-color: #FFF;  
    float:left;
}

#slogan {
    color: #000066;
    font-family: Verdana, Arial; 
    text-align: center;
    height: 20px;
    background-image:url(shadow.gif);
    background-repeat: repeat-x;
    padding-top: 8px;
    border-bottom: 1px dashed #C0C0C0;
}

#left {
    position: relative;
    width: 150px;
    color: #FFF;
    float:left;
    background-color:#004D81;
}

#right {
    position: relative;
    width: 150px;
    color: #000;
    float:left;
    background-color:#004D81;
}

#bottom {
    position: relative;
    left: inherit;
    background: #FFF;
    width: 800px;
    height: 29px;
    float: left;
    clear:both;
}

#bcenter {
    width: 498px;
    margin: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px dashed #C0C0C0;
    border-bottom: 1px dashed #C0C0C0;
    background-color: #FFF;
    float:left;
    height: 27px;
}

#copyright {
    margin: 0;
    color: #000066;
    font-family: Verdana, Arial;
    text-align: center;
    padding-top: 6px;
}

#bleft {
    padding-top: 7px;
}

#bright {
    padding-top: 7px;
}

#tleft {
    padding-top: 7px;
}

#tright {
    padding-top: 7px;
}

.bbox {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position: relative;
    width: 150px;
    color: #FFF;
    float:left;
    background-color:#000;
    height: 22px;
    text-align: center;
}

.hlinks {
    font-family: Verdana, Arial;
    font-weight: bold;
    text-align: center;
    margin: 0;
    height: 23px;
    padding-top: 6px;
    cursor: pointer;
}

.classover {
    background-image: url(back.gif);
}

-->
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer"> 
<div id="shadow">
    <div id="geheel">
        <div id="top">
            <div id="title">
            [img]"bannertext2.gif"[/img]
            </div>
        </div>
        <div id="left">
            <div id="tleft" class="bbox">
            TLEFT
            </div>
            <br><br>links hier

            <p>links hier

        </p>
            <p>links hier

        </p>
            <p>links hier

        </p>
            <p>links hier

        </p>
            <p>links hier

        </p>
            <p>links hier

        </p>
            <p>links hier

        </div>
        <div id="center">
            <div id="slogan">
        
            </div>
            center
        </div>
        <div id="right">
            <div id="tright" class="bbox">
            FEATURES
            </div>
            <br><br><br>right
        </div>
        <div id="bottom">
            <div id="bleft" class="bbox">
            NAAR BOVEN
            </div>
            <div id="bcenter">
                <div id="copyright">
                Copyright © 2002 - <?php print (date ("Y")); ?>
                </div>
            </div>
            <div id="bright" class="bbox">
            FEATURES
            </div>
        </div>
    </div>
    <div style="clear: both; height: 0px;"></div>
</div>
<div id="clearfooter"><hr></div>
</div>
</body>
</html>

zaterdag 19 februari 2005 22:50

Acties:

Verwijderd

Topicstarter
ff weer kicken, ik vind het zelf echt niet :|

[ Voor 5% gewijzigd door Verwijderd op 19-02-2005 22:50 ]

zaterdag 19 februari 2005 23:07

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

Woudloper

« - _ - »

Verwijderd schreef op zaterdag 19 februari 2005 @ 22:50:
ff weer kicken, ik vind het zelf echt niet :|
Wat niet? Kan je wellicht aangeven wat je precies niet kan vinden? Gaat deze vraag nog stees over de 'floating divs' zoals in het subject van het topic staat?

zaterdag 19 februari 2005 23:51

Acties:

Verwijderd

Topicstarter
Ja, eigenlijk wel. Het probleem is dat de div moet strekken met de content mee, en hij telt de floating divs blijkbaar niet als content. Eerder was gebleken dat de <br clear=all> dit kon oplossen, maar omdat dit geen geldige code is zou ik liever een andere oplossing gebruiken. Helaas vind ik er geen (goede). Het lukt wel om een <br> te gebruiken, maar dan komt er een lijn bij en een scrollbar. Het lukt ook om een image te gebruiken van 1x1 pixel, maar dan wordt de bottom blijkbaar niet meegerekend bij de content |:(

[ Voor 33% gewijzigd door Verwijderd op 20-02-2005 00:03 ]

zondag 20 februari 2005 01:35

Acties:

Verwijderd

Topicstarter
IE gooit ook overal whitespace tussen blijkbaar, bij nested divs... Hoe kan ik dat voorkomen?

zondag 20 februari 2005 09:25

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

crisp schreef op vrijdag 18 februari 2005 @ 23:59:
Cascading Stylesheet:
1
2
3

div.clear hr {
  display: none;
}

UA's hoeven elementen zonder inhoud niet te renderen, vandaar...
Zou je dan niet juist visibility: hidden; moeten gebruiken omdat display: none; ervoor zorgt dat het géén box creeert en dus geen invloed meer heeft op de layout :? .

DM!

zondag 20 februari 2005 10:35

Acties:

Verwijderd

Topicstarter
JHS schreef op zondag 20 februari 2005 @ 09:25:
[...]
Zou je dan niet juist visibility: hidden; moeten gebruiken omdat display: none; ervoor zorgt dat het géén box creeert en dus geen invloed meer heeft op de layout :? .
Het ziet ernaar uit dat alles wat geen invloed heeft op de layout niet mee wordt geteld als content...

zondag 20 februari 2005 10:40

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Verwijderd schreef op zondag 20 februari 2005 @ 10:35:
[...] Het ziet ernaar uit dat alles wat geen invloed heeft op de layout niet mee wordt geteld als content...
En visibility: hidden; creeert dan ook wel een box, maar is verder onzichtbaar, transparant.

DM!

zondag 20 februari 2005 10:54

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 18:43

crisp

Devver

Pixelated

JHS schreef op zondag 20 februari 2005 @ 10:40:
[...]

En visibility: hidden; creeert dan ook wel een box, maar is verder onzichtbaar, transparant.
...maar neemt wel ruimte in ;)

En let op: het is de hr die ik display:none geef, en niet de box zelf. Dit zorgt er toch voor dat de box wel degelijk gerenderd wordt; geef 'm maar eens een hoogte en een achtergrondkleur ;)

Intentionally left blank

zondag 20 februari 2005 11:29

Acties:

Verwijderd

Topicstarter
crisp schreef op vrijdag 18 februari 2005 @ 23:59:
zet ook iets van content in je div; ik gebruik vaak dit:
HTML:
1

<div class="clear"><hr></div>

die hr hide ik vervolgens in CSS:
Cascading Stylesheet:
1
2
3
4
5
6

div.clear {
  clear: both;
}
div.clear hr {
  display: none;
}

UA's hoeven elementen zonder inhoud niet te renderen, vandaar...
Deze heb ik dus al geprobeerd, maar het werkte niet zoals het moest... In FF werden de andere divs weer niet als content meegerekend en had ik dus geen faux tables meer.

zondag 16 april 2006 13:03

Acties:
  • MadEgg
  • Registratie: Februari 2002
  • Laatst online: 22-02 20:12

MadEgg

Tux is lievvv

Even een oud topic kicken, ik heb nu hetzelfde probleem.

Ik heb een #content div, die een achtergrondkleur heeft; daarin heb ik een andere div die dan weer een witte achtergrond kleur heeft, waarin weer meerdere div's zitten voor de content.

De buitenste div rekt niet mee met de inhoud, dus zie ik de achtergrondkleur van de buitenste div helemaal niet. Waarom worden de geneste div's niet als inhoud gerekend? Is dit op te lossen?

<br clear="all' /> werkt in mijn geval ook niet, om de een of andere reden.

Tja

dinsdag 18 april 2006 10:06

Acties:
  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

En hoe moeten wij je een oplossing gaan geven als je je probleemstelling hier niet neerzet... Geef eens wat relevante code, waarmee het probleem te simuleren is. Vertel er dan ook meteen bij in welke browsers je test en welke wel of geen resultaat bieden.

En je hoeft niet perse een oud topic te kicken. Een nieuw topic aanmaken met een referentie naar deze mag ook hoor ;)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2026 • Hosting door TrueFullstaq