De PHPhulp kroeg
H3 balkjes met afgeronde hoeken
'Pepijn:
Dan heb je afbeeldingen nodig, CSS of HTML ondersteunt geen afgeronde hoeken.
Het kan met css.. Jan Koehoorn heeft er wat tuts over gemaakt geloof ik..
En anders kan het met javascript ook wel..
Google eens op: Rounded corners
'mebus:
Het kan met css.. Jan Koehoorn heeft er wat tuts over gemaakt geloof ik..
En anders kan het met javascript ook wel..
Google eens op: Rounded corners
'Pepijn:
Dan heb je afbeeldingen nodig, CSS of HTML ondersteunt geen afgeronde hoeken.
Het kan met css.. Jan Koehoorn heeft er wat tuts over gemaakt geloof ik..
En anders kan het met javascript ook wel..
Google eens op: Rounded corners
Maar jan maakt toch gebruik van plaatjes? Anyway, zoek eens op die tut missschien kan het je helpen..
CSS: Liquid Rounded Corners
Je maak voor boven en onder (iedere keer links en rechtse hoek) een div.
<div id="boven"></div>
<div id="tekst">hier komt mijn text</div>
<div id="onder"></div>
En in je css zet je gewoon voor onder en boven een img. en klaar.
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
56
57
58
59
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
<style type="text/css">
div#text {
margin: 0 10%;
background: #9BD1FA;
}
div#inner-text {
min-height: 20px;
height:auto !important;
height: 20px;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
}
b.rtop, b.rbottom {
display:block;
background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}
</style>
<div id="text">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div id="inner-text">
test
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
div#text {
margin: 0 10%;
background: #9BD1FA;
}
div#inner-text {
min-height: 20px;
height:auto !important;
height: 20px;
margin-left: 5px;
margin-right: 5px;
overflow: hidden;
}
b.rtop, b.rbottom {
display:block;
background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #9BD1FA
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}
</style>
<div id="text">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div id="inner-text">
test
</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>