• Als Spam markieren
• Beitrag melden

• 
  Diese Gruppe Alles

• Archiv
• RSS-Feeds

• Kontakt
• Hilfe
• Impressum
• Datenschutz

Re: Können Browser noch immer keine T abellen?

Hallo,

Andreas Hollmann schrieb:
> Eine Webseite soll am Rand einen Schatten bekommen. Eigentlich eine
> einfache Aufgabe.
>
> Schatten in Photoshop erstellen, in ImageReady in Slices zerschnippeln
> und den Code für eine Tabelle erzeugen lassen.

Die Fetzen sollten für die sich wiederholenden Teile möglichst nur 1px
breit sein, um Welleneffekte zu vermeiden.

>
> http://www.inch3.de/testseiten/Schatten_original.html
>
> Funktioniert.
>
> Da diese Tabelle jedoch starr ist, also mit fester Breite und Höhe
> arbeitet, eine Webseite aber "atmen" können muss, habe ich das ganze
> umgearbeitet.
>
> Die Zellen in den Ecken bekommen feste Breiten und Höhen, an den Kanten
> wird die Grafik als Hintergrundbild eingebaut, daß beliebig gekachelt
> wird.
>
> Der Code ist valide, sieht aber spätestens nach Abschalten der
> Tabellenränder grausam zerschossen aus:
>
> http://www.inch3.de/testseiten/Schatten.html

Ich würde das so lösen, wobei deine Bildstücke dann ungeeignet, da die
scheinbar nicht zusammenpassen.
ggf. würde ich die Aufteilung der Bilder sogar generell ändern und eine
Ecke an einer Seite lassen, oder z.B. wenn die Seite eine feste Breite
hat die Bilder so wählen, dass dies schon gegeben ist, um nicht soviel
schachteln zu müssen.

<div style="width: 500px; background:url(Schattep.gif) top repeat-x;">
<div style="background:url(SchattenRechts.gif) right repeat-y;">
<div style="background:url(Schattet.gif) left repeat-y;">
<div style="background:url(Schattex.gif) bottom repeat-x;">
<div style="background:url(Schattes.gif) top right no-repeat;">
<div style="background:url(Schattey.gif) bottom right
no-repeat;">
<div style="background:url(Schattev.gif) bottom left
no-repeat;">
<div style="background:url(Schatter.gif) top left
no-repeat;">
<div style="padding: 15px 25px 30px 30px;"> Lorem ipsum
dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

--
Viele Grüße!

Antworten