hmm, schatten mit kleinen bilddateien

Dieses Thema im Forum "Web-Editoren" wurde erstellt von badamfh, 19.10.2005.

  1. badamfh

    badamfh Thread Starter Gast

    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
     
  2. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    MacUser seit:
    18.08.2005
    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...
     
  3. badamfh

    badamfh Thread Starter Gast

    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.
     
  4. badamfh

    badamfh Thread Starter Gast

    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
     
  5. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    MacUser seit:
    18.08.2005
    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...
     
  6. badamfh

    badamfh Thread Starter Gast

    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 von einem Moderator bearbeitet: 19.02.2016
  7. Chuonrad

    Chuonrad MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    53
    MacUser seit:
    27.08.2004
    *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: 19.10.2005
  8. badamfh

    badamfh Thread Starter Gast

    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.
     
  9. Chuonrad

    Chuonrad MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    53
    MacUser seit:
    27.08.2004
    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
     
  10. Chuonrad

    Chuonrad MacUser Mitglied

    Beiträge:
    606
    Zustimmungen:
    53
    MacUser seit:
    27.08.2004
    das bild unten links passt nicht. da ist der Schatten (nicht das bild) 4px breit. in allen anderen nur 3px
     
Die Seite wird geladen...

Diese Seite empfehlen