nicht angemeldet
Grafik an anderer Stelle je nach Viewport
oxo888oxo
0 
Auge
0 
Matthias Apsel
Grafik an anderer Stelle je nach Viewport
oxo888oxo
Hallo
Meine Website ist responsive. Für die Desktop-Ansicht ist die Navigation ganz klassisch auf der linken Seite. Und für die Mobile-Ansicht ist die Navigation oben.
Nun habe ich hier eine Grafik die ich einbinden möchte. Und zwar so, dass sie in der Desktop-Ansicht an einer anderen Stelle zu sehen ist als in der Mobile-Ansicht.
In der Desktop-Ansicht soll die Grafik einfach in der Navigation unten an letzter Stelle stehen. In der Mobile-Ansicht soll die Grafik ganz unten im Footer der Seite stehen.
Ist das machbar mit Media-Queries?
Meine Idee war bisher diese: Ich binde die Grafik an beiden besagten Stellen ein. Und je nach Viewort verberge ich sie mittels CSS. Wäre das eine gescheite Lösung? Oder gibt es da noch eine bessere Möglichkeit?
Gruß Ingo
-
Hallo
In der Desktop-Ansicht soll die Grafik einfach in der Navigation unten an letzter Stelle stehen. In der Mobile-Ansicht soll die Grafik ganz unten im Footer der Seite stehen.
Ist das machbar mit Media-Queries?
Wenn die Grafik als Hintergrundbild eines Elements eingebunden ist, kannst du sie mal dem einen oder mal einem anderen Element als Hintergrund zuweisen. Ist die Grafik Teil des Inhalts, also wird sie als HTML-Element mittels
<img>eingebunden, sieht das anders aus. Du kannst das Bild zwar, je nach zutreffendem Media-Query verbergen oder anzeigen, es wird aber in den meisten Browsern geladen, auch wenn es nicht angezeigt werden soll. Es ist aus Sicht von HTML ja immer noch Teil des Inhalts.Tschö, Auge
--
Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview -
Hallo oxo888oxo,
In der Desktop-Ansicht soll die Grafik einfach in der Navigation unten an letzter Stelle stehen. In der Mobile-Ansicht soll die Grafik ganz unten im Footer der Seite stehen.
Ist das machbar mit Media-Queries?
Meine Idee war bisher diese: Ich binde die Grafik an beiden besagten Stellen ein. Und je nach Viewort verberge ich sie mittels CSS. Wäre das eine gescheite Lösung?
Ich würde sagen ja, wenn die Grafik wirklich in den Elementen stehen soll. Wenn sie aber beliebig mal in nav oder footer stehen kann, braucht sie vielleicht gar nicht in einem der beiden Elemente zu sein. Dann käme flexbox’ order in Frage. Das hängt aber vom Quelltext (und damit von der Semantik) ab.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)-
Hallo Martin
Wenn sie aber beliebig mal in nav oder footer stehen kann, braucht sie vielleicht gar nicht in einem der beiden Elemente zu sein. Dann käme flexbox’ order in Frage. Das hängt aber vom Quelltext (und damit von der Semantik) ab.
Da bin ich jetzt nicht so ganz sicher, wie das gemeint ist. Meine Seite ist ja nicht nach diesem felxbox-Prinzim "programmiert". Wäre das von Dir vorgeschlagene denn dann trotzdem möglich?
Gruß Ingo
-
Hallo oxo888oxo,
Wenn sie aber beliebig mal in nav oder footer stehen kann, braucht sie vielleicht gar nicht in einem der beiden Elemente zu sein. Dann käme flexbox’ order in Frage. Das hängt aber vom Quelltext (und damit von der Semantik) ab.
Da bin ich jetzt nicht so ganz sicher, wie das gemeint ist. Meine Seite ist ja nicht nach diesem felxbox-Prinzim "programmiert". Wäre das von Dir vorgeschlagene denn dann trotzdem möglich?
Es gibt ja nicht unbedingt ein flexbox-prinzip. ;-) Deine Seite könnte ja folgenden Aufbau haben.
<body> <main> <header> <nav> <aside> <figure> <!-- Hier das Bild --> </body>Dann braucht body ein display: flex und du kannst die Reihenfolge beliebig ändern.
Bis demnächst
Matthias--
Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)-
Dann braucht body ein display: flex und du kannst die Reihenfolge beliebig ändern.
Ah OK alles klar. Ich werde mich damit mal genauer befassen. Danke Dir.
-
-
-