Kategorien
Design HTML/CSS

Verschachtelte Rahmen

Wem ein Rahmen nicht genügt, der kann ja mehrere verwenden und sie verschachteln. Ein wenig CSS genügt und die Tabelle kann zu Hause bleiben. Standardrahmen sind langweilig. CSS bietet nicht nur mehr Möglichkeiten, sondern auch die kreativeren. Allerdings…

Wem ein Rahmen nicht genügt, der kann ja mehrere verwenden und sie verschachteln. Ein wenig CSS genügt und die Tabelle kann zu Hause bleiben.

Standardrahmen sind langweilig. CSS bietet nicht nur mehr Möglichkeiten, sondern auch die kreativeren. Allerdings können die Rahmen nicht einfach mehrmals definiert werden, wir benötigen einige DIV-Container, um das zu erreichen. Die nämlich lassen sich wunderbar ineinander schieben.


So könnte es aussehen

Zu beachten ist die Angabe der Breite im Ersten <div>, diese ist notwendig, da einige Browser sonst den Rahmen über die gesamte Browserbreite anlegen. Hier muss ein wenig probiert werden, um das richtige Maß zu finden. Übrigens: der Vielfachrahmen ist auch um Texte und Hyperlinks möglich.

Live Demo

Es darf eifrig probiert werden, durch verschiedene Abstände (padding) und Rahmenbreiten und -typen entstehen interessante Varianten, die man so nicht für möglich halten würde.

 <div style="width
: 100px;">
 <div style="border : 2px solid blue; padding :
1px; ">
 <div style="border : 2px outset powderblue; padding
: 1px;">
 <div style="border : 2px dotted silver; padding :
1px;">
 <img src="../images/illu_suche_total.jpg" alt=""
width="84" height="84"></div></div></div></div>

Von 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.