nicht angemeldet
Gunnar Bittersmann
Camping_RIDER
Camping_RIDER
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
ich wollte mein Problem in jsfiddle darstellen.
Wie aber kann ich ein Bild einbinden (ich habe noch keine Internet-Seite)?
Grüße
Doris
@@Doris:
nuqneH
ich wollte mein Problem in jsfiddle darstellen.
Mir scheint dein Problem bei JSFiddle nicht gut aufgehoben zu sein, sondern besser bei Dabblet oder Codepen. JSFiddle ist für CSS zu umständlich.
Wie aber kann ich ein Bild einbinden (ich habe noch keine Internet-Seite)?
Im Internet sollten genügend Bilder zu finden sein. Es sei denn, es dürfen keine Katzen drauf sein, dann wird’s schwer.
Aber nur Bilder verwenden, bei denen man die Genehmigung dazu hat. Bspw. von Wikimedia Commons oder placehold.it.
Qapla'
Hi Gunnar,
Mir scheint dein Problem bei JSFiddle nicht gut aufgehoben zu sein, ....
Mein Beispiel hat recht gut funktioniert, nur ein Bild konnte ich nicht einbinden.
Wie aber kann ich ein Bild einbinden (ich habe noch keine Internet-Seite)?
Im Internet sollten genügend Bilder zu finden sein. Es sei denn, es dürfen keine Katzen drauf sein, dann wird’s schwer.
Bilder hätte ich schon, aber die muss ich doch irgendwo ins Internet laden und dann einbinden.
Mit zwei freien Bildern habe ich es versucht - ohne Erfolg, siehe Beispiel
Grüße
Doris
Aloha ;)
Bilder hätte ich schon, aber die muss ich doch irgendwo ins Internet laden und dann einbinden.
Mit zwei freien Bildern habe ich es versucht - ohne Erfolg, siehe Beispiel
Ich habe mir die Freiheit herausgenommen, dein Beispiel upzudaten. Jetzt gehts.
Tipp für die Zukunft: Bild-URL ≠ URL der Bildseite in Wikimedia Commons
Grüße,
RIDER
Hi Rider,
Ich habe mir die Freiheit herausgenommen, dein Beispiel upzudaten. Jetzt gehts.
OK, das Bild ist jetzt da.
Und jetzt zu meinem eigentlichen Problem.
Wie erreiche ich, dass das Bild so klein wird, dass es in das div passt, dem die Breite 24% zugeordnet wurde?
Und wie erreiche ich, dass sich das Bild in der Größe anpasst, wenn die Größe des Bildschirms verändert?
Wenn ich die Seite verkleinere, wird das Bild abgeschnitten.
Grüße
Doris
Hallo
Wie erreiche ich, dass das Bild so klein wird, dass es in das div passt, dem die Breite 24% zugeordnet wurde?
Das hast du doch erreicht.
Dein Problem ist das du die Grundlagen von HTML / CSS überspringen willst. Du benutzt display-Angaben ohne dich über deren Auswirkung zu informieren.
Wenn du die 24% mal änderen würdest, zum Beispiel auf 50% oder 10% würdest du feststellen, dass das überhaupt keine Auswirkungen hat. Wenn du Angaben wie "display: table;", "display: table-row;", display: table-cell" benutzt, kannst du anschließend nur noch die dafür zulässigen Angaben verwenden. Unzulässige haben wie in deinem Beispiel keine Auswirkungen, sondern werden wie vorgesehen von den Browsern ignoriert.
Und gib den div zum Testen mal einen kräftigen Rahmen, zum Beispiel "div {border: 3px solid blue;}". Dann kannst du auch sehen, wie groß die div überhaupt sind und das Bilder sich korrekt in ihnen befinden.
Zum Erstellen von Seiten sollte man überhaupt viel mit kräftigen Rahmen und Hintergrundfarben arbeiten, um die Größe von Containern konkret sehen zu können.
Zudem solltest du von Anfang an auf die Semantik achten. Für Bilder mit einem zugehörigen einfachen Text sind das figure-Element und das figcaption-Elment gedacht. Die vielen unnützen div wie in deinem Beispiel ergeben keinen Sinn und sollten weggelassen werden, Stichwort: "divitis".
Gruss
MrMurphy
Aloha ;)
Full ACK und +1, außer...
Und gib den div zum Testen mal einen kräftigen Rahmen, zum Beispiel "div {border: 3px solid blue;}". Dann kannst du auch sehen, wie groß die div überhaupt sind und das Bilder sich korrekt in ihnen befinden.
Zum Erstellen von Seiten sollte man überhaupt viel mit kräftigen Rahmen und Hintergrundfarben arbeiten, um die Größe von Containern konkret sehen zu können.
So war das vor 5-10 Jahren. Der Webentwickler von heute benutzt die browsereigenen Entwicklertools. Die geben den genaustmöglichen Aufschluss über Containergrößen ohne nachteilsbehaftet zu sein. Dicke Rahmen dagegen sind problematisch, weil sie das Layout vollkommen verhauen können, da sie (im Standard-Boxmodell) nicht zur width und height gehören, sondern dazuaddiert werden.
Zudem solltest du von Anfang an auf die Semantik achten. Für Bilder mit einem zugehörigen einfachen Text sind das figure-Element und das figcaption-Elment gedacht. Die vielen unnützen div wie in deinem Beispiel ergeben keinen Sinn und sollten weggelassen werden, Stichwort: "divitis".
Der ist auch nett, ich kannte bisher nur divsuppe :D
Grüße,
RIDER
Moin,
Stichwort: "divitis".
Der ist auch nett, ich kannte bisher nur divsuppe :D
aber auch "Divitis" gehört hier im Forum schon seit Jahren zum aktiven Wortschatz.
Ciao,
Martin
Hallo MrMurphy
Wenn du Angaben wie "display: table;", "display: table-row;", display: table-cell" benutzt, kannst du anschließend nur noch die dafür zulässigen Angaben verwenden.
Au, wei!
Ich war der naiven Annahme, die Attribute seien durchgängig, d.h. width bedeutet immer Breite, egal wo ich es anwende.
Wie finde ich am besten heraus, wo width Gültigkeit hat
und umgekehrt, welche Attribute zulässig sind bei der Angabe von z.B. "display: table"
Gruß
Doris
Aloha ;)
Au, wei!
Ich war der naiven Annahme, die Attribute seien durchgängig, d.h. width bedeutet immer Breite, egal wo ich es anwende.
Naja, width bedeutet ja auch immer Breite... Nur manchmal wird die Breite eben nicht angewandt, weil andere Darstellungsmaximen für dieses Element vorrang haben. Bestes Beispiel: reine inline-Elemente. Diese besitzen allesamt kein Box-Modell.
Wie finde ich am besten heraus, wo width Gültigkeit hat
Die Gültigkeit bei Szenarien, in denen du display:... spezifizierst, richtet sich danach, ob die Eigenschaft bei dem Element, auf das display verweist, Gültigkeit besitzen. Also,
z.B. "display: table"
zeigt alle Gültigkeiten eines html-Elements table.
Welche Eigenschaften zum Zuge kommen, findest du experimentell ganz einfach über deine Entwicklerwerkzeuge heraus. Die sagen dir nämlich, welche Art von Box vom Element erzeugt wird und ob überhaupt eine Box erzeugt wird.
Wenn du's genauer wissen willst: Das W3C führt in seiner Spec (lies: Working Draft) zum basic box model die verschiedenen Typen von Boxen detailliert auf. In diesem Dokument - siehe Inhaltsverzeichnis - sind auch alle CSS-Eigenschaften des box-models aufgezählt. In den einzelnen Kapiteln steht dann je Eigenschaft, auf welche Elemente sie anwendbar sind.
Für width sind das:
all elements but non-replaced inline elements, table rows, and row groups
In deinem Fall: table und td können eine width haben, tr hingegen nicht. Entsprechend für display:table (ja), display:table-row (nein) und display:table-cell (ja).
Gruß
Doris
Grüße,
RIDER
Danke RIDER
für die umfangreiche Antwort!
Da habe ich jetzt ja was zum Studieren!
Viele Grüße
Doris
@@Doris:
nuqneH
Und wie erreiche ich, dass sich das Bild in der Größe anpasst, wenn die Größe des Bildschirms verändert?
Offenbar nicht mit Tabellen, da Browser Tabellenzellen so groß aufziehen, dass ihr Inhalt vollständig sichtbar ist.
Qapla'
@@Doris:
nuqneH
Mir scheint dein Problem bei JSFiddle nicht gut aufgehoben zu sein, ....
Mein Beispiel hat recht gut funktioniert, nur ein Bild konnte ich nicht einbinden.
Ich sagte auch nicht, es würde nicht funktionieren, sondern dass *JS*Fiddle für CSS nicht geeignet ist.
Qapla'
du kannst die Breite der Bilder prozentual zum Elternelement festlegen. Zwei Bilder nebeneinander mit jeweils width=49% werden kleiner und kleiner, wenn du den Viewport schmäler machst.
Deshalb weniger als 50%, weil meistens noch ein Rand oder ein Leerzeichen dazu kommt.
Linuchs
@@Linuchs:
nuqneH
du kannst die Breite der Bilder prozentual zum Elternelement festlegen. Zwei Bilder nebeneinander mit jeweils width=49% werden kleiner und kleiner, wenn du den Viewport schmäler machst.
Meine Glaskugel meint, dass hier eher max-width gefragt ist.
Deshalb weniger als 50%, weil meistens noch ein Rand
Das meist nicht.
oder ein Leerzeichen dazu kommt.
Da bist du mit 2% auch nicht auf der sicheren Seite. Bei störendem Whitespace wäre das Problem am Schopf zu packen, nicht mit magic numbers zu kaschieren.
Qapla'
Der Martin