Pixel in % layout probleem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Frank

Frank

01/09/2007 16:04:00
Quote Anchor link
Zie volgende bericht
Gewijzigd op 01/01/1970 01:00:00 door Frank
 
PHP hulp

PHP hulp

23/11/2024 23:57:28
 
Frank

Frank

01/09/2007 16:07:00
Quote Anchor link
Ik ben bezig met mijn layout 100% over het beeldscherm te krijgen. Dat gaat opzich best goed in FF maar in IE heb ik een pixel probleem (had ik eerst ook in FF maar dat heb ik opgelost met padding). hier mijn documenten (resultaat: www.grafikus.nl/test )

-------------------------------
style.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
@charset "UTF-8";
/* CSS Document */

body {
    margin:0;
    padding:0;
    background:#000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    line-height:14px;
    color:#FFF;
    }


a.menu:link {color: #FFF; text-decoration:none;}
a.menu:visited {color: #FFF; text-decoration:none;}
a.menu:hover {color: #f5921e; text-decoration:none;}
a.menu:active {color: #FFF; text-decoration:none;}

#logo {
    background:URL("images/logo.jpg") no-repeat;
    height:95px;
    width:100%;
    margin:0 0 10px 0;
    }
    
#menu {
    height:20px;
    width:96%;
    text-align:left;
    font-size:12px;
    font-weight:bold;
    margin:0 0 40px 0;
    padding:0 2% 0 2%;
    }
    
#inhoud {
    padding:0;
    height:100%;
    width:100%;
    padding:0 0 0 0;
    }

#submenu {
    background:#666666;
    padding:0 1% 1% 1%;
    width:16%;
    border: 1px #f5921e solid;
    border-top:0;
    color:#f4f4f4;
    font-size:12px;
    line-height:40px;
    font-weight:bold;
    float:left;
    margin:0 0 0 2%;
    }

#context{
    width:50%;
    height:100%;
    float:left;
    margin:0;
    margin: 0 2% 0 2%;
    border:1px #FFF solid;
    padding:2%;
    border-top:0;
    }

#extra {
    float:left;
    width:18%;
    height:400px;
    }
    

#inloggen {
    background:#666666;
    float:left;
    width:92%;
    padding:4% 4% 4% 4%;
    border:#f5921e 1px solid;
    border-top:0;
    color:#f4f4f4;
    font-size:12px;
    }

#domeincheck {
    background:#666666;
    float:left;
    width:92%;
    padding:4% 4% 4% 4%;
    border:#f5921e 1px solid;
    border-top:0;
    color:#f4f4f4;
    font-size:12px;
    }
    
    
#headerbox {
    padding:0;
    margin:0;
    height:35px;
    width:100%;
    }
        

#header {
    background:URL("images/gradient.jpg") repeat-x;
    float:left;
    padding:14px 1px 0 1px;
    height:21px;
    width:18%;
    text-align:center;
    color:#000;
    font-size:12px;
    font-weight:bold;
    margin: 0 0 0 2%;
    border: 0;
    }
    
#header2 {
    background:URL("images/gradient2.jpg") repeat-x;
    float:left;
    padding:14px 1px 0 1px;
    height:21px;
    width:54%;
    text-align:center;
    color:#000;
    font-size:12px;
    font-weight:bold;
    margin: 0 2% 0 2%;
    border: 0;
    }

#header3 {
    background:URL("images/gradient.jpg") repeat-x;
    padding:14px 1px 0 1px;
    float:left;
    height:21px;
    width:18%;
    text-align:center;
    color:#000;
    font-size:12px;
    font-weight:bold;
    border: 0;    
    }
    
    /*einde headerbox */
    
#header4 {
    background:URL("images/gradient.jpg") repeat-x;
    padding:14px 1px 0 1px;
    float:left;
    height:21px;
    width:100%;
    text-align:center;
    color:#000;
    font-size:12px;
    font-weight:bold;
    border: 0;    
    margin:25px 0 0 0;
    }

.textbox {border:1px solid #f5921e;background:#666666;color:#CCCCCC;font-size:10px;width:100%;}
.input {border:1px solid #f5921e;background:#666666;color:#CCCCCC;font-size:10px;width:60px;}


------------------------
index.php
------------------------
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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=UTF-8" />
<title>De Grafikus | Design en Webhorsting</title>
<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="logo"></div>
    <div id="menu">|
        <a href="#" class="menu" target="_self">Welkom</a>  |
        <a href="#" class="menu" target="_self">Even voortellen</a>  |
        <a href="#" class="menu" target="_self">Portfolio</a>  |
        <a href="#" class="menu" target="_self">Webhosting</a>  |
        <a href="#" class="menu" target="_self">Contact</a>  |
    </div>

        
    <div id="inhoud">
            <div id="headerbox">
                <div id="header">Submenu</div><div id="header2">Wie ik ben?</div><div id="header3">Inloggen</div>
            </div>
            <div id="submenu">
            <a href="#" class="menu" target="_self">Frank Martin</a><br />
            <a href="#" class="menu" target="_self">Jarno de Vries</a><br />

            <a href="#" class="menu" target="_self">Christiaan van Harten</a><br />
            </div>
            
            <div id="context">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

           </div>
               
            <div id="extra">
                <div id="inloggen">  
                    <form action="#" method="POST" name="inloggen">
                    Gebruikersnaam:<br />
                    <input class="textbox" type="text" name="gebruikersnaam" value="Gebruikersnaam" /><br /><br />
                    Password:<br />

                    <input class="textbox" type="password" name="password" value="pass" /><br /><br />
                    <input type="checkbox" name="onthouden" vale="onthouden" /> <font size="-2">Onhouden?</font>
                    <input class="input" type="submit"  class="submit" name="submit" value="Inloggen"/>
                    </form>
              
                </div>
                <div id="header4">Domein Check</div>
                <div id="domeincheck">    
                    <form action="#" method="POST" name="domeincheck">
                    Domeinnaam:<br />

                    <input class="textbox" type="text" name="domein" value="" /><br /><br />
                    <input class="input" type="submit"  class="submit" name="submit" value="Check!"/>
                    </form>
                </div>
               </div>
    </div>

            
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Frank
 
Vdleije .

vdleije .

01/09/2007 16:10:00
Quote Anchor link
Wat versta je onder een pixel probleem !?
Gewijzigd op 01/01/1970 01:00:00 door vdleije .
 
Frank

Frank

01/09/2007 16:18:00
Quote Anchor link
Zie in IE.
De headers schuiven iets verder door dan de inhoud boxen..
Dat komt doordat alles in % is behalve de borders, de inhoud boxen hebben namenlijk wel een border maar de headers er boven niet. In FF heb ik dat opgelost door de headers links en rechts 1px padding te geven.
Gewijzigd op 01/01/1970 01:00:00 door Frank
 



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.