Rahmen - abgerundete Ecken

Seitenbereiche sollen innerhalb eines Rahmens dargestellt werden. Dabei soll der Rahmen abgerundete Ecken haben. Dazu wurden einige Script-Lösungen entwickelt. Möchte man stattdessen mit (Hintergrund-) Grafiken arbeiten, muss man einige 'Kleinigkeiten' beachten.

update:  Dienstag 09.07.2009 - 23:00 Uhr   www.cssplay.co.uk  (funktionierendes CSS Beispiel)

Erklärungen und CSS-Anweisungen zum Beispiel

Box von 470 Pixel Breite mit Titelleiste für variablen Text.
Umsetzung durch 3 DIV-Bereiche für die mit CSS-Angaben Hintergrundgrafiken festgelegt wurden. Für die DIVs oben, mitte und unten sind Grafiken von 470 Pixel Breite eingebunden. Für den eigentlichen Inhalt wurde ein weiterer DIV-Bereich definiert, für den mit padding:10px 15px 10px 15px; die Innenabstände festgelegt wurden.

Erklärungen und CSS-Anweisungen zum Beispiel

Modul	Farbe	Breite	Vorschau	Code	Grafiken	Bild
Modul-01	blau	470 px
Modul-02	orange	470 px
Modul-03	grün	470 px

Script

Tabelle 1

DIV / CSS

Tabelle 2

LÖsung

Screenshot des Beispiels im FF 3.0

Screenshot des Beispiels im IE 6.0

<td background="rahmen-470-01.gif">

#Rahmen01{
width:470px;
height:76px;
background:url(rahmen-470-01.gif);
}

#Inhalt01{
height:100%;
padding:10px;
margin: 0px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}

#Rahmen02{
width:470px;
height:76px;
background:url(rahmen-470-02.gif);
}

#Inhalt02{
margin:0px;
padding: 30px 10px 10px 10px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}

overflow-y:scroll;

Anzeige im FF

Anzeige im IE

	Die althergebrachte Arbeitsweise mit einzelnen Grafiken in Tabellenzelllen einer Tabelle macht eine automatische Höhenapassung möglich.

	Die althergebrachte Arbeitsweise mit einzelnen Grafiken in Tabellenzelllen einer Tabelle macht eine automatische Höhenapassung möglich. Dabei kann man die Grafiken mit CSS-Anweisungen (wie hier) als Hintergrundgrafiken für die einzelnen Tabellenzellen festlegen. Größere Inhalte schieben die untere Tabellenzeile abwärts.

	Die althergebrachte Arbeitsweise mit einzelnen Grafiken in Tabellenzelllen einer Tabelle macht eine automatische Höhenapassung möglich. Die Box mit Rahmen wird automatisch angepasst. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Et iuvaret voluptua similique vim, vel ne fugit oporteat molestiae, tritani cotidieque vis ut. Ipsum mandamus pro in, quando mollis omittam ut usu. Ius et dicta utinam, sea mollis numquam noluisse cu. Fierent dolores expetendis vel eu, sed et adipiscing incorrupte quaerendum. An vix cetero maiorum, cu duo molestie expetenda.

	Auch bei dieser Variante kann man durch unterschiedliche Grafiken das Erscheinungsbild verändern.

	Die althergebrachte Arbeitsweise mit einzelnen Grafiken in Tabellenzelllen einer Tabelle macht eine automatische Höhenapassung möglich. Dabei kann man die Grafiken mit CSS-Anweisungen (wie hier) als Hintergrundgrafiken für die einzelnen Tabellenzellen festlegen. Größere Inhalte schieben die untere Tabellenzeile abwärts.

	Die althergebrachte Arbeitsweise mit einer Tabelle macht eine automatische Höhenapassung möglich. Die Box mit Rahmen wird automatisch angepasst. Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Et iuvaret voluptua similique vim, vel ne fugit oporteat molestiae, tritani cotidieque vis ut. Ipsum mandamus pro in, quando mollis omittam ut usu. Ius et dicta utinam, sea mollis numquam noluisse cu. Fierent dolores expetendis vel eu, sed et adipiscing incorrupte quaerendum. An vix cetero maiorum, cu duo molestie expetenda.

Die althergebrachte Arbeitsweise mit einer Tabelle macht eine automatische Höhenapassung möglich. Die Box mit Rahmen wird automatisch angepasst.

Bei dieser Methode mit 8 Hintergrundgrafiken ist ohne besonderen Aufwand auch eine Anpassung der Breite möglich. Die Angaben für 'width' müssen lediglich den gewünschten Wert haben. width:200px;

<div id="mitte4"><div id="inhalt4"> Text </div></div>

#mitte4{
width:470px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
border-left:1px solid #487F8F;
border-right:1px solid #487F8F;
}

Screenshot im FF 3.0:

Screenshot im IE 6.0:

#mitte4-2 {
width:470px;
background:url(mitte-div.gif);
}

<div id="oben4"></div>

<div id="mitte4-2"><div id="inhalt4"> Text </div></div>

<div id="unten4"></div>

<style type="text/css">
<!--

#oben4{
width:470px;
height:22px;
background:url(oben-div.gif);
}

#mitte4-2{
width:470px;
background:url(mitte-div.gif);
}

#unten4{
width:470px;
height:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:1px;
background:url(unten-div.gif);
}

#inhalt4{
padding:10px;
width:450px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}

-->
</style>

<div id="oben6">&nbsp;&nbsp;Headline</div>

<div id="mitte6"><div id="inhalt6"> Text </div></div>

<div id="unten6"></div>

<style type="text/css">
<!--

#oben6{
width:470px;
height:22px;
background:url(oben-blau01.gif);
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#668899;
letter-spacing: 1px;
font-weight:bold;
line-height:22px;
}

#mitte6{
width:470px;
background:url(mitte-blau01.gif);
}

#unten6{
width:470px;
height:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:1px;
background:url(unten-blau01.gif);
}

#inhalt6{
padding:10px;
width:450px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}

-->
</style>

<div id="oben7">&nbsp;&nbsp;Headline</div>

<div id="mitte7"><div id="inhalt7"> Text </div></div>

<div id="unten7"></div>

<style type="text/css">
<!--

#oben7{
width:470px;
height:22px;
background:url(oben-orange01.gif);
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#DF7000;
letter-spacing: 1px;
font-weight:bold;
line-height:22px;
}

#mitte7{
width:470px;
background:url(mitte-orange01.gif);
}

#unten7{
width:470px;
height:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:1px;
background:url(unten-orange01.gif);
}

#inhalt7{
padding:10px;
width:450px;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}

-->
</style>