Toon posts:

[css] zoveelste ff wel ie niet topic, container height.

Pagina: 1
Acties:
  • 41 views sinds 30-01-2008

vrijdag 25 november 2005 15:13

Acties:
  • Predje
  • Registratie: December 2002
  • Laatst online: 03-03-2025

Predje

Topicstarter
Hey allemaal...

Ik ben bezig een div te maken met ronde randen en een mooi kadertje.
In ff is het me al gelukt;
http://www.request-design.nl/wesley/rounded_corners.html
Echt nemen de zijkanten in IE de hoogte niet over :(
ik heb voor ie een aparte css code (gevonden in een ander topic hier op GoT)
Geef ik voor ie gewoon een vast aantal pixels op dan werkt het wel goed... heel raar.

de css voor firefox
code:
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

.header {
position: relative;
border: 2px solid #FFFFFF;
background: #F1F1F1;
padding: 0px;
width: 800px;
height: auto;
}

.top_mid {
position: absolute;
z-index: 1;
background: url("top_mid.gif") repeat-x top center;
height: 18px;
width: auto;
top: 0px;
left: 20px;
right: 19px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.bottom_mid {
position: absolute;
z-index: 2;
background: url("bottom_mid.gif") repeat-x bottom center;
height: 18px;
width: auto;
bottom: 0px;
left: 20px;
right: 19px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.left_mid {
position: absolute;
z-index: 3;
background: url("left_mid.gif") repeat-y center left;
top: 0px;
bottom: 0px;
width: 20px;
height: auto;
left: 0px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.right_mid {
position: absolute;
z-index: 4;
background: url("right_mid.gif") repeat-y center right;
top: 0px
bottom: 0px;
width: 19px;
height: 100%;
right: 0px;
left: 781px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.corner_top_left {
position: absolute;
z-index: 99;
left: 0px;
width: 20px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_top_left.gif") no-repeat top left;
padding: 0px; 
}

.corner_top_right {
position: absolute;
z-index: 98;
right: 0px;
width: 19px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_top_right.gif") no-repeat top right;
padding: 0px; 
}

.corner_bottom_left {
position: absolute;
z-index: 97;
left: 0px;
bottom: 0px;
width: 20px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_bottom_left.gif") no-repeat bottom left;
padding: 0px; 
}

.corner_bottom_right {
position: absolute;
z-index: 96;
right: 0px;
bottom: 0px;
width: 19px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_bottom_right.gif") no-repeat bottom right;
padding: 0px; 
}

.header_content {
position: relative;
z-index: 100;
border: 0px solid;
padding: 0px;
text-align: left;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}


en de html + css voor IE (html ook voor FF)
code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>HTML</title>
  <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
  <link href="header.css" rel="stylesheet" type="text/css">

  <!--[if IE]>
   <style type="text/css">
   /*<![CDATA[*/ 

.header {
position: relative;
border: 2px solid #FFFFFF;
background: #F1F1F1;
padding: 0px;
width: 800px;
height: 60px;
}

.top_mid {
position: absolute;
z-index: 1;
background: url("top_mid.gif") repeat-x top center;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.bottom_mid {
position: absolute;
z-index: 2;
background: url("bottom_mid.gif") repeat-x bottom center;
height: 18px;
width: 100%;
bottom: 0px;
left: 0px;
right: 0px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.left_mid {
position: absolute;
z-index: 3;
background: url("left_mid.gif") repeat-y center left;
top: 0px;
bottom: 0px;
width: 20px;
height: 100%;
left: 0px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.right_mid {
position: absolute;
z-index: 4;
background: url("right_mid.gif") repeat-y center right;
top: 0px
bottom: 0px;
width: 19px;
right: 0px;
left: 781px;
border: 0px solid;
margin: 0px;
padding: 0px;
}

.corner_top_left {
position: absolute;
z-index: 99;
left: 0px;
width: 20px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_top_left.gif") no-repeat top left;
padding: 0px; 
}

.corner_top_right {
position: absolute;
z-index: 98;
right: 0px;
width: 19px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_top_right.gif") no-repeat top right;
padding: 0px; 
}

.corner_bottom_left {
position: absolute;
z-index: 97;
left: 0px;
bottom: 0px;
width: 20px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_bottom_left.gif") no-repeat bottom left;
padding: 0px; 
}

.corner_bottom_right {
position: absolute;
z-index: 96;
right: 0px;
bottom: 0px;
width: 19px;
height: 18px;
border: 0px solid;
margin: 0px;
background: url("corner_bottom_right.gif") no-repeat bottom right;
padding: 0px; 
}

.header_content {
position: relative;
z-index: 100;
border: 0px solid;
padding: 0px;
text-align: left;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}

   /*]]>*/
   </style>
<![endif]-->

 </head>
 <body>

<div class="header">

<div class="top_mid"></div>

        <div class="corner_top_left"></div>

            <div class="left_mid"></div>

                <div class="corner_bottom_left"></div>


        <div class="corner_top_right"></div>

            <div class="right_mid"></div>

                <div class="corner_bottom_right"></div>

<div class="bottom_mid"></div>



    
    <div class="header_content">

                        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sollicitudin, dolor non iaculis hendrerit, mi massa congue lectus, interdum vestibulum sapien nisi aliquet metus. In sed nisi sit amet augue rutrum consectetuer. Etiam eget enim. Vivamus eros risus, porttitor at, egestas at, eleifend vel, dolor. Sed tincidunt luctus libero. Vestibulum lectus nisi, porta vitae, malesuada ut, dignissim vitae, nulla. Quisque id nulla in eros molestie viverra. Aliquam vulputate lectus in tortor. Vivamus turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ullamcorper nunc eu mi. Proin risus urna, tempus a, mollis nec, ullamcorper sed, justo. Pellentesque leo mauris, ullamcorper non, varius eget, blandit at, augue. Aliquam laoreet metus non tortor.

Morbi nec elit et nisi mollis egestas. Nam eu est. Etiam pulvinar est eu velit. Integer at nisl. Etiam eu sem at orci consectetuer cursus. Proin enim. Aenean urna lorem, egestas mollis, vehicula vel, euismod et, sem. Vestibulum lacus ipsum, ullamcorper vitae, venenatis non, sollicitudin in, felis. Donec dictum. Ut odio. Nunc vehicula mauris. Nunc nibh. Fusce ultrices tempor mauris. Integer rutrum eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


    </div>

</div>

</body>
</html>


Iemand mie helpie?

vrijdag 25 november 2005 15:27

Acties:
  • Michali
  • Registratie: Juli 2002
  • Laatst online: 22-03 18:12

Michali

Ik ga je complete source niet doornemen en debuggen, dat is een beetje te veel van het goede, maar ik wil wel een tip geven. Ik zou het midden gedeelte gewoon nesten met daarin de tekst. Iets als dit krijg je dan:
code:
1
2
3
4
5
6
7

<div id="box">
  <div id="top"><div id="top-left"><div id="top-right"></div></div></div>
  <div id="center"><div id="center-left"><div id="center-right">
    content
  </div></div></div>
  <div id="bottom"><div id="bottom-left"><div id="bottom-right"></div></div></div>
</div>

Dan hoef je je ook niet druk te maken over de hoogt van de middenstukken. Die rekken namelijk gewoon mee op met de tekst.

Noushka's Magnificent Dream | Unity

vrijdag 25 november 2005 15:29

Acties:
  • Creepy
  • Registratie: Juni 2001
  • Laatst online: 23:32

Creepy

Tactical Espionage Splatterer

Predje schreef op vrijdag 25 november 2005 @ 15:13:
Iemand mie helpie?
Graag, maar niet op deze manier ;)

Naast dat je vergeet aan te geven wat je nu zelf precies hebt geprobeerd en wat daar niet mee lukte en alleen de relevante (dus niet alle!) code geeft zit je ook nog in het verkeerde subforum aangezien CSS in Webdesign & Graphics hoort en niet in Programming & Webscripting.

Maar omdat er nogal wat info mist en je een gigantische lap code post sluit ik je topic. Je kan het opnieuw openen in Webdesign & Graphics maar let dan wel even op de punten die ik heb aangegeven EN op het FAQbeleid topic van Webdesign & Graphics

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

Dit topic is gesloten.