Image als Border

[asd]

^^^^
Ich habe irgendwo gesehen, dass es Tabellen gibt, die nicht etwa wie gewohnt eine Farbe als Umrandung haben, sondern ein Image. Geht sowas ?

 

[XraYSoLo]

zeig' mal sowas her...

Nils aka XraYSoLo

 

[Verhueterli]

XraYSoLo, ich weiß nicht, ob du Prophets frühere Seite kennst bzw. dich darin erinnerst, aber er hatte mal einen solchen Effekt auf seiner Seite.

Ich schätze, er kann uns da weiterhelfen.

Ich würde spontan 2 Divs verschachteln, so in etwa:

<div style="width:500px; height:500px; padding:2px; background-image:url('grafiken/image_border.png'); background-repeat:no-repeat;">
    <div style="width:496px; height:496px; background-color:#FFFFFF;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec congue ante at libero. Sed sit amet magna. Fusce mauris. Nullam vel urna non dolor vehicula imperdiet. Duis suscipit. Nullam pede leo, dictum eget, sollicitudin ut, aliquet vitae, tortor. Etiam semper diam. Donec quis quam. Suspendisse felis. Curabitur quis metus. Sed bibendum. Sed non magna id enim ultricies congue. Integer non orci. Vestibulum vehicula ligula sit amet magna. Nullam vitae tortor. Etiam feugiat.
    </div>
</div>

Auf diese Weise sieht man nur den Rand, des Hintergrundbilds des 1. Divs, was dann aussieht wie ein Rahmen.

» http://verhueterli.ve.funpic.de/index/hilfe_manuell/image_border.html

 

[Ben]

Nur um es nochmals klar auszudrücken.
Auf direktem Weg geht das, laut Spezifikation, nicht.

 

[asd]

also könnte ich auch einfach zwei tabellen in einander verschachteln und in der übergeordneten muss ich einfach einen Hintergrund einstellen ?

 

[Verhueterli]

Ich würde dann eher ein Div machen und in das Div eine Tabelle, so wie bei meinem Beispiel - nur, dass das innere Div einfach eine Tabelle ist.

Beispiel:

<div style="width:500px; height:500px; padding:2px; background-image:url('grafiken/image_border.png'); background-repeat:no-repeat;">
    <table style="width:496px; height:496px; background-color:#FFFFFF; border:none;">
        <tr>
            <td>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            </td>
            <td>
                Donec congue ante at libero. Sed sit amet magna. Fusce mauris. Nullam vel urna non dolor vehicula imperdiet.
            </td>
        </tr>
        <tr>
            <td>
                Duis suscipit. Nullam pede leo, dictum eget, sollicitudin ut, aliquet vitae, tortor. Etiam semper diam. Donec quis quam. Suspendisse felis.
            </td>
            <td>
                Curabitur quis metus. Sed bibendum. Sed non magna id enim ultricies congue. Integer non orci. Vestibulum vehicula ligula sit amet magna. Nullam vitae tortor. Etiam feugiat.
            </td>
        </tr>
    </table>
</div>

» http://verhueterli.ve.funpic.de/index/hilfe_manuell/image_border_table.html

 

[Prophet]

Also es gibt da einen ansatz mit CSS3 den aber noch kein Browser unterstützt.

Dann gibt es die möglichkeit mit DIVs leider finde ich im moment die Setie mit der erklärung nicht. Anzumerken wäre hier das das ganze in eines einzigen großen div suppe endet...

Die dritte möglichkeit ist es das ganze über tabellen zu reallisieren. Dazu braucht du eine 3x3 Tabelle in der do in der Mitte den Content hast und aussenherum mit hilfe von css hintergrundbilder einfügst (und die höhe und breite festlegst). Wichtig dabei ist natürlich das zu nur in den ecken höhe und breite festlegst. bei den rändern jedoch nur eines!