Rounded Corners locatie
Ik ben bezig met een layout, waarin rounded corners zitten. Ik ben even bezig geweest, en de bovenkant werkte. Nu alleen de onderkant nog dacht ik. Toen ik er even mee bezig was, kreeg ik het maar niet aan de praat. De linker-onderkant zit onder de div, terwijl dit er natuurlijk in hoort te zitten. Ik heb al van alles geprobeerd, zoals er een clearer neerzetten. maar daar kwam helaas ook niks uit. Hieronder heb ik de code gepost waarom het gaat(het probleem zit hem dus in rounded_left-bottom).
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="item deletable" id="item1">
<h1 class="title rounded_left-top movable">Forum</h1>
<div class="icons rounded_right-top">
<a href="#" class="del_item"><img src="images/ico_delete.png" alt="Verwijderen" style="border: 0;"/></a>
</div>
<div class="clearer">
</div>
<p>
Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit amet, consectetur adipiscing edivt. Nulla metus tellus, volutpat velLorem ipsum dolor sit amet, consectetur adipiscing edivt. Nulla metus tellus, volutpat vel
</p>
<div class="rounded_left-bottom" style="width: 6px; height: 6px; float: left;"></div>
</div>
<h1 class="title rounded_left-top movable">Forum</h1>
<div class="icons rounded_right-top">
<a href="#" class="del_item"><img src="images/ico_delete.png" alt="Verwijderen" style="border: 0;"/></a>
</div>
<div class="clearer">
</div>
<p>
Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit amet, consecte Lorem ipsum dolor sit amet, consectetur adipiscing edivt. Nulla metus tellus, volutpat velLorem ipsum dolor sit amet, consectetur adipiscing edivt. Nulla metus tellus, volutpat vel
</p>
<div class="rounded_left-bottom" style="width: 6px; height: 6px; float: left;"></div>
</div>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#content-wrapper .item {
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
width: 100%;
margin-bottom: 10px;
} .rounded_left-top {
background: url('../images/rounded_corners/content_item_left-top.gif') top left no-repeat;
margin-left: -1px;
margin-top: -1px;
}
.rounded_right-top {
background: url('../images/rounded_corners/content_item_right-top.gif') top right no-repeat;
margin-right: -1px;
margin-top: -1px;
}.rounded_left-bottom {
background: url('../images/rounded_corners/content_item_left-bottom.gif') bottom left no-repeat;
margin-left: -1px;
margin-bottom: -1px;
}
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
width: 100%;
margin-bottom: 10px;
} .rounded_left-top {
background: url('../images/rounded_corners/content_item_left-top.gif') top left no-repeat;
margin-left: -1px;
margin-top: -1px;
}
.rounded_right-top {
background: url('../images/rounded_corners/content_item_right-top.gif') top right no-repeat;
margin-right: -1px;
margin-top: -1px;
}.rounded_left-bottom {
background: url('../images/rounded_corners/content_item_left-bottom.gif') bottom left no-repeat;
margin-left: -1px;
margin-bottom: -1px;
}
Een voorbeeld is te vinden op http://77.162.166.11/devhouse/ , kijk bij de onderkant van de div met Forum erin.
Weet iemand wat het probleem is?
Gewijzigd op 01/01/1970 01:00:00 door Tom K
Gesponsorde koppelingen:
Overigens, border radius kan je naar mijn mening al gebruiken, de IE gebruikers leren dan gelijk dat ze moeten overstappen.
Als je toch deze manier wilt gebruiken. Zijn er 2 goede methodes om dit te doen. 1. Backgrounds 2. Positions. Choose your posion. :)
