[CSS] floating div's in een andere div

Pagina: 1
Acties:

  • -Mous-
  • Registratie: Maart 2002
  • Laatst online: 24-05 02:23
Ik heb de volgende 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="content">

  <div class="box">
    <h3>titel1</h3>

    [img]"plaatje1.png"[/img]

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>

  <div class="box">
    <h3>titel2</h3>

    [img]"plaatje2.png"[/img]

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>

  <div class="box">
    <h3>titel3</h3>

    [img]"plaatje3.png"[/img]

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
    </ul>
  </div>

  <div class="clear">&nbsp;</div>

</div>

Met het volgende stylesheet:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#content {
    border : 1px solid #E9B12E;
    line-height : 1.4em;
    margin : 0px 150px 0px 20px;
    padding : 15px;
    z-index : 0;
    }
.box {
    border : 1px solid #CCCCCC;
    float : left;
    height : 500px;
    margin : 10px;
    padding : 10px;
    width : 200px;
    }
.box img {
    margin : 25px;
    }
.clear {
    clear : left;
    }


De bedoeling is dat de .box-en naast elkaar komen binnen de #content. Als je je venster kleiner maakt komen ze automagisch onder elkaar. Ze vullen dus zeg maar de breedte op van de #content. Voor zover het past.

In Mozilla heb ik geen probleem, maar in IE gaan ze er buiten lopen aan de rechter kant. Ook loopt de border van de #content niet zoals hij hoort te lopen.

Ik heb verder alleen 2 absoluut gepositioneerde div's op de pagina staan (1tje boven en 1tje rechts). Maar als ik deze weg haal is er geen verschil.

Ik loop me al een tijdje blind te staren op de code, maar er lijkt niets verkeerd (in Moz werkt het ook gewoon zoals het moet). Wat doe ik (of IE) fout? En vooral: wat doe ik er aan?

  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • -Mous-
  • Registratie: Maart 2002
  • Laatst online: 24-05 02:23
Volgens mij begrijp je me niet helemaal.

Ik bedoel meer dit:

Afbeeldingslocatie: http://picserver.org/view_image.php/PV24POTM3Z9T/picserver.png

Afbeeldingslocatie: http://picserver.org/view_image.php/UGA28936FX90/picserver.png

*clickable

De onderste is Mozilla en die doet het wel goed. De bovenste is IE en zoals je kan zien klopt er niks van.

De bedrijfsnaam staat er nu bij, maar de site url is anders. Als het moet haal ik em wel weg.

[ Voor 15% gewijzigd door -Mous- op 05-05-2004 01:17 . Reden: plaatjes clickable gemaakt. ]


  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 13:04
ok, in wat voor doctype zijn we aan het werk?? Zijn we strict.. is IE in quirks...

Daarnaast zou ik die clear div trouwens veranderen in een <br class="clear" />. Maar ik denk niet dat dat je probleem oplost...

offtopic:
(volgens mij mag je trouwens best een url naar de (niet)werkende pagina posten, die heb ik hier wel vaker gezien...)

Regeren is vooruitschuiven


  • mullah
  • Registratie: April 2000
  • Laatst online: 19-07-2025
de #content moet ook een float waarde hebben, dan blijft de gele rand goed staan

als je float: gebruikt moet je ook clear: gebruiken, dan blijven de geneste divs binnen de containing div staan

voor msie is het handig als je naast de float ook "display: inline;" gebruikt voor #content en .box, want dan worden de marges niet verdubbeld

<br clear="left" /> is beter dan <br class="clear" /> want waarom ga je een nieuwe class maken voor iets wat al in een atribuut is
nog beter is gewoon <br /> met in je stylesheet iets als
code:
1
<style>br {float:left; clear: both; display: block; margin: 0;}</style>


Maar als je mazzel hebt en je strctuur klopt is die <br /> niet meer nodig.

  • -Mous-
  • Registratie: Maart 2002
  • Laatst online: 24-05 02:23
T-MOB schreef op 05 mei 2004 @ 01:23:
ok, in wat voor doctype zijn we aan het werk?? Zijn we strict.. is IE in quirks...

Daarnaast zou ik die clear div trouwens veranderen in een <br class="clear" />. Maar ik denk niet dat dat je probleem oplost...

offtopic:
(volgens mij mag je trouwens best een url naar de (niet)werkende pagina posten, die heb ik hier wel vaker gezien...)
Dit is mijn doctype:
code:
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Strict xhtml 1.0 dus.
mullah schreef op 05 mei 2004 @ 11:54:
de #content moet ook een float waarde hebben, dan blijft de gele rand goed staan

als je float: gebruikt moet je ook clear: gebruiken, dan blijven de geneste divs binnen de containing div staan

voor msie is het handig als je naast de float ook "display: inline;" gebruikt voor #content en .box, want dan worden de marges niet verdubbeld

<br clear="left" /> is beter dan <br class="clear" /> want waarom ga je een nieuwe class maken voor iets wat al in een atribuut is
nog beter is gewoon <br /> met in je stylesheet iets als
code:
1
2
3
4
5
6
<style>
br {float:left;
clear: both;
display: block;
margin: 0;}
</style>


Maar als je mazzel hebt en je strctuur klopt is die <br /> niet meer nodig.
Als ik de #content een float waarde geef, klopt mijn marge aan de rechter kant niet meer. Ook verdwijnt in IE het hele navigatie menu-tje. 8)7 Wat inderdaad wel werkt is de border.

Die display: inline haalt helemaal niets uit. En ik wil die #content ook voor normale dingen gebruiken, niet alleen voor die boxen. Dus dan loopt dat weer niet goed.

<br clear="left" /> is volgens mij geen strict xhtml code. Ik heb er ondertussen wel een <br class="clear" /> van gemaakt, maar dat haalt inderdaad ook niets uit.

Een url kan niet (zie dit topic: [rml][ html/css] Geen CSS in Mozilla Firefox[/rml] ) want mijn css werkt niet in Mozilla.

[ Voor 6% gewijzigd door -Mous- op 22-05-2004 01:26 ]


  • mullah
  • Registratie: April 2000
  • Laatst online: 19-07-2025
maak dan even een mockup pagina met de CSS in de html souce (<style> tags anyone?)
-Mous- schreef op 05 mei 2004 @ 14:12:
[...]
Als ik de #content een float waarde geef, klopt mijn marge aan de rechter kant niet meer. Ook verdwijnt in IE het hele navigatie menu-tje. 8)7 Wat inderdaad wel werkt is de border.
Het probleem van floats is als je een element float je alles wat daarmee te maken heeft ook moet floaten, anders gaan er elementen buiten de normale flow staan waardoor in dit geval de border dus opeens verkeerd wordt... het is dus alles of niets.
Je marges kunnen dan inderdaad naar de kloten gaan, maar dat is gewoon een onvermijdelijk gevolg van die floats waar je een andere oplossing voor moet vinden, bijvoorbeeld door ook een breedte aan je element mee te geven.
-Mous- schreef op 05 mei 2004 @ 14:12:
Die display: inline haalt helemaal niets uit. En ik wil die #content ook voor normale dingen gebruiken, niet alleen voor die boxen. Dus dan loopt dat weer niet goed.
de display: inline is een overbodig element in css als je float gebruikt en hoort dus ook niets uit te halen, maar heeft als effect in msie dat de margin-left en margin-right van een box niet wordt verdubbeld ... het haalt dus zomaar per ongeluk een bug weg uit de CSS weergave van msie. (als je geen last hebt van die bug hoef je het dus ook niet te gebruiken)
-Mous- schreef op 05 mei 2004 @ 14:12:
<br clear="left" /> is volgens mij geen strict xhtml code. Ik heb er ondertussen wel een <br class="clear" /> van gemaakt, maar dat haalt inderdaad ook niets uit.
vandaar <br /> als alternatief.

[ Voor 92% gewijzigd door mullah op 05-05-2004 14:44 ]


  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 13:04
mockup

Deze lijkt het aardig te doen in IE en FF...

skip de z-index van #content en geef hem position: absolute mee...

Regeren is vooruitschuiven


  • mullah
  • Registratie: April 2000
  • Laatst online: 19-07-2025

  • -Mous-
  • Registratie: Maart 2002
  • Laatst online: 24-05 02:23
T-MOB schreef op 05 mei 2004 @ 14:49:
mockup

Deze lijkt het aardig te doen in IE en FF...

skip de z-index van #content en geef hem position: absolute mee...
Dan zit nog niet die navigatie netjes rechts. Die z-index is trouwens zodat die navigatie zeker boven de content komt te staan. Die heb ik namelijk een z-index van 1 mee gegeven.

Ik ben bang dat ik toch die #content een vaste breedte moet geven. IE kan gewoon niet met een variabele breedte overweg als er floats in zitten. :(

[ Voor 15% gewijzigd door -Mous- op 05-05-2004 16:53 ]


  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 13:04
-Mous- schreef op 05 mei 2004 @ 16:51:
[...]
Dan zit nog niet die navigatie netjes rechts. Die z-index is trouwens zodat die navigatie zeker boven de content komt te staan. Die heb ik namelijk een z-index van 1 mee gegeven.
Dit was met de code die je hier hebt gepost... Als je ff een bestandje met de volledige html (en inline styles) online zet wil ik best even prutsen :)

Een Z-index heeft btw alleen effect op elementen die absoluut gepositioneerd zijn. Zoals het er in de originele code stond was het dus overbodig. Daarnaast reageert IE vreemd op die overbodige z-index. Vergelijk maar eens mét en zonder...

Regeren is vooruitschuiven


Verwijderd

Ik zag padding in je stylesheet staan... is dit gewoon niet een IE boxmodel issue/bug...

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Laat maar.... zie doctype al staan... Is dus iets anders..

[ Voor 18% gewijzigd door Verwijderd op 05-05-2004 17:21 ]


Verwijderd

* Anne merkt op dat IE 6.0 in standard compliant mode (hier het geval) gewoon hetzelfde box model heeft.

  • -Mous-
  • Registratie: Maart 2002
  • Laatst online: 24-05 02:23
Zoals gezegd, ik kan die bestanden niet uploaden omdat die niet gaan werken ivm het probleem in mijn andere topic, wat Euronet nog niet heeft opgelost.

Hier is echter de volledige 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Master in afrekensystemen - Laag Segment kassa's</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>

<body>
<div id="main">

<div id="head">  
<h1><span>Master</span></h1>
<span>in afrekensystemen</span>
</div>

<div id="nav">
<ul>
<li><a href="/index.htm" class="current">ons bedrijf</a></li>
<li><a href="/producten.htm">producten</a></li>
<li><a href="/service.htm">service</a></li>
<li><a href="/actie.htm">actie</a></li>
<li><a href="/contact.htm">contact</a></li>
</ul>
</div>

<div id="content">
<div class="kassa">
<h3>Casio 120-CR</h3>
numeriek kasregister
[img]"images/120cr.png"[/img]
<ul>
<li>4 omzetgroepen</li>
<li>1 station numerieke printer</li>
<li>verkoperdisplay</li>
<li>multi functionele grote lade</li>
</ul>
</div>

<div class="kassa">
<h3>Casio 160-CR</h3>
numeriek kasregister
[img]"images/160cr.png"[/img]
<ul>
<li>4 omzetgroepen</li>
<li>1 station numerieke printer</li>
<li>verkoper- en klantendisplay</li>
<li>multi functionele grote lade</li>
</ul>
</div>

<div class="kassa">
<h3>Casio TE-M80S</h3>
tekstschrijvend kasregister
<ul>
<li>5-15 omzetgroepen</li>
<li>1 station thermische printer</li>
<li>Geluidloze bonafdruk</li>
<li>Numeriek verkoper- en klantendisplay</li>
<li>Drop-in systeem voor snelle bonrol wissel</li>
<li>Smalle lade</li>
</ul>
</div>

<div class="kassa">
<h3>Casio TE-M80M</h3>
tekstschrijvend kasregister
<ul>
<li>5-15 omzetgroepen</li>
<li>1 station thermische printer</li>
<li>geluidloze bonafdruk</li>
<li>numeriek verkoper- en klantendisplay</li>
<li>drop-in systeem voor snelle bonrol wissel</li>
<li>multi functionele grote lade</li>
</ul>
</div>

<div class="kassa">
<h3>Casio TE-100</h3>
[img]"images/te100.png"[/img]
<ul>
<li>24 omzetgroepen</li>
<li>1 station thermische printer</li>
<li>geluidloze bonafdruk</li>
<li>tekstschrijvend verkoperdisplay</li>
<li>draaibaar klantendisplay</li>
<li>drop-in systeem voor snelle bonrol wissel</li>
<li>multi functionele brede lade</li>
<li>dag/week rapportage</li>
<li>10 verkopers</li>
<li>elektronisch journaal</li>
</ul>
</div>

<div class="kassa">
<h3>Casio TE-2000</h3>
[img]"images/te2000.png"[/img]
<ul>
<li>24 omzetgroepen</li>
<li>2 stations thermische printer</li>
<li>geluidloze bonafdruk</li>
<li>dekstschrijvend verkoperdisplay</li>
<li>draaibaar klantendisplay</li>
<li>drop-in systeem voor snelle bonrol wissel</li>
<li>multi functionele brede lade</li>
<li>dag/week rapportage</li>
<li>15 verkopers</li>
</ul>
</div>

<div class="kassa">
<h3>Casio TK-T200</h3>
[img]"images/tkt200.png"[/img]
<ul>
<li>8 omzetgroepen</li>
<li>3 x 30 artikelen</li>
<li>vlak toetsenbord</li>
<li>1 station thermische printer</li>
<li>geluidloze bonafdruk</li>
<li>tekstschrijvend verkoperdisplay</li>
<li>draaibaar klantendisplay</li>
<li>drop-in systeem voor snelle bonrol wissel</li>
<li>multi functionele brede lade</li>
</ul>
</div>

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

</div>
</body>
</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
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
body {
    color : #3B4D7E;
    font : 80% sans-serif;
    margin : 0;
    padding : 0;
    }

#main {
    background : white;
    margin : 0;
    padding : 0;
    }

#head {
    background : white url('../logo/logo.gif') no-repeat;
    height : 100px;
    margin : 20px;
    padding : 0;
    width : 225px;
    }
#head span {
    display : none;
    }

#nav {
    background : #E9B12E;
    border-top : 1px solid #E9B12E;
    margin : 0;
    padding : 15px;
    position : absolute;
      right : 20px;
      top : 140px;
    width : 100px;
    }
#nav ul {
    list-style : none;
    margin :  0;
    padding : 0;
    }
#nav li {
    margin : 5px 0;
    padding : 0;
    }
#nav li a:link, #nav li a:visited {
    color : #3B4D7E;
    font-size : 1.2em;
    font-weight : bold;
    }
#nav li a:hover, #nav li a:visited:hover {
    color : white;
    }

#content {
    border : 1px solid #E9B12E;
    line-height : 1.4em;
    margin : 0px 150px 0px 20px;
    padding : 15px;
    }
.kassa {
    border : 1px solid #CCCCCC;
    float : left;
    height : 500px;
    margin : 10px;
    padding : 10px;
    width : 200px;
    }
.kassa img {
    margin : 25px;
    }
.clear {
    clear : left;
    }


Die #main gebruik ik niet echt in dit stylesheet. Maar ik wil er 2 gaan maken en mijn pa laten kiezen, vandaar. Als het niet wil lukken met deze ga ik het gewoon anders doen.

[ Voor 22% gewijzigd door -Mous- op 22-05-2004 01:26 ]


  • mullah
  • Registratie: April 2000
  • Laatst online: 19-07-2025
Getest in firefox 0.8, msie 6.0.2800 en opera 7.23 allemaal op winxp
de marge onderaan depagina mag je zelf nog FF lekker oplossen :)
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         Master in afrekensystemen - Laag Segment kassa's
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
color: #3B4D7E;
font: 80% sans-serif;
margin: 20px;
padding: 0;
}
#main {
float: left;
clear: none;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#head {
float: left;
clear: none;
background : #fff url('../logo/logo.gif') no-repeat;
height : 100px;
margin : 0;
padding : 0;
border: 0;
width : 225px;
}
#head span {
display : none;
}
#content {
float: left;
clear: both;
width: 100%;
margin: 20px 0 0 0;
padding: 0;
border: 0;
}
#nav {
float: right;
clear: none;
background: #E9B12E;
margin: 0;
padding: 0;
width: 130px;
border: 1px solid #E9B12E;
}
#nav ul {
list-style: none;
margin:  0;
padding: 15px;
}
#nav li {
margin: 5px 0;
padding: 0;
}
#nav li a:link, #nav li a:visited {
color: #3B4D7E;
font-size: 1.2em;
font-weight: bold;
}
#nav li a:hover, #nav li a:visited:hover {
color: white;
}
#blocks {
margin: 0 149px 0 0;
padding: 0;
border: 0;
}
#innerblocks {
float: left;
clear: none;
width: 100%;
margin: 0;
padding: 0 0 15px 15px;
border: 1px solid #E9B12E;
}
.kassa {
border: 1px solid #CCCCCC;
float: left;
clear: none;
display: inline;
height: 500px;
margin: 15px 15px 0 0;
padding: 10px;
width: 200px;
}
.kassa img {margin: 25px;}
</style>
   </head>
   <body>
      <div id="main">
         <div id="head">
            <h1><span>Master</span></h1>
            <span>in afrekensystemen</span>
         </div>
         <div id="content">
            <div id="nav">
               <ul>
                  <li><a href="/index.htm" class="current">ons bedrijf</a></li>
                  <li><a href="/producten.htm">producten</a></li>
                  <li><a href="/service.htm">service</a></li>
                  <li><a href="/actie.htm">actie</a></li>
                  <li><a href="/contact.htm">contact</a></li>
               </ul>
            </div>
            <div id="blocks">
                <div id="innerblocks">
                   <div class="kassa">
                      <h3>Casio 120-CR</h3>
                      numeriek kasregister
                      [img]"images/120cr.png"[/img] 
                      <ul>
                         <li>4 omzetgroepen</li>
                         <li>1 station numerieke printer</li>
                         <li>verkoperdisplay</li>
                         <li>multi functionele grote lade</li>
                      </ul>
                   </div>
                   <div class="kassa">
                      <h3>Casio 160-CR</h3>
                      numeriek kasregister
                      [img]"images/160cr.png"[/img] 
                      <ul>
                         <li>4 omzetgroepen</li>
                         <li>1 station numerieke printer</li>
                         <li>verkoper- en klantendisplay</li>
                         <li>multi functionele grote lade</li>
                      </ul>
                   </div>
                   <div class="kassa">
                      <h3>Casio TE-M80S</h3>
                      tekstschrijvend kasregister 
                      <ul>
                         <li>5-15 omzetgroepen</li>
                         <li>1 station thermische printer</li>
                         <li>Geluidloze bonafdruk</li>
                         <li>Numeriek verkoper- en klantendisplay</li>
                         <li>Drop-in systeem voor snelle bonrol wissel</li>
                         <li>Smalle lade</li>
                      </ul>
                   </div>
                   <div class="kassa">
                      <h3>Casio TE-M80M</h3>
                      tekstschrijvend kasregister 
                      <ul>
                         <li>5-15 omzetgroepen</li>
                         <li>1 station thermische printer</li>
                         <li>geluidloze bonafdruk</li>
                         <li>numeriek verkoper- en klantendisplay</li>
                         <li>drop-in systeem voor snelle bonrol wissel</li>
                         <li>multi functionele grote lade</li>
                      </ul>
                   </div>
                   <div class="kassa">
                      <h3>Casio TE-100</h3>
                      [img]"images/te100.png"[/img] 
                      <ul>
                         <li>24 omzetgroepen</li>
                         <li>1 station thermische printer</li>
                         <li>geluidloze bonafdruk</li>
                         <li>tekstschrijvend verkoperdisplay</li>
                         <li>draaibaar klantendisplay</li>
                         <li>drop-in systeem voor snelle bonrol wissel</li>
                         <li>multi functionele brede lade</li>
                         <li>dag/week rapportage</li>
                         <li>10 verkopers</li>
                         <li>elektronisch journaal</li>
                      </ul>
                   </div>
                   <div class="kassa">
                      <h3>Casio TE-2000</h3>
                      [img]"images/te2000.png"[/img] 
                      <ul>
                         <li>24 omzetgroepen</li>
                         <li>2 stations thermische printer</li>
                         <li>geluidloze bonafdruk</li>
                         <li>dekstschrijvend verkoperdisplay</li>
                         <li>draaibaar klantendisplay</li>
                         <li>drop-in systeem voor snelle bonrol wissel</li>
                         <li>multi functionele brede lade</li>
                         <li>dag/week rapportage</li>
                         <li>15 verkopers</li>
                      </ul>
                   </div>
                   <div class="kassa">
                      <h3>Casio TK-T200</h3>
                      [img]"images/tkt200.png"[/img] 
                      <ul>
                         <li>8 omzetgroepen</li>
                         <li>3 x 30 artikelen</li>
                         <li>vlak toetsenbord</li>
                         <li>1 station thermische printer</li>
                         <li>geluidloze bonafdruk</li>
                         <li>tekstschrijvend verkoperdisplay</li>
                         <li>draaibaar klantendisplay</li>
                         <li>drop-in systeem voor snelle bonrol wissel</li>
                         <li>multi functionele brede lade</li>
                      </ul>
                   </div>
                </div>
            </div>
         </div>
      </div>
   </body>
</html>

De structuur is een klein beetje gewijzigd omdat er hiervoor iets meer container divjes nodig zijn.
Dit was toch wel een interessant probleempje.. nu weer verder aan het echte werk :)

  • -Mous-
  • Registratie: Maart 2002
  • Laatst online: 24-05 02:23
mullah schreef op 06 mei 2004 @ 15:48:
Getest in firefox 0.8, msie 6.0.2800 en opera 7.23 allemaal op winxp
de marge onderaan depagina mag je zelf nog FF lekker oplossen :)
code:
1
heleboel code

De structuur is een klein beetje gewijzigd omdat er hiervoor iets meer container divjes nodig zijn.
Dit was toch wel een interessant probleempje.. nu weer verder aan het echte werk :)
_/-\o_

Zo te zien moet ik dus alles gaan floaten... daar ga ik nog even mee rommelen, omdat ik liever niet al mijn html aan ga passen. Zeer bedankt iig.
edit:
Ik heb inmiddels de andere stijl van de website gekozen. Daar in werkten de floats wel, omdat de pagina een statische breedte heeft.
Van mijn posts heb ik even de "layout-verneuking" weg gewerkt.

[ Voor 15% gewijzigd door -Mous- op 22-05-2004 01:28 ]


  • mullah
  • Registratie: April 2000
  • Laatst online: 19-07-2025
#blocks en #innerblocks zijn echt nodig op deze manier, heb er even aan gezeten.. als je die twee extra containers niet hebt kun je de rechter rand niet makkelijk aansluiten aan het menu lijstje..
het kan wel maar dan moet je het #nav aan het einde van de code neerzetten en/of aansluiten aan de rechterrand.. ipv de rechterrand die aan het menu vast zit.
edit:
das dus niet duidelijk... retry


dit is de enige manier om de rechterrand aan het menu vast te hebben zitten en een vaste marge van 20px rechts naast het menu te hebben

[ Voor 21% gewijzigd door mullah op 06-05-2004 17:53 ]


Verwijderd

Waarom div#nav en niet gewoon ul#nav.

* Anne ziet (nog) niet waarom je die DIV hier nodig hebt

  • mullah
  • Registratie: April 2000
  • Laatst online: 19-07-2025
Verwijderd schreef op 06 mei 2004 @ 17:53:
Waarom div#nav en niet gewoon ul#nav.

* Anne ziet (nog) niet waarom je die DIV hier nodig hebt
Anne heeft gelijk :) het moet ook wel te doen zijn met ul#nav..
Pagina: 1