Aiun Geschrieben 9. Januar 2006 Geschrieben 9. Januar 2006 hi, eine Frage Und zwar benutze ich auf einer Meiner seiten einen Grafischen Rahmen, d.h. Grafik links, grafik rechts, oben und unten. Jeweils Eck-Grafiken. Auf die Weise entsteht ein Kasten mit abgerundeten Ecken, Schatteneffekte etz. Bisher verwende ich dafür eine Tabelle, denn mit divs oder so habe ich das nicht wirklich hinbekommen. als "übergeordnetes" element steht ein Div-Layer bereit. also bei mir in etwa <div> <table> <tr> <td></td> // ecke Links oben <td></td> // oben <td></td> // ecke Rechts oben </tr> <tr> <td></td> // Links <td>Hallo Welt !</td> // Inhalt <td></td> // Rechts </tr> <tr> <td></td> // ecke Links unten <td></td> // unten <td></td> // ecke Rechts unten </tr> </table> </div> z.z. habe ich da ein Table-Layout fixed und dann wahlweise die größe (breite und / oder höhe) der tabelle mit 100% festgelegt, so das aller verfügbarer Platz ausgenutzt wird. Einer von euch eine Idee ? wie es "schöner" ginge ?
geloescht_JesterDay Geschrieben 9. Januar 2006 Geschrieben 9. Januar 2006 Bisher verwende ich dafür eine Tabelle, denn mit divs oder so habe ich das nicht wirklich hinbekommen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- #top-border { background-image: url(top.gif); background-repeat: repeat-x; background-position: top; padding-top: 25px; width: 371px; } #left-border { background-image: url(left.gif); background-repeat: repeat-y; background-position: left; padding-left: 25px; } #right-border { background-image: url(right.gif); background-repeat: repeat-y; background-position: right; padding-right: 25px; } #bottom-border { background-image: url(bottom.gif); background-repeat: repeat-x; background-position: bottom; padding-bottom: 25px; } //--> </style> </head> <body> <div id="top-border"> <div id="left-border"> <div id="right-border"> <div id="bottom-border"> <img src="http://www.fachinformatiker.de/skins/fi/images/header_schrift.gif" alt="FI" /> </div> </div> </div> </div> </body> </html> Die Grafik für den Rand (top.gif...) ist bei mir ein 25x25px großes GIF mit roter Farbe (also alle 4 das Gleiche). Als Demo ist das OK, bei dir musst du dann u.U. das background-repeat und padding anpassen.
Empfohlene Beiträge
Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenAnmelden
Du hast bereits ein Benutzerkonto? Melde Dich hier an.
Jetzt anmelden