<style type="text/css">
<!--
#content-wrap-left {
width: 400px;
float: left;
margin: 10px;
}
#content-wrap-right {
width: 400px;
float: left;
margin: 10px;
}
/* flexible box */
.box-outer-wrap {
background:url(img/slideDoor_links.gif) no-repeat left top;
border-bottom:1px solid #666600;
}
.box-inner-wrap {
background:url(img/slideDoor_rechts.gif) no-repeat right top;
}
.box-content {
max-width:700px;
min-height:160px;
padding:20px;
}
.clear {
clear:both;
position:relative;
font-size:0px;
height:0px;
line-height:0px;
}
-->
</style>
<div id="content-wrap-left">
<div class="box-outer-wrap">
<div class="box-inner-wrap">
<div class="box-content">
<p>Lorem ipsum... </p>
</div>
</div>
</div>
</div>
<div id="content-wrap-right">
<div class="box-outer-wrap">
<div class="box-inner-wrap">
<div class="box-content">
<p>Lorem ipsum .....</p>
</div>
</div>
</div>
</div>
<br class="clear" / >
Eine CSS Technik für abgerundete Ecken von Douglas Bowman.
In CSS können sich Hintergrundbilder überlagern.
.box-outer-wrap
In einem Div Container, wird das linke Hintergrundbild eingefügt. (siehe unten)
.box-inner-wrap
Darin wird ein weiterer Div Container plaziert, der das das rechte Hintergrundbild (ausgerichtet am rechten Rand ) beinhaltet. Die abgerundete rechte Ecke überlagert die eckige Kante des darunter liegenden Bildes.
.box-content
Darin wird ein weiterer Div Container für den eigentlichen Inhalt eingefügt. Hier kann man der Box eine Mindeshöhe verpassen, damit auch bei geringem Textinhalt ein schönes Erscheinungsbild gewährleistet ist. Die maximale Weite bezieht sich auf die Weite des linken Hintergrundbildes, siehe unten.
#content-wrap-left
#content-wrap-right
Um die Breite und Positionierung festzulegen, wird das alles in einen Div Container eingefügt, für den Weite, Höhe etc. bestimmt werden.
.clear
Die Klasse .clear sorgt dafür, dass das "floating" unterbrochen wird.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate metus facilisis ligula rutrum in semper felis rutrum. Aliquam commodo viverra iaculis. Quisque at dolor erat, at sollicitudin diam. Vivamus commodo arcu et mauris bibendum vel sodales metus vestibulum?
Donec tincidunt ornare tortor et consectetur. Curabitur facilisis facilisis tortor ut iaculis. Vivamus diam quam, hendrerit at scelerisque ac, eleifend ac sem. Aliquam sollicitudin ornare tincidunt. Phasellus non orci mi, at gravida elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate metus facilisis ligula rutrum in semper felis rutrum. Aliquam commodo viverra iaculis. Quisque at dolor erat, at sollicitudin diam. Vivamus commodo arcu et mauris bibendum vel sodales metus vestibulum?
Donec tincidunt ornare tortor et consectetur. Curabitur facilisis facilisis tortor ut iaculis. Vivamus diam quam, hendrerit at scelerisque ac, eleifend ac sem. Aliquam sollicitudin ornare tincidunt. Phasellus non orci mi, at gravida elit.
Es werden 2 Bilder benötigt, für den linken und rechten Bereich.
| Startseite | nächste Seite |  |