Positioneren en IE

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark D

Mark D

24/02/2007 12:50:00
Quote Anchor link
Ik ben nou een nieuwe layout aan het maken voor mijn site. De layout kun je vinden op http://darkmdmn.nl/V2/

Het probleem is de plaatsen van div's in IE. Het ziet er daar echt niet uit. Kan iemand hietmee helpen?

Moet ik de codes hiet neerzetten of halen jullie die uit de bron?

P.S. Kan iemand even een screenie maken van hoe het er in IE7 uit ziet (die heb ik nl. niet)
Gewijzigd op 01/01/1970 01:00:00 door Mark D
 
PHP hulp

PHP hulp

24/04/2024 19:20:00
 
Barry

Barry

24/02/2007 12:58:00
Quote Anchor link
in IE7 verspringt alles naar onder omdat je inlog layer een eigen 'regel' gebruikt. misschien op te lossen met een float?

Groet,

Barry
 
Mark D

Mark D

24/02/2007 13:03:00
Quote Anchor link
Thnx, een float heb ik lokaal al geprobeerd, maar los helaas niks op, ik verwachte ook al problemen in IE met de login box, in IE6 komt zelfs de tekst niet naar de sidebar..... :(
 
Mark D

Mark D

24/02/2007 13:47:00
Quote Anchor link
Het loginding is opgelost met een position absolute en wat left-margin.
Hoe los ik het probleem van de bovenkant van de sidebar op (de bovenkant sluit in IE6 niet aan met het tekstgedeelte uit de sidebar)

Edit:
En de tekst moet in IE ook nog goed komen te staan....
Gewijzigd op 01/01/1970 01:00:00 door Mark D
 
Vincent

Vincent

24/02/2007 14:38:00
Quote Anchor link
Misschien handig als je de script hier post.
Dat geeft een duidelijker overzicht EN hoef ik geen moeite te doen =D ik ben een beetje lui na voetbal =P
 
Mark D

Mark D

24/02/2007 14:59:00
Quote Anchor link
Ok dan ;)

XHTML
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <!-- De titel opgeven -->
        <title>Darkmdmn.nl | I am blogging too</title>
            
        <!-- De charset opgeven -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="JS/pngfix.js"></script>
<![endif]-->

        <!-- De stylesheets importeren -->

        <style type="text/css">
            <!--
            @import url("stylesheets/normal.css");
            -->
        </style>
    </head>

    <body>
        <!-- Alles in een algemene centrerende div stoppen -->
        <div class="container">
            
            <!-- Het uitschuivende login gedeelte -->
            <div class="uitschuif">
                
                <!-- De content in de sidebar -->

                <div class="sidebar_content">
                    
                    <!-- Het kopje login -->
                    <h1 class="no_bottom_stripe">Login</h1>
                    
                    <!-- Het login formulier -->
                    <form action="" method="post">
                        <input type="text" name="username" />
                        <input type="password" name="password" />
                        <input type="submit" value="inloggen" class="submit" />

                    </form>
                </div>
                
                <!-- Het onderste afgeronde stukje -->            
                <div class="sidebar_bottom"><img src="stylesheets/arrowUp.png" alt="Inklappen" /></div>
            </div>    
            
            <!-- De div waarin alle header-zaken komen -->
            <div class="header">
                
                <!-- De sitenaam -->
                <div class="title">
                    Darkmdmn.nl
                </div>

                
                <!-- De welkomstgroet en het menu -->
                <div class="menu">
                    Welkom <span class="white">Bezoeker</span><br />
                    
                    <!-- De menu items -->
                    <ul>
                        <li>Home</li>
                        <li>Portfolio</li>

                        <li>PHP</li>
                        <li>Contact</li>
                        <li>Uitloggen</li>
                    </ul>
                    
                </div>
                
                <!-- De sidebar beginnen we in de header voor het overlappende effect -->
                <div class="sidebar">

                    
                    <!-- Het afgeronde stukje aan de bovenkant -->
                    <div class="sidebar_top"></div>    
                
                    <!-- De content in de sidebar -->
                    <div class="sidebar_content">
                    
                        <!-- De laatste blog berichten -->
                        <h1>Laatste blog berichten</h1>
                        
                        <span class="date">23-02</span>PHPhulp<br />
                        <span class="date">22-02</span>Jumpstyle<br />

                        <span class="date">21-02</span>Nieuwe site<br />
                        <span class="date">20-02</span>Eerste blog bericht<br /><br />
                        
                        <!-- De laatste PHP scripts -->
                        <h1>Laatste PHP scripts</h1>
                        
                        <span class="date">23-02</span>Teach2000 best...<br />

                        <span class="date">22-02</span>Login systeem<br />
                        <span class="date">21-02</span>Highlight code<br /><br />
                        
                        <!-- Een snel overzichtje van de statistieken -->
                        <h1>Statistieken</h1>
                        
                        Bezoekers:        14<br />
                        Hits:            64
                        
                        <div class="sidebarSpacer"></div>

                        
                    </div>
                    
                    <!-- Het onderste afgeronde stukje -->            
                    <div class="sidebar_bottom"></div>
                    
                </div>
                
            </div>
            
            <!-- De inhoud van de pagina -->
            <div class="content">
                <h1>Lorem ipsum</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vehicula feugiat mauris. Praesent cursus cursus orci. Fusce ornare accumsan turpis. Aenean orci. Suspendisse potenti. Duis semper pretium libero. Donec neque velit, faucibus id, tincidunt in, varius eu, nisi. Etiam rhoncus justo dignissim justo. Integer nisl massa, hendrerit sed, hendrerit id, vehicula eget, nulla. Aliquam nulla diam, accumsan ut, volutpat sed, mollis eget, eros. Cras quis elit. Nulla semper, neque sit amet varius cursus, risus massa facilisis metus, et convallis dolor erat at diam. Etiam felis. </p>

                
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae arcu. Aenean orci. Proin tempor eros. Suspendisse at arcu eu turpis ultrices vehicula. Phasellus semper eros id risus. Vestibulum congue augue. Nullam varius felis vitae leo. Nullam adipiscing eros ut tellus. Nam aliquet est eu urna. Donec vel neque sed turpis ultrices elementum. </p>
                
                <p>Nunc sollicitudin nisl eu nulla. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel pede. Praesent eu urna vel pede malesuada varius. Fusce enim sem, varius quis, fringilla at, placerat sit amet, nisi. Ut aliquet. Quisque dapibus est sed nisi. Vestibulum gravida pulvinar lectus. Nam pretium mauris euismod neque. Nam lacus eros, malesuada a, sodales in, dignissim hendrerit, mi. </p>
                
                <p>Aliquam id nisi eget nulla lacinia cursus. Maecenas viverra, quam sed dictum aliquam, ante orci pharetra nulla, vel fringilla quam enim eu tortor. Curabitur sit amet nibh. Mauris consectetuer egestas lorem. Nullam vulputate auctor lorem. Ut sit amet tortor suscipit eros vehicula molestie. Etiam ornare, nisi sed venenatis laoreet, libero libero porta dui, eu mollis neque neque in nibh. Vestibulum sollicitudin neque condimentum mauris. In mattis ligula vitae enim. Nulla facilisi. Proin at tellus. Quisque nec lectus vitae metus rutrum commodo. Morbi ultrices dui et tellus. Duis vitae felis ut turpis imperdiet dictum. Nulla et nisl eget massa vehicula nonummy. Praesent auctor, mi at ultrices vestibulum, odio purus mattis purus, quis sagittis augue enim a velit. Cras congue, velit in cursus nonummy, sem diam accumsan nulla, bibendum bibendum justo erat quis tellus. </p>
                
                <p>Donec nulla. Morbi nunc dolor, aliquet a, commodo eu, dignissim rhoncus, felis. Nam quam felis, dapibus sit amet, congue vel, porta sed, lorem. Fusce pretium interdum justo. Nam aliquet. Sed feugiat eros eu turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pulvinar, tortor a porttitor facilisis, erat odio ornare ante, ac semper velit est et quam. Mauris scelerisque congue velit. Nullam pulvinar. </p>
            </div>
            
            <!-- De footer -->
            <div class="footer">

                Op de layout en teksten van deze site is auteursrecht verleend. Lees de <a href="#">regels</a> om scripts te gebruiken en te publiceren
            </div>
            
        </div>
    </body>
</html>


CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
* {
    margin: 0px;
    padding: 0px;
}


/* De algemene achtergrond */
body {
    background-color: #e1e1e1;
    
    font-family: arial;
    font-size: 0.9em;
    color: #3d3f58;
}


/* De div waar alle elementen in zitten */
.container {
    width: 770px;
    margin: 0px auto;
    background-color: #fff;
}


/* De achtergrond-stijl voor de header */
.header {
    background-image: url("headerBackground.jpg");
    background-repeat: repeat-x;
    
    height: 126px;
    width: 770px;
    padding: 25px 0px;
    
    display: block;
}


/* De sitenaam komt hierin */
.title {
    background-image: url("headerStripes.jpg");
    background-repeat: no-repeat;
    
    padding-top: 10px;
    padding-left: 30px;
    margin-left: 5px;
    
    font-size: 2.0em;
    font-weight: bold;
    color: #f3f3f3;
}

.uitschuif {
    float: right;
    width: 172px;
    position: absolute;
    margin-left: 597px;
}


/* De welkomstgroet en het menu */
.menu {
    background-image: url("littleMenuStripe.jpg");
    background-repeat: no-repeat;
    background-position: bottom left;
    
    margin-top: 64px;
    padding-left: 8px;
    
    line-height: 1.5em;
    color: #dbdbdb;
}

.menu span.white {
    font-weight: bold;
    color: #fff;
}

.menu li {
    list-style-type: none;
    
    margin-right: 50px;
    float: left;
}


/* De zijbalk */
.sidebar {
    padding-left: 10px;
    height: 400px;
    float: right;
    width: 172px;
}

/* De bovenkant met de afgeronde hoeken */
.sidebar_top {
    background-image: url("sideBarTop.png");
    background-repeat: no-repeat;

    height: 12px;
    width: 170px;
}

/* Het deel waar de tekst in komt */
.sidebar_content {
    background-image: url("sideBarBackground.png");
    background-repeat: repeat-y;
    
    padding: 0px 10px;
}

/* De kopjes in het content gedeelte van de sidebar */
.sidebar_content h1 {
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    
    border-bottom: 1px solid #3d3f58;
    
    margin-bottom: 3px;
}

/* De kopjes in het content gedeelte van de sidebar */
.sidebar_content h1.no_bottom_stripe {
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    
    border-bottom: none;
    
    margin-bottom: 3px;
}

/* De datum bij laatste blog berichten in het grijs */
.sidebar_content .date {
    color: #c1c1c1;
    font-size: 0.7em;
    
    margin-right: 5px;
}

/* Alles tussen de form tags in de sidebar centreren */
.sidebar_content form {
    text-align: center;
}

/* De inputs stylen in de sidebar */
.sidebar_content input {
    margin-top: 5px;
    width: 130px;
    
    background-color: #fff;
    border: 1px solid #3d3f58;
}

/* De submit button er anders laten uitzien */
.sidebar_content input.submit {
    margin-top: 5px;
    margin-bottom: 8px;
    width: 80px;
    
    background-color: #dbdbdb;
    border: 1px solid #3d3f58;
}

/* De div om de sidebar wat uit te rekken */
.sidebarSpacer {
    height: 130px;
}

/* De onderkant met de afgeronde hoeken */
.sidebar_bottom {
    background-image: url("sideBarBottom.png");
    background-repeat: no-repeat;
    
    height: 50px;
    width: 170px;
    
    text-align: center;
}

/* Het content */
.content {
    width: 550px;
    padding: 20px;
    
    text-align: justify;
}

/* De h1's in de content */
.content h1 {
    margin-bottom: 5px;
    
    font-size: 1.2em;
    text-align: right;
    
    border-bottom: 1px solid #3d3f58;
}

.content p {
    margin-bottom: 1em;
}

/* De footer */
.footer {
    clear: both;
    background-color: #3d3f58;
    font-size: 0.6em;
    text-align: center;
    
    color: #fff;
}
 
Vincent

Vincent

24/02/2007 15:16:00
Quote Anchor link
Ik kan in de fouten hier niet zien xD In IE7 doet hij het perfect xD
 
Mark D

Mark D

24/02/2007 15:33:00
Quote Anchor link
Ik heb maar even een plaatje geupload om de fouten te kunnen laten zien aan mensen zonder IE6:

Afbeelding
 
Mark D

Mark D

24/02/2007 17:10:00
Quote Anchor link
Weer eens probleempje opgelost, nu blijft alleen het content gedeelte nog over wat niet naast de sidebar wil shuiven. Waarschijnlijk komt dit omdat de sidebar in de header start en de header om de sidebar heenrekt waardoor de header div pas eindigt ergens onderaan het scherm. Er moet dan denk ik iets met overflow gebeuren ofzo?

Edit:
Als ik oveflow op hidden zet komt de tekst wel goed te staan alleen is dan de sidebar weg. Een andere property van overflow wil ook niet helpen.
Gewijzigd op 01/01/1970 01:00:00 door Mark D
 
Vincent

Vincent

24/02/2007 17:41:00
Quote Anchor link
maak het tekstvak is een stuk minder breed(met de overflow hiddenofniet), dan kan je kijken of hij er dan naast staat. Als hij er dan naast staat maak je hem steeds een stukje breder tot het maximale breedte en dan zit hij goed =]
 
Mark D

Mark D

25/02/2007 11:59:00
Quote Anchor link
Ik heb het minder breed gemaakt, helpt niks. Het probleem zit hem in de header. Zoals je kunt ziet staat de div van de sidebar in de header div. In IE rekt de header div daarom om de sidebar div heen en krijg je dus een header div van ongeveer 600px hoog. Hierdoor komt de content zo laag.

De oplossing is dan denk ik op de een of andere manier de header niet laten meerekken met zijn inhoud??

Edit:
Met wat position absolutes enzo is het nou opgelost, alleen zit ik nog met het probleem van .png's als achtergronden in CSS. Hoe fix ik die. Een gewone PNG-fix zorgt alleen voor goede png's in de IMG tags. Maar ik heb ze als achtergronden.....
Gewijzigd op 01/01/1970 01:00:00 door Mark D
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.