✔ z-index funktioniert nicht - Elemente nicht sichtbar

[SpiceLab]

D U B I S T D E R G E I E L S T E !!!!!

Nicht so laut

 

[Eisbergsalat666]

.... zu früh gefreut ....

jetzt hab ich um das sich endlich bewegende logo eine begrenzung. hast du zufällig eine idee wie ich den rahmen größer definiere? hab die aktuelle version schon auf www.eisbergsalat666.bplaced.net hochgeladen

 

[SpiceLab]

jetzt hab ich um das sich endlich bewegende logo eine begrenzung. hast du zufällig eine idee wie ich den rahmen größer definiere?

Die (horizontale) Begrenzung gegenüber der ursprünglichen Fassung findet sich in der width:60%-Regel für die Klasse .banner-logo (siehe layout.css).

 

[Eisbergsalat666]

soweit war ich auch schon...das verändert allerdings nur die größe des logos allgemein ---> d.h. ich hab dann einen größeren rahmen inkl. eines größeren logos. also im endeffekt keine veränderung, außer ein größeres logo.
ich hoffe wirklich dich nicht zu nerven!

 

[SpiceLab]

Lösungsvorschlag (getestet):

• Regeländerungen in layout.css, um derzeitige Begrenzung zu maximieren:

header .banner {
  ...
  width:100%;
  ...
}
...
header .banner-logo {
   width:100%;
   ...
}

• Regelergänzung in jkit.css, um Grafikgröße zu minimieren:

div.parallax-container img {
   width:60%
}

Meine gewählten Angaben dürfen selbstverständlich nach Belieben angepasst werden

 

[Eisbergsalat666]

ich habs glaub ich gefunden. in der default.css befindet sich folgendes:

.row {
   width: 96%;
   max-width: 1020px;
   margin: 0 auto;

ich glaub ich weiß wie ich für das logo nen neuen bereich definiere.

.rowlogo {
   width: 100%;
   max-width: 100%;
   margin: 0 auto;

sollte funktionieren oder?

 

[Eisbergsalat666]

^^ gleichschnell....gut, war mein gedankengang wohl nicht so richtig. ich mach mir erstmal essen und mal schauen ob ich das heute noch hinbekomme.
ich geb auf alle fälle n feedback. schönen abend noch...sandy

 

[Grafixboy]

Hallo Eisbergsalat666
also wenn mein gemachter Fehler dich interessiert im folgenden Kommentar hat ihn SpiceLAB zittiert must du nur aufklappen dann kannst du meinen Anfängerfehler erkennen solange du dich mit Firebug auskennst.

Also bei mir funktioniert es so wie es SpiceLAB geschrieben hat bin aber ein wenig anders zur Lösung gekommen.

Der Container muss genau doppelt so groß sein wie das verwendete Bildmaterial weswegen ich die bilder einfach mal um und auf 50% reduziert habe. Nur dann Kannst du mit der Maus auch bis an den Rand der Seite ohne das was abgeschnitten wird.
Oder falls du weißt wie reduzierst du den Parallax Effect von 0.5 auf 0.25 zur Berechnung der Wert(Multiplikator) kann bei dir anders sein das ist der wie er in meinem Scrip verwendet wird.
dann verschiebt sich die Grafik nicht so stark auf der x- und y-Achse.

<div class="parallax parallax2" . . .>
<img alt="" src="images/Wolf_lightgrey.png" height="50%" width="50%">
</div>
<div class="parallax parallax3" . . .>
<img src="images/Wolf_grey.png" alt="" height="50%" width="50%">
</div>

PS:
zu den img damit es nicht so am oberen Rand klebt dann noch folgendes

style="margin-top:50px"

 

[SpiceLab]

<div class="parallax parallax2" . . .>
<img alt="" src="images/Wolf_lightgrey.png" height="50%" width="50%">
</div>
<div class="parallax parallax3" . . .>
<img src="images/Wolf_grey.png" alt="" height="50%" width="50%">
</div>

PS:
zu den img damit es nicht so am oberen Rand klebt dann noch folgendes

style="margin-top:50px"

Die beiden hinzugefügten HTML-Attribute finden sich in meinem gestrigen Vorschlag wieder

Weil darin nur width deklariert ist, gilt bei diesem Elementtyp <img> automatisch für height proportional derselbe Wert, und umgekehrt

Regelergänzung in jkit.css, um Grafikgröße zu minimieren:

div.parallax-container img {
   width:60%
}

Meine gewählten Angaben dürfen selbstverständlich nach Belieben angepasst werden

Falls erwünscht, lautet das neue CSS nun so:

div.parallax-container img {
  width:50%;
  margin-top:50px
}

 

[Eisbergsalat666]

einen wunderschönen euch! ich fang dann jetzt mal wieder an etwas zu basteln Das mit der Regelergänzung in der jkit.css

div.parallax-container img {
    width: 60%;
    margin: 50px;
}

hat einwandfrei funktioniert. mir war nicht bewusst, das ich regeln für verschiedene dateitypen auf grundlage einer festen schon bestehenden regel erstellen kann. man lernt nie aus