hmm, schatten mit kleinen bilddateien

B

badamfh

Hi Leute,
ich möchte eine Seite machen, die praktisch ein platt papier in der mitte der seite ist. damit man es als papier erkennen kann, hat es einen schatten. So, nun möchte ich das papier in 8 winzie teile zerlegen, nämlich die 4 ecken (also nur der schatten der jeweiligen ecke) und jeweils ein 1 px breiter teil der seitenschatten.

So, in der mitte ist alles weiß, an den seiten werden die mini dateien aufgereiht, so dass der besagte schatten entsteht. NUR: ich habe das ganze in einer tebelle vor, dh sie ist in 9 teile unterteilt, und die randteile sind jeweils mit den bildern bestückt. Nur dummerweise sind die bilder nicht ganz am rand, obwohl ich border auf 0 stehen habe. Dadurch steht der schatten mitten im raum, und nicht am rand des papieres, wo er doch hinsoll.

Was mache ich falsch, wie lässt sich das beheben, hat jemand eine bessere möglichkeit das ganze so zu gestalten? Ist halt viel platzsparender als die seite als ein bild zu nehmen, da jede ecke und so ca 300 byte nur gross ist.


Danke
 
Ich würde die Grafik einfach in 3 Bereiche einteilen:
Den oberen Bereich über die gesamte Breite circa 10-20 Pixel hoch (kommt drauf an, sollte halt mit der Eckrundung abschliessen), dann die Mitte (1-5 Pixel hoch) und den unteren Abschnitt (wieder so das die Ecken abschliessen).

Dann baust du dir die Tabelle so auf:

HTML: 
<table width="wieauchimmer" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="wieauchimmer" height="obererbereich" style="background-image: url(obererbereich.jpg); background-repeat: no-repeat;"></td>
<td style="background-image: url(mittlererbereich.jpg); background-repeat: repeat-y;" valign="top">INHALT<br>Inhalt<br>BLALBA<br>test<br>sonstiges</td>
<td height="untererbereich" style="background-image: url(untererbereich.jpg); background-repeat: no-repeat;"></td>
</tr>
</table>

So würde ich das im grossen und ganzen machen. Wer bessere Ideen hat der korrigiere mich bitte...
 
Juhu

Hi, hab das erste problem gelöst, der hintergrund des tables muss halt durchsichtig sein. So, deine lösung ist ja gut, aber leider sollte die tabelle ja sehr einfach in der länge und breite verändert werden können, das geht eben mit großen bildchen nicht, da zb die höhe immer ein vielfaches der bildhöhe sein muss, sonst gehts ja nicht auf.

Musste aber letztedlich 4 pixel höhe machen, da der schatten auf einen gestreiften hintergrund fällt.
 
ohh nein

Hmm Okay, also habe folgendes Problem:

Da der schatten auf einen gestreiften hintergrund fällt, musste ich die randbildchen bereits mit den streifen gestalten. Nur, wie bekomme ich es hin, dass die bildstreifen und die hintergrund streifen auf einer höhe sind? das wird immer schief.

Und wie schalte ich den abstand zwischen 2 zellen ab, damit die eckbilder und die seitenbilder direkt aneinanderkleben?


Danke
 
Sorry, ich dachte du hättest eine feste Tabellenbreite. Kannst du zum besseren Verständniss vielleicht einen Screenshot oder so posten? Dann kann man sich das besser vorstellen...
 
oki

Ok, ich hab jetzt mach hochgeladen wie es aussehen soll, und wie weit ich bereits bin. Ich möchte eben auch, dass sich breite und höhe des bpapiers in der mitte schnell ändern lassen (vor allem die länge), daher der aufwand.


So soll es mal aussehen

Und so weit bin ich "schon"

Danke schomma
 
Zuletzt bearbeitet von einem Moderator:
*schluck*

bei mir ist das sehr schön zerstückelt.

PB 12", OS 10.4, Safari.

Habe grad leider nur ein dickes WENN für dich... WENN der IE 24bit PNG verstehen würde, hättest du weniger probleme ...

ich löse solches gern mit CSS ...

guckst du hier: klick
 
Zuletzt bearbeitet:
j

Ja ich weiß, dass es total zerstückelt ist. Nur wie bekomme ich das so zusammen. Ich möchte möglichst nur tabellen benutzen.
 
zunächst ... gucke mal bitte in den Ecken. deine Zellen haben jeweils andere größen (width, height) als die Bilder. bitte diese alle auf 8 setzen

dann hast du noch diverse divs mitten in der tabelle sitzen: weg damit! auch die ausrichtungen (align) in der Tabelle rauswerfen
dann sind noch nicht alle schattenbildchen gebaut? Mach das mal, dann sehen wir weiter
 
das bild unten links passt nicht. da ist der Schatten (nicht das bild) 4px breit. in allen anderen nur 3px
 
oki, habs. Warum macht dreamweaver eigentlich so doofe div layers hin.

Jetzt ist links und an den ecken ne spalte, rechts liegts gut an, oben und unten wird es irgendwie doppelt genommen, keine ahnung warum, höhe ist doch 8, wie kann dsa da doppelt sein.
Hintergrund und bildschatten sind nicht abgestimmt.

Is das bei euch auch so, dass wenn ihr mit dreamweaver arbeitet, die hälfte oder mehr im code-bereich verbringt?


Also ich muss wohl richtig slicen lernen :D, wie würde das gehen, wenn ich image ready benutze?
 
Zuletzt bearbeitet von einem Moderator:
nimm mal die leerzeichen raus ( &nbsp; ) die stören bloß!
 
hh

Ohh fast klappts, was stimt denn jetzt noch nicht?


Hier nochma das beispiel.
 
Zuletzt bearbeitet von einem Moderator:
jetzt solltest du deine grafiken überprüfen - wie ich oben schon schrieb: dein untenlinks-bild hat zwar 8x8px, aber der schatten (also der grau-verlauf) ist 4px breit. beim oben-linksbild ist der schattenverlauf 3px. Logisch, das dieses nicht aneinander passt :)
 
Juhu

Juhu, fett, daran lags wohl. Aber es ist immernoch so ein komischer spalt zwischen dem linken teil und dem rest :/
 
Empör!

Sowas - da helfe ich dir, und du schimpfst mich fett!

ich sehe nur noch rechts einen spalt. hm. mal analysiern
 
Zuletzt bearbeitet:
fett = ausruf der begeisterung

Hmm ne refreshe mal, da ist zwischen den randbildchen links und dem rest ein spalt von ca 1 -2 px, wo de rhintergrund rausschaut. aber wie geht das weg?
 
Hi!

Die Linien stimmen noch nicht in der Höhe mit dem Hintergrund überein.
Und das Papier ist nicht weiß, sondern gestreift. Nur mal so.
(Netscape 7 Mac)
 
na supi

Na super, stimmt, mit den linien, unter opera funzts, bei safari ist es schief.

Kann man das irgendwie auch gescheit machen letzeendlich? wie hättet ihr das problem gelöst?
 
noch etwas mathe: tabellenbreite=444px. ecken sind 2x8=16px breit. deine inhaltstabelle ist 403. müsste aber 428 breit sein. da geht (zumindest bei mir) der Spalt weg.

das mit den anschlüssen ist so ein problem... was passiert beispielsweise, wenn die höhe variiert? dann gibts irgendwo ein Anschlußproblem.

Ich habe auf einer meiner seiten den Hintergrund nicht so kontrastreich gemacht und im schatten auf die linien verzichtet.

idealerweise würde man ein halbtransparentes PNG verwenden - das kann aber IE nicht. (zumindest nicht bis v 6)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten