Tijden veranderen
css in alle browsers
Code (php)
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
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
body {
background-color : #cccccc;
}
.header {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 5em;
border-bottom : 2px solid red;
background-color : white;
text-align : center;
}
.menu {
position : fixed;
top : 6em;
left : 1em;
padding : 1em;
border : 2px solid red;
width : 12em;
height : 19em;
background-color : white;
}
.content {
position : fixed;
top : 6em;
left : 18em;
width : 55em;
padding : 1em;
border : 2px solid red;
height : 80%;
overflow : auto;
background-color : white;
}
.login {
text-align : center;
border-bottom : 2px solid red;
position : fixed;
top : 7em;
left : 2em;
width : 12em;
height : 7em;
}
.nav {
text-align : center;
position : fixed;
top : 14em;
width : 12em;
height : 12em;
}
background-color : #cccccc;
}
.header {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 5em;
border-bottom : 2px solid red;
background-color : white;
text-align : center;
}
.menu {
position : fixed;
top : 6em;
left : 1em;
padding : 1em;
border : 2px solid red;
width : 12em;
height : 19em;
background-color : white;
}
.content {
position : fixed;
top : 6em;
left : 18em;
width : 55em;
padding : 1em;
border : 2px solid red;
height : 80%;
overflow : auto;
background-color : white;
}
.login {
text-align : center;
border-bottom : 2px solid red;
position : fixed;
top : 7em;
left : 2em;
width : 12em;
height : 7em;
}
.nav {
text-align : center;
position : fixed;
top : 14em;
width : 12em;
height : 12em;
}
dit is een header met 2 kolommen. in chrome doet ie het hardstikke mooi, maar in ie7 zet die de kolommen onder elkaar. is er een manier om dit op te lossen?
Gewijzigd op 06/02/2012 16:59:07 door Jeroen VD
toch blijft het in IE onder elkaar staan.
nu zijn de ronde hoeken, en de aangepaste scrollbar ook weg. is er een alternatief voor border-radius?
Kun je een online voorbeeldje geven, of eentje op http://cssdesk.com ? Dat werkt wat beter, zo op het eerste gezicht is er niks mis mee.
Toevoeging op 06/02/2012 17:20:20:
ok dit werkt niet
hoe laat ik dit aan jullie zien?
Gewijzigd op 06/02/2012 17:18:29 door Jeroen VD
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE
<html>
<head>
<style type="css/text">
</style>
</head>
<body>
<div id="muppet">
</div>
<div id="piggy">
</div>
</body>
</html>
<html>
<head>
<style type="css/text">
</style>
</head>
<body>
<div id="muppet">
</div>
<div id="piggy">
</div>
</body>
</html>
geen valide html ook geen overall css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">
</head>
<body>
<div class = "header">
</div>
<div class = "menu">
</div>
<div class = "content">
</div>
</body>
</html>
<head>
<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">
</head>
<body>
<div class = "header">
</div>
<div class = "menu">
</div>
<div class = "content">
</div>
</body>
</html>
@hertog jan, wat raadt jij dan aan? alle content zit in de content div, verder is het een statische pagina
Gewijzigd op 06/02/2012 18:07:06 door Jeroen VD
en ja, het is de bedoeling dat alles vast blijft staan. alle content moet in de content div komen, scrollend en wel
En online zetten bedoel ik, gewoon een HTML bestand + CSS op je FTP zetten dan dan ons even de link sturen zodat we met fireubug etc aan de slag kunnen.
nee, ik wil een header, vast
ik wil een navigatie, inlog. vast
en een content. vast
maar als er meer content is dan de grootte, dat er meescrollt.
maar dit lukt allemaal. het is puur om het ook te laten werken op ie.
btw alle code die je nodig hebt vindt je hierboven: in mijn startpost en ergens halverwege een html
En wat betreft header vast (dus dat hij mee scrollt) dan geef je je header alleen een position: fixed. en de element er in zoals naviagtie, inlog etc positioneer je binnen de header.
oudere IE heeft namelijk problemen met position: fixed;
Gewijzigd op 06/02/2012 18:59:08 door Joakim Broden