Hallo iedereen,
Ik zit met een probleempje. Ik heb een goede code gevonden om ronde hoeken te maken zonder images te gebruiken die in alle browsers leesbaar zijn.
Ik heb het zover gekregen dat er 2 delen onder elkaar staan, 1 met witte achtergrond en 1 met grijze achtergrond. Ze staan nu onder elkaar maar ik wil ze naast elkaar hebben. Dus het linker deel witte achtergrond en het rechterdeel grijze achtergrond.
Weet iemand hoe je dit aanpast?
Mvg Cid.
CSS:
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {
background: #fff;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
}
.headh h3 {
margin: 0px 10px 0px 10px;
padding-bottom: 3px;
}
.contenth {
background: #ddd;
border-right:1px solid #aaa;
border-left:1px solid #aaa;}
.contenth div {
margin-left: 12px;
padding-top: 5px;
}
HTML:
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Here is your Header!</h3>
</div>
<div class="contenth">
<div>Look ma, no images!</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>