Toon posts:

[CSS] Achtergrond schuift omhoog

Pagina: 1
Acties:

zondag 21 januari 2007 15:52

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

Ewald !

Topicstarter
Het is een beetje een vaag probleem... Zelf er ook nog niet achter wat er fout gaat..
Een achtergrond van een div die ik right top heb gealigned schuift achter een andere, waardoor je in FF deze achtergrond er niet meer is; dit probleem doet zich niet voor in IE.
Hier een stukje 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

html, body {
    background:url(images/bg.jpg) repeat-y 50% 0;
    padding:0;
    margin:0;
    font-family:Verdana;
    font-size:11px;
    line-height:13px;
    color:#FFFFFF;
    height:100%;
    }
#wrapper {
    width:900px;
    margin:0 auto;
    background:url(images/bg.jpg) repeat-y 50% 0;
    height:auto;
/*  background:url(images/wrapper-bg.jpg) repeat-y;*/
    }
#topnote {
    height:18px;
    width:900px;
    background:url(images/topnote.jpg);
    }
#header-1 {
    height:33px;
    width:900px;
    background:url(images/header-1.jpg) no-repeat;
    }
#header-2a {
    width:339px;
    height:78px;
    background:url(images/header-2a.jpg) no-repeat;
    float:left;
    }
#header-2b {
    width:561px; 
    height:78px;
    background:url(images/header-2b.jpg) no-repeat;
    float:left;
    }
#header-3 {
    width:900px;
    height:142px;
    float:left;
    background:url(images/header-3.jpg) no-repeat;
    clear:both;
    }
#header-container {
    clear:both;
    width:900px;
    position:relative;
    height:127px;
    z-index:1;
    }
#footer {
    clear:both;
    background:url(images/footer-bg.jpg) no-repeat;
    width:900px;
    height:88px;
}
#big-box {
    background:url(images/bigbox-bg.jpg) top right no-repeat;
    width:894px;
    padding-right:6px;
    height:auto;
    }
.little-box {
    width:159px;
    height:100%;
    overflow:auto;
    background:url(images/box-bg.jpg) repeat-y;
    float:left;
    margin:4px 2px 1px 4px;
    }
.little-box-dog {
    width:159px;
    height:auto;
    background:url(images/box-bg-dog.jpg) top repeat-y;
    float:left;
    margin:4px 2px 1px 4px;
    }
*html .little-box {
    width:159px;
    height:auto;
    background:url(images/box-bg.jpg) repeat-y;
    float:left;
    margin:4px 2px 1px 3px;
    
    }
*html .little-box-dog {
    width:159px;
    height:auto;
    background:url(images/box-bg-dog.jpg) top repeat-y;
    float:left;
    margin:4px 2px 1px 4px;
    }
.little-box-header-orange-dog {
    width:159px;
    height:26px;
    background:url(images/box-header-orange-dog.jpg) no-repeat;
    }
.little-box-header-orange{
    width:159px;
    height:26px;
    background:url(images/box-header-orange.jpg) no-repeat;
    }
.little-box-header-grey {
    width:159px;
    height:26px;
    background:url(images/box-header-grey.jpg) no-repeat;
    }
.little-box-header-green {
    width:159px;
    height:26px;
    background:url(images/box-header-green.jpg) no-repeat;
    }
.little-box-header-pink {
    width:159px;
    height:26px;
    background:url(images/box-header-pink.jpg) no-repeat;
    }
.banner-right {
    background:#f4e5e7;
    width:120px;
    float:right;
    color:#000000;
    top:4px;
    position:relative;
    overflow:hidden;
    }
#column1 {
    float:left;
    width:165px;
    display:table-cell;
    }
#column2 {
    float:left;
    width:165px;
    }
#column3 {
    float:left;
    width:165px;
    }
#column4 {
    float:left;
    width:165px;
    }
#form-top {
    height:19px;
    }
#form-bottom {
    height:59px;
    width:180px;
    }
.submit-button {
    background:transparent url(images/submit-button.jpg) no-repeat;
    height:16px;
    width:41px;
    border:0;
    cursor:pointer;
    margin:0 0 0 5px;
 }
.texta {
    background:url(images/texta.jpg);
    border:1px solid #cda21b;
    font-size:9px;
    margin:0 0 2px 5px;
    width:150px;
    }

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>IkHebNiksTeDoen.nl</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

<body>
    <div id="wrapper">
        <div id="topnote"></div>
        <div id="header-1"></div>
      <div id="header-2">
            <div id="header-2a"></div>
            <div id="header-2b"><div id="form-top"></div>
              <div id="form-bottom">
                <input type="text" name="textfield" class="texta" />
                <input type="text" name="textfield2" class="texta" />
                <br />
                <input name="submit" type="submit" class="submit-button" value="          " />
              </div>
            </div></div>    
        <div id="header-3"></div>   
        <div id="big-box">
          <div class="banner-right">
            <p>deze regel (incl. de div) kan ook vervangen worden door: <br />
                <em>&lt;img src=&quot;bla.jpg&quot; class=&quot;banner-right&quot;&gt;</em></p>
            <p>Moet wel wat verder gevuld worden... Iets als dit minimaal. </p>
          </div>
          <div id="column1">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  semper. Praesent ac lorem sit amet lectus luctus egestas. Mauris a  neque. Praesent sapien. Nullam vitae purus. Suspendisse eget odio sed  nunc rutrum lacinia. Duis augue eros, blandit eget, semper sed,  venenatis condimentum, neque. Vestibulum in odio. Nulla bibendum ligula  ac sapien. Donec elementum lorem nec est. Vestibulum ut leo nec massa  varius aliquet. Proin condimentum, dolor sit amet semper pharetra,  tellus sem dictum libero, semper pellentesque diam enim sed libero.  Proin fermentum euismod quam. Mauris pulvinar. Pellentesque euismod est  sed pede. Phasellus accumsan. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Phasellus auctor mauris  vel metus. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Nulla nisl elit, ornare in, interdum in,  dignissim a, ligula. Integer fringilla. Donec non nulla. Aliquam et  ligula. Nullam augue nulla, euismod ac, elementum quis, consectetuer  eget, leo. Aenean porttitor, nisl id bibendum vulputate, justo sem  eleifend nunc, vel ultricies mi odio ac risus. Nunc placerat nunc vel  orci. Donec at urna vitae diam auctor ultricies. Nulla purus. Quisque  pulvinar purus vel lacus. Curabitur id justo. Nullam elementum tortor  et magna. </p>
          </div>
          <div id="column2">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  semper. Praesent ac lorem sit amet lectus luctus egestas. Mauris a  neque. Praesent sapien. Nullam vitae purus. Suspendisse eget odio sed  nunc rutrum lacinia. Duis augue eros, blandit eget, semper sed,  venenatis condimentum, neque. Vestibulum in odio. Nulla bibendum ligula  ac sapien. Donec elementum lorem nec est. Vestibulum ut leo nec massa  varius aliquet. Proin condimentum, dolor sit amet semper pharetra,  tellus sem dictum libero, semper pellentesque diam enim sed libero.  Proin fermentum euismod quam. Mauris pulvinar. Pellentesque euismod est  sed pede. Phasellus accumsan. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Phasellus auctor mauris  vel metus. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Nulla nisl elit, ornare in, interdum in,  dignissim a, ligula. Integer fringilla. Donec non nulla. Aliquam et  ligula. Nullam augue nulla, euismod ac, elementum quis, consectetuer  eget, leo. Aenean porttitor, nisl id bibendum vulputate, justo sem  eleifend nunc, vel ultricies mi odio ac risus. Nunc placerat nunc vel  orci. Donec at urna vitae diam auctor ultricies. Nulla purus. Quisque  pulvinar purus vel lacus. Curabitur id justo. Nullam elementum tortor  et magna. </p>
          </div>
          <div id="column3">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  semper. Praesent ac lorem sit amet lectus luctus egestas. Mauris a  neque. Praesent sapien. Nullam vitae purus. Suspendisse eget odio sed  nunc rutrum lacinia. Duis augue eros, blandit eget, semper sed,  venenatis condimentum, neque. Vestibulum in odio. Nulla bibendum ligula  ac sapien. Donec elementum lorem nec est. Vestibulum ut leo nec massa  varius aliquet. Proin condimentum, dolor sit amet semper pharetra,  tellus sem dictum libero, semper pellentesque diam enim sed libero.  Proin fermentum euismod quam. Mauris pulvinar. Pellentesque euismod est  sed pede. Phasellus accumsan. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Phasellus auctor mauris  vel metus. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Nulla nisl elit, ornare in, interdum in,  dignissim a, ligula. Integer fringilla. Donec non nulla. Aliquam et  ligula. Nullam augue nulla, euismod ac, elementum quis, consectetuer  eget, leo. Aenean porttitor, nisl id bibendum vulputate, justo sem  eleifend nunc, vel ultricies mi odio ac risus. Nunc placerat nunc vel  orci. Donec at urna vitae diam auctor ultricies. Nulla purus. Quisque  pulvinar purus vel lacus. Curabitur id justo. Nullam elementum tortor  et magna. </p>
          </div>
          <div id="column4">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  semper. Praesent ac lorem sit amet lectus luctus egestas. Mauris a  neque. Praesent sapien. Nullam vitae purus. Suspendisse eget odio sed  nunc rutrum lacinia. Duis augue eros, blandit eget, semper sed,  venenatis condimentum, neque. Vestibulum in odio. Nulla bibendum ligula  ac sapien. Donec elementum lorem nec est. Vestibulum ut leo nec massa  varius aliquet. Proin condimentum, dolor sit amet semper pharetra,  tellus sem dictum libero, semper pellentesque diam enim sed libero.  Proin fermentum euismod quam. Mauris pulvinar. Pellentesque euismod est  sed pede. Phasellus accumsan. Vestibulum ante ipsum primis in faucibus  orci luctus et ultrices posuere cubilia Curae; Phasellus auctor mauris  vel metus. </p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. Nulla nisl elit, ornare in, interdum in,  dignissim a, ligula. Integer fringilla. Donec non nulla. Aliquam et  ligula. Nullam augue nulla, euismod ac, elementum quis, consectetuer  eget, leo. Aenean porttitor, nisl id bibendum vulputate, justo sem  eleifend nunc, vel ultricies mi odio ac risus. Nunc placerat nunc vel  orci. Donec at urna vitae diam auctor ultricies. Nulla purus. Quisque  pulvinar purus vel lacus. Curabitur id justo. Nullam elementum tortor  et magna. </p>
          </div>
      </div>
        <div id="footer"></div>
    </div>
</body>
</html>
gaat om zo'n klassieke spelletjes site.
url http://new.ikhebnikstedoen.nl

PS: titel is nu een beetje vaag, maar eerst was ik er achter gekomen dat die gealigned achtergrond naar right top ergens anders achter schoot, maar kan hem nu nergens meer vinden met de Firefox add-on Aardvark..

zondag 21 januari 2007 18:14

Acties:

Verwijderd

die hele plemp met code hier gooien is een beetje onoverzichtelijk :P..
Misschien dat je met z-index iets voor elkaar kan krijgen?
anders werkt het misschien om het plaatje in 2 stukken te knippen en het onderste stuk in de div te doen die over het plaatje heen valt.

zondag 21 januari 2007 19:16

Acties:
  • daniëlpunt
  • Registratie: Maart 2004
  • Niet online

daniëlpunt

monkey's gone to heaven

Je gebruikt height in je body. Voor Firefox is dat ook die hoogte. Daar moet je min-height van maken, en gewoon height voor maken Internet Explorer.
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