nicht angemeldet
Banner über die Seite legen
0 
Rolf B
0 0 Rolf B
0 0 Rolf B
0 
Der Martin
0 0 Tabellenkalk
0 0 Rolf B
0 OT: Flaggenzoom
0 
MudGuard
Banner über die Seite legen
Hallo, ich möchte möglichst rasch die ukrainische Fahne über einen Teil meiner HP-Seite legen. Aus Zeitgründen möchte ich dies nicht wie in HTML üblich durch wiederholte Tipps realisieren. Ich würde mich daher freuen, wenn mir jemand ein fertiges Beispiel zeigen könnte. Meine Kenntnisse: HTML und CSS
-
Hallo Gerlinde,
(Fahne) über einen Teil meiner HP-Seite legen.
Das müsstest Du konkretisieren. Soll die Fahne mitscrollen, wenn die Homepage scrollt? Sprich: liegt die Fahne relativ zu einem klar definierbaren HTML Container-Element deiner Homepage?
In dem Fall: position:relative am Container, position:absolute am Bild
Oder soll sie über der Seite liegen, egal wohin die Seite gescrollt ist?
In dem Fall: position:fixed am Bild
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf.
Die Flagge soll immer in der Mitte des screens angezeigt werden.-
Hallo Gerlinde,
ok, ich habe vorhin noch editiert und 2 Vorschläge in einem Fiddle gezeigt.
Du brauchst dann wohl die Version mit position:fixed.
Rolf
--
sumpsi - posui - obstruxi-
Danke Rolf,
leider verstehe ich vieles von Deinem Fiddle nicht (before, content, aspect-ratio, ...).
Bis ich mich da eingearbeitet habe, ist der Krieg hoffentlich beendet.
Aber vielleicht regt dieser Thread andere dazu an, auf diese Art den Krieg anzuprangern.-
Hallo Gerlinde,
mit ::before definierst Du ein Pseudoelement. D.h. du brauchst im HTML nichts zu tun, die Angabe
body::before { content: "xyz"; }sorgt dafür, das aus
<body> <h1>Überschrift</h1> <p>Bla Bla</p> </body>etwas wird, das man sich so vorstellen könnte (es ist nur eine Visualisierung, kein gültiges HTML)
<body> <::before>xyz</::before> <h1>Überschrift</h1> <p>Bla Bla</p> </body>Die content-Angabe ist Pflicht für ein ::before und gibt den Inhaltstext an.
Ohne zusätzliche CSS Eigenschaften verhält sich das ::before-Element so wie ein <span>. Über weitere CSS Angaben mache ich daraus ein Blockelement mit absoluter oder fixer Positionierung, gebe ihm eine Größe relativ zur Fensterbreite und male per linear-gradient eine Ukraine-Fahne hinein.
Die aspect-ratio Eigenschaft ist relativ neu im CSS Eigenschaftenzoo, sie sorgt dafür, dass sich Breite und Höhe des Elements im angegebenen Verhältnis befinden. Früher musste man da mit padding-bottom tricksen. aspect-ratio macht das deutlich einfacher.
Außer ::before gibt es auch noch ::after, um am Ende eines Elements ein Pseudoelement einzufügen.
Wenn der Selektor vor dem ::before auf mehrere Elemente passt, bekommt jedes davon das Pseudoelement eingefügt.
h2::before { content: "* "; }würde in jeder h2 Überschrift ein Sternchen an den Anfang setzen.
Artikel im Selfwiki zu ::before und ::after
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
mit ::before definierst Du ein Pseudoelement. D.h. du brauchst im HTML nichts zu tun, die Angabe
body::before { content: "xyz"; }sorgt dafür, das aus
<body> <h1>Überschrift</h1> <p>Bla Bla</p> </body>etwas wird, das man sich so vorstellen könnte (es ist nur eine Visualisierung, kein gültiges HTML)
<body> <::before>xyz</::before> <h1>Überschrift</h1> <p>Bla Bla</p> </body>Die content-Angabe ist Pflicht für ein ::before und gibt den Inhaltstext an.
ergänzend zu deiner anschaulichen Erklärung:
Die Pseudoelemente ::before und/oder ::after werden als Kindelemente des damit ausgestatteten Elements aufgefasst. Daraus folgt, dass ::before und ::after nur bei Elementen verwendet werden können, die auch Inhalt haben dürfen.
Deshalb bleibt ein ::before wirkungslos, wenn es beispielsweise auf ein img-Element angewendet wird, weil img per definitionem ein leeres Element ist, also keinen Inhalt haben kann. Das gilt ebenso für das input-Element oder etwa für br oder hr.
Möge die Übung gelingen
Martin--
Darmstadt? Ist das nicht da, wo immer der Urologen-Kongress tagt? -
Hallo Rolf,
ich habe folgendes getestet (https://jsfiddle.net/wm6jqrn0/)
<body> <::before>xyz</::before> <h1>Überschrift</h1> <p>Bla Bla</p> </body>Das ergibt aber ein seltsames Ergebnis.
-
Hallo,
Rolf schrieb u.A.:
ein Pseudoelement.
du brauchst im HTML nichts zu tun,
es ist nur eine Visualisierung, kein gültiges HTML)
Wenn du also Folgendes wirklich getestest hast:
<body> <::before>xyz</::before> <h1>Überschrift</h1> <p>Bla Bla</p> </body>brauchst du dich über ein
seltsames Ergebnis.
nicht zu wundern…
Gruß
Kalk-
@Kalk:
Da ich das "::before" nicht kenne und ein komplettes Konstrukt
<body> ....</body>
sehe, gehe ich davon aus, dass es Sinn hat und funktioniert!
Wenn man das mir unbekannte "<::before>xyz</::before>" weglässt, kommt ja ein sinnvolles Ergebnis.-
Hallo Gerlinde,
genau das hatte ich befürchtet, als ich das Beispiel machte. Für jemanden, der ::before noch nie gesehen hat, war es verwirrend. Ich wiederhole nochmal:
<::before> ist nur eine Visualisierung, kein gültiges HTML
Ich wollte damit verdeutlichen, was die ::before-Angabe im CSS im Dokument erzeugt, eine Analogie schaffen. Aber für die praktische Anwendung muss das ::before im CSS stehen und nicht im HTML.
Guck nochmal: https://jsfiddle.net/Rolf_b/8gc6qbsm/
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
-
-
-
-
-
Hallo,
Wenn man geschickt in die schwedische Flagge reinzoomt erhält man die ukrainische.
Für welche Flaggen gilt das noch?
Gruß
Kalk-
Hi,
Wenn man geschickt in die schwedische Flagge reinzoomt erhält man die ukrainische.
Für welche Flaggen gilt das noch?
Ruanda, Bahamas, …
Wenn man auch Drehung erlaubt: Rumänien, Barbados, Bosnien+Herzegowina, Ecuador, St. Lucia, Gabun …
usw.
cu,
Andreas a/k/a MudGuard
-