Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Sven Lennartz 10. September 2003

CSS: Spaß mit Rahmen

Kein Beitragsbild

Rahmen sind ein wichtiges Gestaltungselement, wenn es um Tabellen und das Seitenlayout geht. CSS-Befehle sind hier besonders praktisch. Sie lassen sich auch auf ganze Seiten anwenden – mit überraschenden Ergebnissen.

Die Handhabung ist einfach, es genügt eine Ergänzung im <body>-Tag nach diesem Muster:

 <body style="border : 150px solid yellow;">

Das Ergebnis erinnert auf den ersten Blick an eine geframte Seite. Live Demo. Der dicke Rahmen lässt nur einen verhältnismäßig kleinen Bereich für den eigentlichen Seiteninhalt frei, der sich der Browsergröße anpasst. Damit ist es allerdings noch nicht ganz getan. Mozilla/Netscape Browser zeigen füllen das Browserfenster nicht komplett aus. Und diesen Extrarahmen zu beseitigen, werden die Randabstände manipuliert:

Anzeige

      <body
style="margin : 0px; border : 150px solid yellow;">

Leider reicht auch das noch nicht, der Browser zeigt den Rahmen nämlich nicht komplett an, weil die Seite nicht über ausreichenden Inhalt verfügt. Hat man den, gibt es kein Problem; ist nicht genug Inhalt vorhanden, hilft man ganz einfach nach. Wir definieren einen Layer, der die gesamte Seite füllt. Etwa so:

      <div
style="width : 100%; height : 100%;">Seiteninhalt</div>

Opera spielt nicht ganz mit, ältere Browser müssen hier sowieso passen. Interessant wird die Sache mit kreativen Variationen. Wer Lust hat, probiert einmal die verschiedenen Rahmenarten durch. Als da wären:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Selbstverständlich kann jede Seite des Browserfensters anders formatiert werden. Damit sind ausgesprochen bunte und ungewöhnliche Konstruktionen möglich. Das könnte zum Beispiel so aussehen:

      <body style="margin
: 0px; border-left : 150px solid yellow; border-right : 100px ridge blue; border-top
: 120px double red; border-bottom : 150px groove green;">

Natürlich sind sich auch hier die Browser nicht ganz einig, was angezeigt werden sollte. Jeder macht es ein wenig anders, aber im Grunde erhöht das noch den Reiz. Es macht übrigens einen Unterschied, ob die Rahmendefinitionen im <body>-Tag oder im <HTML>-Tag untergebracht werden, was ebenfalls möglich ist. Und natürlich kann auch der Layer für den Inhalt mit einem lustigen Rahmen umgeben werden. Was dabei herauskommt, ist freilich kein funktionales Alltags-Design mehr.

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.