[ERLEDIGT] CSS Menü Background Image

[SpiceLab]

OK, dann hab ich das mißverstanden.

Ansonsten, da ja Deine ursprüngliche Frage beantwortet/gelöst ist, können wir die Diskussion beenden, und ich würde abschließend im Betreff den Präfix "Frage" auf "Erledigt" setzen.

 

[bodyXY]

Ja, und auf jeden Fall danke für die Hilfe,

weiß nicht ob ich ein zweites Thread aufmachen soll, hänge nämlich gerade daran fest, dass ich 2 Header Bilder möchte. Das sich umschaltet wenn die Auflösung unter 700px ist. Irgend etwas mache ich da falsch.

Hab das als HTML Code:

<img src="logo1.png" srcset="logo2.png 700w, logo1.png 1750w" alt="SuperHero Page">

Kein CSS Code dazu, laut Internet sollte so reichen. Aber bekommen nur logo1 angezeigt, egal ob Handy-Ansicht oder Web-Ansicht.

 

[SpiceLab]

Irgend etwas mache ich da falsch.

Hab das als HTML Code:

<img src="logo1.png" srcset="logo2.png 700w, logo1.png 1750w" alt="SuperHero Page">

Der Code ist aber soweit in Ordnung.

Zum Vergleich:

• https://wiki.selfhtml.org/wiki/Img#mehrere_Bildquellen_mit_srcset
  
• https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

 

[SpiceLab]

Versuch es mal so, indem das kleinere Bild im src-Attribut genannt wird:

<img src="logo2.png" srcset="logo2.png 700w, logo1.png 1750w" alt="SuperHero Page">

Siehe hierzu:

• https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/#chapter5

mit dem dazugehörigen Demo:

• https://media.kulturbanause.de/blog/2014/09/responsive-images/srcset-sizes-3.html

 

[bodyXY]

• https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/#chapter5

Aus der Quelle hatte ich es auch bezogen. Den Test mache ich ja mit Google Chrome und der responsiv Ansicht. Hab deine Version jetzt getestet, leider keine Veränderung :/

 

[SpiceLab]

Aber bekommen nur logo1 angezeigt, egal ob Handy-Ansicht oder Web-Ansicht.

Aus der Quelle hatte ich es auch bezogen. Den Test mache ich ja mit Google Chrome und der responsiv Ansicht. Hab deine Version jetzt getestet, leider keine Veränderung :/

Dann besitzt das Handy-Display eine Auflösung, die nicht < 700px ist;)

 

[SpiceLab]

Das liegt an Chrome, wie ich eben feststellen konnte, denn das "kulturbanause"-Demo funktioniert auch nicht in ihm.

https://jsfiddle.net/SpiceLab/fmozsucw/ funktioniert bspw. in Firefox.

 

[bodyXY]

Hab jetzt mal alles in JSfiddle reingepackt:

https://jsfiddle.net/scjzLfkr/1/

 

[bodyXY]

Im Windows Edge Browser geht es auch nicht, Firefox hab ich nicht installiert

 

[SpiceLab]

Im Windows Edge Browser geht es auch nicht

http://caniuse.com/#search=srcset

 

[bodyXY]

hab Chrome 57, sagt, ist neuster Stand

 

[SpiceLab]

Was Chrome betrifft, tausche <img> gegen <picture> aus.

https://media.kulturbanause.de/blog/2014/09/responsive-images/picture-3.html funktioniert bei mir im Chrome tadellos.

Hab auch die aktuelle Version am Start.

Zu Edge kann ich leider nichts sagen, da ich (noch) unter "Windows 7" arbeite.

 

[bodyXY]

Damit klappt es jetzt, auch im Edge Browser:

<picture>
<source media="(min-width: 700px)" srcset="logo1.png">
<img src="logo2.png" alt="SuperHero Page">
</picture>

Was würde ich ohne euch nur machen ^^ Danke :)

 

[SpiceLab]

Damit klappt es jetzt, auch im Edge Browser

Danke für das Feedback :)

Was würde ich ohne euch nur machen

Hmm... vermutlich tüfteln, bis der Arzt kommt

Danke :)

Gern geschehen :)

 

[bodyXY]

Hmm... vermutlich tüfteln, bis der Arzt kommt
Gern geschehen :)

Ja so schauts aus ^^ gestern alleine über 3 Stunden vorher an dem Menü gehangen und ausprobiert bevor ich das Thread geöffnet hatte :)

Nach mal's Danke

Mach jetzt erst mal Pause da mir seit gestern der Kopf raucht

 

[SpiceLab]

Mach jetzt erst mal Pause da mir seit gestern der Kopf raucht

Kann ich mich gut daran zurückerinnern, schließlich hab ich auch mal klein angefangen

Ist halt nur schon eine gefühlte Ewigkeit her - round about 18 years

 

[bodyXY]

Denke ich mir ^^ Anpassungen und lesen von HTML sowie CSS kann ich eigentlich schon Problemlos wie Deutsch, aber die eigene Umsetzung, da muss man erst mal reinkommen.

Lerne gerade auch noch Java dazu, womit ich vorher gar nichts zu tun hatte, ist schon viel Input

Aber was muss das muss, danach will ich noch Informatik studieren

 

[bodyXY]

Guten Abend :) da bin ich wieder ^^

Habe mich jetzt mal an Gradient probiert und da auch einen Fehler den ich nicht ausgemerzt bekomme.

https://jsfiddle.net/6cyy2Lx5/

Sobald man das Menue ausklappt erweitert sich der Hintergrund der Navbar nach unten und dadurch kommt es zu einer Doppelung. Möchte dass die Navbar fix bleibt und jeder Reiter seinen eigenen Hintergrund hat, was ja schon gegeben ist. Möchte nur die Verbreiterung der Navbar nicht.

Wenn ich dafür ein max-hight setze, wird logischerweise das Reiter Menue ausgeblendet beim Aufklappen.

Gruß

 

[SpiceLab]

1. Ausgangspunkt: https://www.w3schools.com/cssref/func_repeating-linear-gradient.asp
2. Demo: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_gradient-linear_repeating
3. -repeating im Demo-CSS gelöscht: https://www.w3schools.com/code/tryit.asp?filename=FEQ9L0826UZX - Grünen Button "Run" klicken

Btw, ID-Bezeichner id="myID" dürfen im HTML-Dokument nur einmal vorkommen.

Multiple Angaben sind durch eine CSS-Klasse zu ersetzen: class="myClass" (HTML-Attribut) und .myClass (CSS-Selektor, Klasse beginnt mit Punkt).

 

[bodyXY]

Hey,

die ID hab ich ja nur mehrfach benutzt da es ja keinen Unterschied macht ob ich die 3 mal verwende, wenn ich für alle 3 die gleiche CSS Zuweisung benutze.

https://jsfiddle.net/6cyy2Lx5/1/

Hab jetzt die ID einzeln zugewiesen, aber das ändert ja nichts an dem Problem. Welches ja durch die Klasse ".menue" in der CSS verursacht wird und nicht durch die ID "#secendBG"?

Möchte ja erreichen, dass die Klasse ".menue" sich nicht nach unten verlängert wenn ich das Reiter-Menü öffne, sondern nur der Hintergrund der einzelnen ID Zuweisungen von "#secendBG" angezeigt werden.

Bei der Priorität steht ja ID über der Klasse. Deswegen verstehe ich nicht, wieso sich das nach unten verlängert?