nicht angemeldet
HTML Frage
marctrix
Gunnar BittersmannHallo an alle,
ich bin ein HTML Neuling und habe an die Erfahrenen hier im Forum eine Frage. Ich möchte auf einer Html-Seite ein Bild und den passenden Text dazu auf gleicher Höhe platzieren, wie kann ich das am besten umsetzen?
LG Lisa
-
Hej Lisa009,
ich bin ein HTML Neuling und habe an die Erfahrenen hier im Forum eine Frage. Ich möchte auf einer Html-Seite ein Bild und den passenden Text dazu auf gleicher Höhe platzieren, wie kann ich das am besten umsetzen?
Das kommt drauf an - mit Flexbox bekommst du zwei nebeneinanderliegende Spalten, mit float kann man den Text um das Bild herum fließen lassen.
Beides hat seine Vor- und Nachteile, beides sind Techniken, mit denen noch viel mehr geht und mit denen man sich daher ein bisschen Auseinandersetzen muss.
Insbesondere float sollte man verstehen, denn sonst scheitert man schnell an nur scheinbar unerklärlichem Verhalten.
Eine kurze und leicht Verständliche Erklärung gibt es unter Float: Die Theorie
Marc
-
[Vollzitat entfernt]
Danke für die schnelle Antwort, mit einer Tabelle könnte ich das doch auch bewerkstelligen?
-
Liebe Lisa009,
mit einer Tabelle könnte ich das doch auch bewerkstelligen?
und dann? Dann hast Du eine Tabelle. Was Du aber an Inhalten anbietest, sind keine tabellarischen Daten! Und die Tabelle hat noch einen heute wieder wichtigen Nachteil, denn dann kann der Browser nicht mehr je nach verfügbarer Breite (denke an Tablet- und Smartphone-Browser!) die beste Darstellung wählen. Insbesondere bei schmalen Viewports (denke Smartphone aufrecht) hat der Besucher entweder nur eine Hälfte im Blick, oder alles wird sehr winzig dargestellt, damit das auch alles schön nebeneinander angeordnet ist.
Glaube mir, Du suchst float. Das hat etwas mit CSS zu tun, welches sich mit HTML kombinieren lässt. Dann kann der Browser auch bei schmalem Platz sinnvoll darstellen.
Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
und dann? Dann hast Du eine Tabelle.
Eher eine Gestelle. ;-)
Was Du aber an Inhalten anbietest, sind keine tabellarischen Daten!
Das ist der Punkt. Bei Verwendung von Tabellen zum Gestalten werden Verknüpfungen zwischen den „Zellen“ hergestellt, wo inhaltlich gar kein Zusammenhang besteht. Deshalb sollte man, wenn man Tabellen zum Gestalten missbraucht,
<table role="presentation">schreiben. Aber man sollte keine Tabellen zum Gestalten missbrauchen.Und die Tabelle hat noch einen heute wieder wichtigen Nachteil, denn dann kann der Browser nicht mehr je nach verfügbarer Breite (denke an Tablet- und Smartphone-Browser!) die beste Darstellung wählen. Insbesondere bei schmalen Viewports (denke Smartphone aufrecht) hat der Besucher entweder nur eine Hälfte im Blick, oder alles wird sehr winzig dargestellt, damit das auch alles schön nebeneinander angeordnet ist.
Das ließe sich mit wenigen Zeilen CSS beheben. Aber man sollte keine Tabellen zum Gestalten missbrauchen.
Glaube mir, Du suchst float.
Das glaube ich nicht. Von „Umfließen“ stand nichts im OP. Lisa sucht nicht float. Eher Flexbox oder
display: inline-block.LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
Hej Lisa009,
Das kommt drauf an - mit Flexbox bekommst du zwei nebeneinanderliegende Spalten, mit float kann man den Text um das Bild herum fließen lassen.
Danke für die schnelle Antwort, mit einer Tabelle könnte ich das doch auch bewerkstelligen?
Du kannst mit einer Layout-Tabelle zwei Spalten erzeugen. Das ist aber nicht sinnvoll, weil du dann (z. B. Suchmaschinen gegenüber) behauptest, tabellarische Daten anzuzeigen, wo gar sind.
Außerdem bekommst du eine Tabelle nur mit großem Aufwand ordentlich auf einem Smartphone dargestellt - und das benutzt allmählich die Mehrheit zum surfen.
Auch mit den Tücken von Tabellen muss man sich auseinandersetzen, wenn man diese verwenden will, die verhalten sich nämlich auch nicht so, wie man es von anderen Elementen gewöhnt ist - und zu guter letzt: Text um ein Bild fließen zu lassen geht damit nicht.
Von daher: flexbox oder float - je nachdem, wie dein Ergebnis aussehen soll.
Marc
-
-
-
@@Lisa009
Ich möchte auf einer Html-Seite ein Bild und den passenden Text dazu …
Was heißt „passender Text“? Eine Bildunterschrift? Oder der Absatz im Fließtext, zu dem das Bild inhaltlich gehört?
Die Unterscheidung ist wichtig um sagen zu können, welche HTML-Elemente du vermenden must.
… auf gleicher Höhe platzieren, wie kann ich das am besten umsetzen?
Was heißt „auf gleicher Höhe“? Sollen die Oberkanten von Bild und Text übereinstimmen? Die Unterkanten?
Was hieße Oberkante? Die H-Linie (Höhe der Großbuchstaben)? Die x-Linie (Höhe der Kleinbuchstaben)?
Was hieße Unterkante? Die Grundlinie? Die p-Linie (Unterlängen)?
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|