Problem mit Schatten-Effekt

[vega]

Hallo Forengemeinde,

ich habe einen kleinen Schatten-Effekt um eine Grafik, was soweit nun funktioniert.

Leider rückt der nachfolgende DIV nun auch ein und ich weiß nicht, wie ich das ändern kann, siehe Screenshot und Code.

Es scheint, als ob der DIV "inhalt" (in dem auch die DIVs imprint 1, 2 und 3 liegen) sich dem Einrücken der Schattengrafik um 6 px beugt. Warum kann ich aber nicht nachvollziehen.

Wahrscheinlich ist die Lösung total einfach, aber isch find sie nischd.

html

Code: Alles auswählen

<div id="themabild" class="img-shadow">
<img src="grafx/ph.jpg" width="500" height="200" alt="" />
</div>
<div id="inhalt">
<h2>IMPRINT</h2>
<div id="imprint_1">
  <p>bla</p>
</div>
<div id="imprint_2">
  <pblabla</p>
</div>
<div id="imprint_3">
<h3>Disclaimer</h3>
<h4>Liability for Content</h4>
</div>


css

Code: Alles auswählen

#themabild {
  margin-left:0px;
  padding:0px;
}
#inhalt {
  margin-left:0px;
  margin-top:15px;
  padding:0px;
  width:500px;
}
#imprint_1 {
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  padding:0px;
  width:250px;
  float:left;
}
#imprint_2 {
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  padding:0px;
}
#imprint_3 {
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  padding:0px;
  clear:left;
}

.img-shadow {
  float:left;
  background: url(grafx/shadowAlpha.png) no-repeat bottom right;
  background: url(grafx/shadow.gif) no-repeat bottom right;
  }

.img-shadow img {
  display: block;
  position: relative;
  margin: -6px 6px 6px -6px;
  }

[vega]

Noch ein zweites Problem gibt es beim Schatten-Effekt: Dadurch sind Navgation und Platzhaltergrafik nicht mehr auf gleicher Höhe, sondern Platzhalter/Website-Inhalt wird höher angezeigt. Wahrscheinlich wegen des margin:-6px 6px 6px -6px. Also, noch zwei Dinge zum Fixen.

[sejuma]

Du kannst es mal damit versuchen:

Code: Alles auswählen

* {margin: 0; padding: 0;}

Ferner: Wenn du floatest, musst du auch clearen.
Dann kann es auch an den margins von .img-shadow img liegen.

Poste am besten mal einen Link zur Seite, damit man alles komplett incl. Grafik sieht.

[vega]

* {margin: 0; padding: 0;} hat leider keines der zwei probleme gelöst, daher habe ich es wieder gelöscht. :-/

hier der link: http://ivanschneider.com/test/test.htm

[Azra]

Nunja du könntest schummeln und bei #inhalt den margin Wert auf -6px stellen

[vega]

ja, margin-left:-6px löst bei "inhalt" das problem, wenn auch nur als schummelei/schlamperei.

ich kann nicht nachvollziehren, warum das -6 beerbt wird. kömisch.

das selbe könnte ich mit margin-top:-6px oben bei "menu" erzielen. dann sind die beiden auch wieder auf gleicher höhe (naja, nicht genau: 1 oder 2 pixel unterschied komischerweise).

hm, ich weiß nicht.

also, wenn ihr mir sagt, es gibt keine andere lösung, dann lasse ich es so. ich glaube allerdings, dass ich generell etwas dann vielleicht bei meinen DIVs falsch gemacht habe. vielleicht sollte ich das komplette css noch einmal posten?

andereseits sah es vor dem schaffen-effekt ja korrekt aus. nur wegen diesem effekt habe ich diese probs mit dem -6px. gibt es nicht einen befehl ähnlich dem clear, mit dem das aufgehoben wird? *grübel*

[vega]

das sind die dateien:

http://ivanschneider.com/test/navitest.css
http://ivanschneider.com/test/test.htm

[vega]

STOPP! ich habe alles verändert und nun ist das problem mit diesem margin:-6px weg.

dafür habe ich ein anderes kleineres problem, dem ich nicht herr werde. der schatten wird ordnungsgemäß angezeigt, bis auf den oberen rechten bereich. was ist denn daran nun wieder schuld?!

http://ivanschneider.com/test/navitest.css
http://ivanschneider.com/test/navitest.htm

dateien sind aktualisiert.

[vega]

http://ivanschneider.com/test/navistyle.css meinte ich natürlich.

[vega]

selbst gelöst. im :before:

background:url(grafx/dropshadow.png) left bottom no-repeat;

musste zu

background:url(grafx/dropshadow.png) right top no-repeat;

geändert werden.

[vega]

noch eine frage/ein problem zum schatten-effekt: wieso funktioniert das nur auf weißem hintergrund?

ich habe jetzt mal eine grafikdatei in den hintergrund eingebaut und dann sehe ich, dass diese alpha-datei nicht nur ein schwarzen schatten, sondern auch weiß mit drin hat. dadurch wird natürlich jegliche hintergrundgrafik unmöglich und das design scheitert.

gibt es keine reinen alpha-grafiken ohne andere farbtöne außer durchsichtiges schwarz für den schattenwurf?

[Azra]

gibt es keine reinen alpha-grafiken

Kein Photoshop oder ähnliches da, wenn schon Dreamweaver installiert ist?
Oder ist das noch die Macromedia Version
Ansonsten Google einfach mal nach schatten gif dateien, vielleicht auch eher shadow gif image.

[vega]

du, das problem ist nicht die grafik, denke ich. ich habe mittlerweile 4 verschiedene gif- und 3 weitere png-dateien ausprobiert. es wirkt immer so, als seien sie nicht transparent am rand und somit sieht man immer einen weißen rand über der hintergrundgrafik.

kann es doch am skript liegen? fehler eingeschlichen oder schlichtweg inkompatibel zu hintergrundgrafiken, die man im body festlegt?

Code: Alles auswählen

.shadow {
    background: url(grafx/dropshadow.png) no-repeat bottom right;
    float:left;
}
.shadow img {
    display: block;
    margin: 0px 9px 9px 0px;
}
.shadow:after {
    background:url(grafx/dropshadow.png) left bottom no-repeat;
    display:block;
    width:18px;
    height:9px;
    content:"";
    margin:-9px 0px 0px 0px;
}
.shadow:before {
    background:url(grafx/dropshadow.png) right top no-repeat;
    display:block;
    height:18px;
    content:"";
    margin-bottom:-18px;
}

[Azra]

Die Bilder sind nicht transparent.
Stell den beim body mal background-color: red; dann siehst du es.