Bildformat

das mit getilten grafiken hört sich gut an, nur dass ich nicht weiß was es heißt.
Googlen führt mich nicht gerade weiter, kannst du mich auf eine Tutorialseite verweisen?

Was verstehet man untwer streckbaren Bereichen? divs oder ...?

marco.b

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image

marco.b schrieb:

Lösung bleibt, wie bereits erwähnt, das Arbeiten mit Bereichen, die dynamisch gestreckt werden können, ohne Qualität zu verlieren. Das geschieht mit einfarbigen Hintergrundfarben oder mit getilten Grafiken. Damit kann man beispielsweise die letzte, vertikale Pixelreihe eines Bildes unendlich weit strecken.

Wie das funktionieren soll, würde mich nun aber auch einmal interessieren? Es wird keine letzte Pixelreihe unendlich weit gestreckt, sondern das Bild wird einfach immer wieder neben- bzw. untereinander angezeigt (je nach repeat-Einstellung).

Ansonsten alles richtig soweit. Fixe Graphiken für nicht-fixe Designelemente sind immer eine Katastrophe.

und was hindert dich da dran ein neues image aus der letzten pixel reihe zu erstellen und dieses zu "tilen"?

marco.b

árn[y]ék schrieb:

Wie das funktionieren soll, würde mich nun aber auch einmal interessieren? Es wird keine letzte Pixelreihe unendlich weit gestreckt, sondern das Bild wird einfach immer wieder neben- bzw. untereinander angezeigt (je nach repeat-Einstellung).

Natürlich wird nichts gestreckt, ich habe den optischen Eindruck nur beschrieben, den man erreichen kann.

hmm ,
also bei mir is grad auch so hässlich, das bild einfach öfter nebeneinander dargestellt, wie genau erreiche ich jetzt den "Gestreckt"-effekt, da mein hintergrundbild noch einen farbverlauf beinhaltet, kann ich mir vorstellen, dass
die letzte pixelreihe zu kopieren nicht besonders schön aussieht.

SVG stellt wirklich noch keine gute ALternative dar?

Ansonsten... was kann ich tun?

marco.b

NEIN, Svg würde DIE Lösung darstellen, wenn die Herren von Microsoft endlich eine native Svg-Implementierung in den IE einbauen würden. Und selbst dann wären viele noch jahrelang mit dem IE6 unterwegs. Von daher: Halte dich an Rastergrafiken.

Zum Strecken: Strecken kannst du den Farbverlauf dann schön, wenn er vertikal verläuft. Dann liegt ja in jeder horizontalen Pixelreihe die selbe Farbe. Du kannst dann die letzte vertikale Pixelreihe als Bild abspeichern und dies tilen. Es gibt aber natürlich auch interessantere Tile-Muster. Google doch mal nach ein paar CSS Designs.

Die Meister aller Designs präsentieren ihre Werke btw hier.
http://csszengarden.com/
Um derartige Designs zu erreichen, muss man aber schon geübt sein. Dennoch sieht man auch als Laie, was möglich ist.

ich hab mir jetzt erst mal beholfen indem ich margin vom body auf null gesetzt habe und das bild wieder als normales erstes element eingefügt habe, soll im na#ächsten css nicht streckbare hintergrundbilder unterstützt werde?

marco.b

Das macht nur bei Vektorgrafiken Sinn, was zur Zeit (siehe mein letztes Posting) sowieso nur bedingt eingesetzt werden kann.

Nico D.

Wieso so umstaendlich, wenn's auch einfach geht?

Du brauchst nur die Ecken als Bildobjekt einfuegen. Ansonsten genuegt es doch, wenn du in den Kopf- und Fusszeilen die Grafik (1 Pixel breit) als Hintergrund einbindest und entsprechend horizontal wiederholen laesst. Damit wirst du allen Aufloesungen gerecht, auch noch in 10 Jahren...

marco.b

Die Ecken? Welches ganz bestimmte Design hast du dabei im Sinn? Was ist an deiner Vorgehensweise einfacher, als zwei Grafiken einzubinden?

Nico D.

Etwa dieses Prinzip:

+-------+
|       |
|       |
+-------+

+ = Eckgrafik
- = Hintergrund horizontal (Header / Footer)
| = Hintergrund vertikal (Seitenraender)

Konkret in einem Beispiel:

<html>
<head>
<title>Header / Footer</title>
<style type="text/css">
<!--
table         { background: none; border-collapse: collapse; }
table, td, th { border: none; }
.header       { background-image:url(gheader.png); background-position: center;
                background-repeat: repeat-x; }
.footer       { background-image:url(gfooter.png); background-position: center;
                background-repeat: repeat-x; }
.side         { background-image:url(gside.png);   background-position: center;
                background-repeat: repeat-y; }
//-->
</style>
</head>
<body>
<table>
<tr>
<th><img src="gedgetl.png" alt=""></th>
<th class="header" colspan="2"><center>&Uuml;berschrift</center></th>
<th><img src="gedgetr.png" alt=""></th>
</tr>
<tr>
<td class="side" rowspan="3">&nbsp;</td>
<td>Zeile eins, Position eins</td>
<td>Zeile eins, Position zwei</td>
<td class="side" rowspan="3">&nbsp;</td>
</tr>
<tr>
<td>Zeile zwei, Position eins</td>
<td>Zeile zwei, Position zwei</td>
</tr>
<tr>
<td>Zeile drei, Position eins</td>
<td>Zeile drei, Position zwei</td>
</tr>
<tr>
<td><img src="gedgebl.png" alt=""></td>
<td class="footer" colspan="2">&nbsp;</td>
<td><img src="gedgebr.png" alt=""></td>
</tr>
</table>
</body>
</html>