Toon posts:

[CSS]Container loopt vast onder een LIST

Pagina: 1
Acties:

zaterdag 6 januari 2007 13:09

Acties:
  • Ewald !
  • Registratie: Augustus 2004
  • Niet online

Ewald !

Topicstarter
Ok, het is een beetje vreemd probleem voor mij geworden maar kan de oorzaak niet vinden.

Omdat het om een Babelog gaat, kan ik hier ivm de regels van GoT de url niet plaatsen. Deze is dus op aanvraag ;)

Ik heb een image gallery, bestaande uti divs die in lists staan, heel ingewikkeld allemaal.
Het gaat om een 3 kolomen brede website. Hier is wat code:
Cascading Stylesheet:
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

html, body {
    background:#f3f3f3 url(images/bg.jpg) repeat-x;
    padding:0; margin:0 auto;
    font-family:Georgia, Verdana, Arial, sans-serif;
    font-size:11px;
    line-height:18px;
    color:#000000;
    cursor:default;
}
a {
    text-decoration:none;
    color:#e2007a;
    font-weight:bold;
  }
a:hover {
    text-decoration:none;
    color:#980052;
    font-weight:bold;
  }
#wrap {
    width:980px;
    margin:10px auto 0 auto;
}
#header {
    width:980px;
    height:148px;
    background:url(images/header.jpg) no-repeat;
}
#line {
    background:url(images/line.jpg) no-repeat;
    background-position:center center;
    width:957px;
    height:2px;
    margin:0 auto;
    padding:2px 0 2px 0;
    }
#container {
    width:980px;
    height:auto;
    }
#left {
    float:left;
    width:171px;
}
#right {
    float:left;
    width:171px;
}
#center {
    float:left;
    width:638px;
}
.box-left, .box-right {
    width:171px;
    height:auto;
}
.box-left-header, .box-right-header {
    width:161px;
    height:26px;
    background:url(images/box-left-header.jpg) no-repeat;
    padding-left:10px;
}
.box-left-body, .box-right-body {
    width:165px;
    height:auto;
    background:url(images/box-left-bg.jpg) repeat-y;
    font-family:Georgia, Verdana, Arial, sans-serif;
    font-size:9px;
    color:#990000;
    /*color:#666666;*/
    line-height:13px;
    text-align:center;
    padding:0 3px 0 3px;
    }
.box-left-footer, .box-right-footer {
    width:171px;
    height:13px;
    background:url(images/box-left-footer.jpg) no-repeat;
    }
.box-left-header h3 , .box-right-header h3 {
    font-family:"Andale Mono", "Monotype.com", monospace;
    font-size:11px;
    line-height:25px;
    text-transform:uppercase;
    color:#c55e9b;
    margin:0;
    }
.box-center-header {
    background:url(images/box-center-header.jpg) no-repeat;
    width:638px;
    height:15px;
}
.box-center-body {
    background:url(images/box-center-header-ads.jpg) repeat-y;
    width:638px;
    height:auto;
}
.box-center-footer {
    width:638px;
    height:22px;
    background:url(images/box-center-footer.jpg) no-repeat}
.box-center-line1 {
    background:url(images/box-center-line1.jpg) no-repeat;
    background-position:center center;
    height:3px;
    margin:0;   }
.box-center-header-ads, .box-center-header-sponsor-banner {
    background:url(images/box-center-header-ads.jpg) repeat-y;
    width:628px;
    padding:10px 0 10px 0;
    margin:0;
    text-align:center;
    height: auto;
    font-family:Georgia, Verdana, Arial, sans-serif;
    font-size:10px; line-height:11pt;
    color:#000000;
    }
.box-center-header-sponsor-banner img {
    background:#FFFFFF url(shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;  
    border-top:#eee 1px solid;
    border-left:#eee 1px solid; 
}
.box-center-header-sponsor-banner a img {
    background:none;
    border:0;
    background:#FFFFFF url(shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;  
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;     
}
.box-center-body-content {
    width:628px;
    padding:0 5px 0 5px;
    }
span.presents-text, span.presents-text a {
    color:#666666;
    }
.box-center-header-ads h1 {
    margin:0;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:#e2007a;
    font-size:25px;
    line-height:23px;
    padding:0;
    }
#main-content li {
    background:#FFFFFF url(shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;  
    border-top:#eee 1px solid;
    border-left:#eee 1px solid; 
    width:175px;
    height:175px;
    display:inline;
    position:relative;
    float:left;
    margin:0 10px 0 -10px;
    /*border:solid #b2b2b2;
    border-width:0 1px 1px 0;
    padding:3px;
    */
    /*
    -moz-border-radius:20px;
    */
}
#main-content a span, #main-content2 a span, #main-content3 a span{
/*\*/
    position:absolute;
    left:-9999px;
}
#main-content img, #main-content2 img, #main-content3 img{
    background:#FFFFFF url(shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;  
    border-top:#eee 1px solid;
    border-left:#eee 1px solid; 
}
.banner-gallery {
    text-align:center;
    }
.banner-gallery img {
    border:0;
    }
.clickarea {
    display:block;
    width:175px;
    height:175px;
    cursor:hand;
    cursor:pointer;
}

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

            <div id="center">
                <div class="box-center-header"></div>
              <div class="box-center-body">
                <div class="box-center-header-ads"><span class="presents-text"><a href="http://www.MIJNDOMEIN.com">Naughtylog</a> proudly presents</span>
                  <h1>Anya in Femme Sexy by MPL Studios</h1>

                  <div class="advertentie-kader"><a href="http://www.ietsmetporno.com/?aid=MIJNDOMEIN" target="_blank">IetsMetPorno.com</a> is a totally <strong>free service</strong>  where you find  content 
you usually have to pay for..<strong>DVD-R movies</strong>, many <strong>pictures sets</strong>, etcetera.  
            All you need is<em> a valid email address</em> (Hotmail and Yahoo are accepted) to confirm membership.<br />

            This website is 100% spam free which could be proofed with <a href="http://www.siteadvisor.com/sites/ietsmetporno.com" target="_blank">SiteAdvisor.com</a>.
          <a href="http://www.ietsmetporno.com/?aid=MIJNDOMEIN" target="_blank"><strong>
          <br />
          http://www.ietsmetporno.com. The Free Paysite! </strong></a></div></div>
                    <div class="box-center-line1"></div>
                                                    <!-- /* Gallery/Fotograaf toevoegen */ -->
                    <div class="box-center-header-sponsor-banner"><a href="http://www.MIJNDOMEIN.com
"><img src="photos/femjoy/banner.jpg" title="Tina in Tight and Toned by Femjoy" alt="Tina in Tight and Toned by Femjoy" border="0" /></a></div>
                    <div class="box-center-line1"></div>

                <div class="box-center-body-content">
                <div id="main-content">
                <ul> 
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th1.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/1.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th2.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/2.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th3.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/3.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th4.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/4.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th5.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/5.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th6.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/6.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th7.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/7.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th8.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/8.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th9.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/9.jpg" target="_blank" class="clickarea"></a></div></li>
</ul><div style="margin:0 auto 0 auto;text-align:center;width:580px;clear:both;position:relative;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse convallis magna eu augue. Nulla condimentum. Maecenas nisi urna, mattis non, imperdiet rutrum, imperdiet vitae, turpis. In vel ante nec est volutpat placerat. Integer tempor. Donec commodo, risus id posuere</div><ul><li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th10.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/10.jpg" target="_blank" class="clickarea"></a></div></li>

<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th11.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/11.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th12.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/12.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th13.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/13.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th14.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/14.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th15.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/15.jpg" target="_blank" class="clickarea"></a></div></li>
</div></ul></div>                                               <div class="box-center-footer"></div>
            </div></div>
voor en na dit laatste html zijn respectievelijk de Linker kolom en de rechter kolom

Omdat alles het eerst wel doet, maar als ik het in mijn php-script verwerk niet meer, heb ik al meerdere keren alles opnieuw gedaan. Elke keer knal ik weer tegen het probleem aan. Misschien zijn er die mij kunnen helpen..
Ik heb wat screenshots toegevoegd voor de duidelijkheid.. Zijn geblurred ;)
Afbeeldingslocatie: http://www.penis-enlarge-pills.info/in-ff.jpg
Afbeeldingslocatie: http://www.penis-enlarge-pills.info/in-ie.jpg

[ Voor 14% gewijzigd door een moderator op 06-01-2007 14:56 . Reden: URL van afbeeldingen veranderen ]

zaterdag 6 januari 2007 14:16

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

crisp

Devver

Pixelated

Omdat alles het eerst wel doet, maar als ik het in mijn php-script verwerk niet meer, heb ik al meerdere keren alles opnieuw gedaan.
Dan doe je toch iets niet goed; vergelijk de HTML output van je PHP script gewoon eens goed met die van je static pagina...

Intentionally left blank

zaterdag 6 januari 2007 14:19

Acties:
  • Ewald !
  • Registratie: Augustus 2004
  • Niet online

Ewald !

Topicstarter
ik sweer het, ik kan het niet vinden. 5x heb ik nu alles opnieuw gedaan ... :?

[ Voor 3% gewijzigd door Ewald ! op 06-01-2007 14:19 ]

zaterdag 6 januari 2007 14:22

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

crisp

Devver

Pixelated

Ewald ! schreef op zaterdag 06 januari 2007 @ 14:19:
ik szweer het, ik kan het niet vinden. 5x heb ik nu alles opnieuw gedaan ... :?
Wat je hier gepost hebt is dat de output van je PHP script of je static versie? Als ik dit in een document c/p kan ik namelijk geen probleem zien...

Gebruik je een DTD? Forceer je quirksmode? Valideerd je uiteindelijke markup?

Intentionally left blank

zaterdag 6 januari 2007 14:28

Acties:
  • Ewald !
  • Registratie: Augustus 2004
  • Niet online

Ewald !

Topicstarter
crisp schreef op zaterdag 06 januari 2007 @ 14:22:
[...]

Wat je hier gepost hebt is dat de output van je PHP script of je static versie? Als ik dit in een document c/p kan ik namelijk geen probleem zien...

Gebruik je een DTD? Forceer je quirksmode? Valideerd je uiteindelijke markup?
dit is de output van het script.
De termen die je noemt zeggen mij niets, heb zelf het script niet gescript maar snap he voldoende om het te bewerken.

edit:volgens mij toch verkeerde html |:( :@

'GOEDE' html:
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

            <div id="center">
                <div class="box-center-header"></div>
              <div class="box-center-body">
                <div class="box-center-header-ads"><span class="presents-text"><a href="http://www.MIJNDOMEIN.com">Naughtylog</a> proudly presents</span>
                  <h1>Anya in Femme Sexy by MPL Studios</h1>

                  <div class="advertentie-kader"><a href="http://www.ietsmetporno.com/?aid=MIJNDOMEIN" target="_blank">IetsMetPorno.com</a> is a totally <strong>free service</strong>  where you find  content 
you usually have to pay for..<strong>DVD-R movies</strong>, many <strong>pictures sets</strong>, etcetera.  
            All you need is<em> a valid email address</em> (Hotmail and Yahoo are accepted) to confirm membership.<br />

            This website is 100% spam free which could be proofed with <a href="http://www.siteadvisor.com/sites/ietsmetporno.com" target="_blank">SiteAdvisor.com</a>.
          <a href="http://www.ietsmetporno.com/?aid=MIJNDOMEIN" target="_blank"><strong>
          <br />
          http://www.ietsmetporno.com. The Free Paysite! </strong></a></div></div>
                    <div class="box-center-line1"></div>
                                                    <!-- /* Gallery/Fotograaf toevoegen */ -->
                    <div class="box-center-header-sponsor-banner"><a href="http://www.MIJNDOMEIN.com
"><img src="photos/femjoy/banner.jpg" title="Tina in Tight and Toned by Femjoy" alt="Tina in Tight and Toned by Femjoy" border="0" /></a></div>
                    <div class="box-center-line1"></div>

                <div class="box-center-body-content">
                <div id="main-content">
                <ul> 
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th1.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/1.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th2.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/2.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th3.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/3.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th4.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/4.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th5.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/5.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th6.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/6.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th7.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/7.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th8.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/8.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th9.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/9.jpg" target="_blank" class="clickarea"></a></div></li>
</ul><div style="margin:0 auto 0 auto;text-align:center;width:580px;clear:both;position:relative;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse convallis magna eu augue. Nulla condimentum. Maecenas nisi urna, mattis non, imperdiet rutrum, imperdiet vitae, turpis. In vel ante nec est volutpat placerat. Integer tempor. Donec commodo, risus id posuere</div><ul><li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th10.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/10.jpg" target="_blank" class="clickarea"></a></div></li>

<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th11.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/11.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th12.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/12.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th13.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/13.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th14.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/14.jpg" target="_blank" class="clickarea"></a></div></li>
<li><div style="background:#ffffff url(photos/femjoy/tina-in-tight-and-toned/th15.jpg) center no-repeat;"><a href="photos/femjoy/tina-in-tight-and-toned/15.jpg" target="_blank" class="clickarea"></a></div></li>
</div></ul></div>                                               <div class="box-center-footer"></div>
            </div></div>

(ook veranderd in TS)

[ Voor 86% gewijzigd door NMe op 06-01-2007 14:55 . Reden: Pornolinks uit code gehaald. ]

zaterdag 6 januari 2007 14:46

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

crisp

Devver

Pixelated

Je hebt geen clearing element onder de laatste list.
Wat je ook kan doen om clearing te 'forceren' in echte browsers is dit:
Cascading Stylesheet:
1
2
3

#main-content ul {
    overflow: auto;
}

Intentionally left blank

zaterdag 6 januari 2007 15:16

Acties:
  • Ewald !
  • Registratie: Augustus 2004
  • Niet online

Ewald !

Topicstarter
crisp schreef op zaterdag 06 januari 2007 @ 14:46:
Je hebt geen clearing element onder de laatste list.
Wat je ook kan doen om clearing te 'forceren' in echte browsers is dit:
Cascading Stylesheet:
1
2
3

#main-content ul {
    overflow: auto;
}
ik begon al te denken dat het zo iets was, want in dat stukje tekst wat er halverwege gepost wordt zit een clear:both..

maar bedankt, dit werkt en hiermee opgelost *O*
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 - 2025 • Hosting door TrueFullstaq