Aiun Geschrieben 9. Januar 2006 Teilen 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 ? Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
geloescht_JesterDay Geschrieben 9. Januar 2006 Teilen 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. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.