nicht angemeldet
<img> ragt aus <div>-Rahmen hervor - Warum?
Matthias Apsel
Der Martin
Gunnar BittersmannHallo Ihr! :)
Vorweg: Ich bin Anfänger und das bisschen, was ich über HTML, CSS & Co so weiß, hab ich mir selber aus selfHTML zusammengeklaubt. Ich habe zwar versucht im Forum etwas zu finden, das meinem Problem entspricht, aber ich hab schon Schwierigkeiten damit mein Problem in die richtigen Worte zu fassen - und dementsprechend leider nichts gefunden. Ich war/bin mir nicht mal wirklich sicher, ob mein Problem in den HTML/XHTML-Bereich oder in den CSS-Bereich gehört ^^'
Das ist mein erster Beitrag hier - ich hoffe, ich hab es nicht komplett falsch gemacht...
Nun aber zu meinem Problem:
Ich bewege mich in einer Wordpress-Umgebung und versuche einen von mir angelegten div-block nach meinen Vorstellungen zu formatieren, in dem ein <img>-Element, ein <blockquote>-Element und ein <p>-Element drin sind. Die beiden Text-Elemente fließen dabei per float um das Bild herum.
Wo das Problem beginnt: Ich will einen Rahmen um den <div>-Block und alle seine Inhalte ziehen. Das klappt im Grunde auch, aber das <img>-Element, das ich in diesem <div>-Block drin habe, wird dabei einfach ignoriert - und mir ist nicht klar, warum das so ist.
Ich würde es so haben wollen, dass der Rahmen nicht nur um den Text gezogen wird, sondern bis ganz nach unten um das Bild herum reich. Und da das Bild im <div> drinnen ist, und ich dem <div> den Rahmen zugewiesen habe, müsste das doch auch so sein? Oder habe ich da irgendwas noch nicht verstanden?
Hier ein Link zum Ergebnis und der zugrundeliegende Code:
http://wcraft.lorebase.org/der-tag-des-drachen/
<div style="text-align:left; padding:20px; border:thin solid silver">
<img style="width:40%; float:left; margin-right:20px; margin-bottom:20px" src="http://wcraft.lorebase.org/wp-content/uploads/cover.book_.dayofthedragon-de-430x640.jpg" title="" alt="Cover von 'Der Tag des Drachen'"/>
<blockquote>"Furchteinflössende Ereignisse in den höchsten Zaubererkreisen zwingen den jungen Magier Rhonin zu einer gefährlichen Reise in das von Orks kontrollierte Land Khaz Modan. Dort entdeckt Rhonin eine gewaltige, weitreichende Verschwörung, die dunkler ist als alles, was er sich je vorstellen konnte. Diese Bedrohung zwingt ihn zu einer gewagten Allianz mit uralten Kreaturen der Luft und des Feuers. Mit ihrer Hilfe wird es für die Welt Azeroth vielleicht ein Morgen geben."</blockquote>
<p style="font-weight:bold">Der Tag des Drachen, Buchrücken</p>
</div>
Nun habe ich vor allem eine Frage: Ist etwas an meinem Code falsch oder habe ich etwas vergessen, das ich hätte berücksichtigen müssen?
Denn sollte der Code eigentlich richtig sein, um das zu erreichen, was ich beabsichtige, dann liegt das Problem vielleicht beim Wordpress-Theme oder Ähnlichem...
Ich bin gespannt auf Eure Antworten und erlaube mir, schon mal im Vorhinein danke zu sagen! :)
-
Om nah hoo pez nyeetz, Patrick, der Neuling!
<div style="text-align:left; padding:20px; border:thin solid silver">
<img style="width:40%; float:left; margin-right:20px; margin-bottom:20px" src="http://wcraft.lorebase.org/wp-content/uploads/cover.book_.dayofthedragon-de-430x640.jpg" title="" alt="Cover von 'Der Tag des Drachen'"/>
<blockquote>"Furchteinflössende Ereignisse in den höchsten Zaubererkreisen zwingen den jungen Magier Rhonin zu einer gefährlichen Reise in das von Orks kontrollierte Land Khaz Modan. Dort entdeckt Rhonin eine gewaltige, weitreichende Verschwörung, die dunkler ist als alles, was er sich je vorstellen konnte. Diese Bedrohung zwingt ihn zu einer gewagten Allianz mit uralten Kreaturen der Luft und des Feuers. Mit ihrer Hilfe wird es für die Welt Azeroth vielleicht ein Morgen geben."</blockquote>
<p style="font-weight:bold">Der Tag des Drachen, Buchrücken</p>
</div>1\. Es ist nicht gut, inline-style-Angaben zu machen. [Einbinden einer CSS-Ressource](http://wiki.selfhtml.org/wiki/CSS/Einbindung#Einbinden_einer_externen_Datei) 2\. Prozentuale Breitenangaben bei img-Elementen beziehen sich auf die Grafikbreite und nicht auf die Breite des Elternelements. 3\. gefloatete Elemente haben keinen Einfluss auf ihr Elternelement, du musst sie [einschließen](http://molily.de/weblog/css-floats-einschliessen). Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Deck und Deckhengst](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=D#deck). -
Om nah hoo pez nyeetz, Matthias Apsel!
- Prozentuale Breitenangaben bei img-Elementen beziehen sich auf die Grafikbreite und nicht auf die Breite des Elternelements.
Korrektur: Das trifft auf
style="width: 40%;"nicht zu.Matthias
-
-
Hallo Ihr! :)
Hallo du! :-)
Vorweg: Ich bin Anfänger und das bisschen, was ich über HTML, CSS & Co so weiß, hab ich mir selber aus selfHTML zusammengeklaubt. Ich habe zwar versucht im Forum etwas zu finden, das meinem Problem entspricht, aber ich hab schon Schwierigkeiten damit mein Problem in die richtigen Worte zu fassen
Hmm, das sind schwierige Voraussetzungen.
Ich war/bin mir nicht mal wirklich sicher, ob mein Problem in den HTML/XHTML-Bereich oder in den CSS-Bereich gehört ^^'
Eher letzteres. Was die Darstellung von Inhalten angeht, ist in der Regel Sache von CSS.
Das ist mein erster Beitrag hier - ich hoffe, ich hab es nicht komplett falsch gemacht...
Nö, keineswegs. Du beschreibst dein Problem einigermaßen verständlich, du fragst brav und anständig, du zeigst den dazu nötigen Code - damit qualifizierst du dich schon sehr gut.
<div style="text-align:left; padding:20px; border:thin solid silver">
<img style="width:40%; float:left; margin-right:20px; margin-bottom:20px" src="http://wcraft.lorebase.org/wp-content/uploads/cover.book_.dayofthedragon-de-430x640.jpg" title="" alt="Cover von 'Der Tag des Drachen'"/>
<blockquote>"Furchteinflössende Ereignisse in den höchsten Zaubererkreisen zwingen den jungen Magier Rhonin zu einer gefährlichen Reise in das von Orks kontrollierte Land Khaz Modan. Dort entdeckt Rhonin eine gewaltige, weitreichende Verschwörung, die dunkler ist als alles, was er sich je vorstellen konnte. Diese Bedrohung zwingt ihn zu einer gewagten Allianz mit uralten Kreaturen der Luft und des Feuers. Mit ihrer Hilfe wird es für die Welt Azeroth vielleicht ein Morgen geben."</blockquote>
<p style="font-weight:bold">Der Tag des Drachen, Buchrücken</p>
</div>> Ich bewege mich in einer Wordpress-Umgebung und versuche einen von mir angelegten div-block nach meinen Vorstellungen zu formatieren, in dem ein <img>-Element, ein <blockquote>-Element und ein <p>-Element drin sind. Die beiden Text-Elemente fließen dabei per float um das Bild herum. > Wo das Problem beginnt: Ich will einen Rahmen um den <div>-Block und alle seine Inhalte ziehen. Das klappt im Grunde auch, aber das <img>-Element, das ich in diesem <div>-Block drin habe, wird dabei einfach ignoriert - und mir ist nicht klar, warum das so ist. Weil Elemente, die mit `float`{:.language-css} formatiert werden, aus dem normalen Textfluss herausgelöst werden und die Größe ihres Elternelements nicht mehr beeinflussen. Um das zu vermeiden, gibt es mehrere Möglichkeiten. Eine ist, dem letzten Element im float-Kontext (das wäre bei dir das p) ein `clear:left;`{:.language-css} oder `clear:both;`{:.language-css} zu verpassen, um das Floaten an der Stelle wieder aufzuheben. Eine andere, IMO elegantere ist, dem Containerelement `overflow:auto;`{:.language-css} mitzugeben. Eine weitere Möglichkeit wäre, das Elternelement ebenfalls zu floaten - das möchte man aber wegen der möglichen Nebenwirkungen wahrscheinlich vermeiden. > Oder habe ich da irgendwas noch nicht verstanden? Ja. Die nicht ganz triviale Funktionsweise von float und seine Kollateralschäden. Übrigens möchte ich dir dringend ans Herz legen, HTML und CSS sauber zu trennen - also nicht CSS-Angaben in style-Attributen zu notieren. Auch nicht "schnell mal zum Ausprobieren". Wenn du das in ein isoliertes Stylesheet auslagerst, entweder als style-Block im Kopf des HTML-Dokuments, oder noch besser als separate CSS-Ressource, ist das meist viel übersichtlicher und leichter zu pflegen. So long, Martin -- Vielseitigkeit: Von vielen Dingen keine Ahnung haben. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Wow, also erst mal ein herzliches Dankeschön für die Hilfe, die Erläuterungen und die Links: Ich hab mir das alles angesehen und es hat mir sehr geholfen! Danke!
Für das Weitere gliedere ich meine Antwort mal in 3 Schritte:
1. Aktuelle Lösung
Oberste Priorität für mich als Anfänger hat natürlich erst einmal, dass mein Ergebnis so ausschaut, wie ich mir das vorstelle. Daher hab ich mal die mir am einfachsten erscheinende Lösung umgesetzt. Hier seht ihr das Ergebnis und den Code:
http://wcraft.lorebase.org/der-tag-des-drachen/
Im Grunde habe ich einfach noch das
overflow:autoeingefügt, wie von "Der Martin" empfohlen. Das erschien mir hier von den angebotenen Lösungen tatsächlich das Sinnigste zu sein.<div style="text-align:left; padding:20px; border:thin solid silver; overflow:auto"> <img style="width:40%; float:left; margin-right:20px; margin-bottom:20px" src="http://wcraft.lorebase.org/wp-content/uploads/cover.book_.dayofthedragon-de-430x640.jpg" title="" alt="Cover von 'Der Tag des Drachen'"/> <blockquote>"Furchteinflössende Ereignisse in den höchsten Zaubererkreisen zwingen den jungen Magier Rhonin zu einer gefährlichen Reise in das von Orks kontrollierte Land Khaz Modan. Dort entdeckt Rhonin eine gewaltige, weitreichende Verschwörung, die dunkler ist als alles, was er sich je vorstellen konnte. Diese Bedrohung zwingt ihn zu einer gewagten Allianz mit uralten Kreaturen der Luft und des Feuers. Mit ihrer Hilfe wird es für die Welt Azeroth vielleicht ein Morgen geben."</blockquote> <p style="font-weight:bold">Der Tag des Drachen, Buchrücken</p> </div>2. Auslagern der CSS-Ressource
Eigentlich bin ich ja optisch gesehen mit dem bisherigen Ergebnis zufrieden, aber ich denke, ich sehe durchaus auch Vorteile in der von Euch angeregten Trennung zwischen Inhalt und Style. Zuerst hatte ich mir gedacht, dass das doch so, wie ich es gemacht hab, viel praktischer ist, weil ich ja vielleicht nicht jedes DIV mit Rahmen haben will, sondern nur manche!
Aber hier kämen dann wohl, wenn man es ordentlich machen will, die "Klassen" zum Zuge, oder? Ich müsste quasi eine Div-Klasse "Rahmen" o.Ä. erstellen, und die dann den Divs zuweisen, die ich mit Rahmen haben will? Wäre das die von euch als richtig angesehene Vorgehensweise?
Noch hab ich zwar keinen wirklichen Plan wie - und vor allem wo - ich diese Klassen dann anlegen müsste, aber das könnte ich dann ja vielleicht mit selfHTML herausfinden. :) Habe gestern auch das Wiki entdeckt, das ja auch echt super ist! :)3. Wordpress-bezogene Schwierigkeiten
Die tatsächlich auch dateitechnische Trennung von Style und Inhalt durch ein separates Stylesheet, das ihr auch angeregt hattet, wird aber kaum möglich sein, denn ich bin ja in einer Wordpress-Umgebung und tippe meinen Code nicht in eine von mir erstellte Datei, sondern in ein Editorfeld, dass meinen Code dann in die entsprechende Stelle des Blogcodes einfügt.
Das höchste der Gefühle wären also wohl Styledefinitionen im Header des HTML-Dokumentes, wie es hier (http://wiki.selfhtml.org/wiki/CSS/Einbindung#Einbinden_einer_externen_Datei - danke an Mathias Aspel für den Link!) unter "Formate zentral in einem style-Element festlegen" gezeigt wird:
Aber selbst ob diese Lösungen funktionieren würden, weiß ich nicht wirklich. Das hängt wohl davon ab, wie der Blog an sich oder das Wordpress-Theme mit den Sachen umgeht, die ich in den Editor tippe...
Mit meinem begrenzten Verständnis sehe ich das so, dass der Editor meinen Code entweder direkt in ein bestehendes HTML-Dokument einsetzt (dann kann ich da wohl nicht mehr mit einem neuen Header kommen, denn das hat ja dann schon einen?) oder dass mein Editor ein eigenständiges HTML-Dokument generiert, das dann in das übergeordnete HTML-Dokument der Blog-Page per Link oder so eingebunden wird (dann müsste ein eigener Header gehen?).
Sollte es so aber nicht gehen müsste ich wohl an eines der gefühlten tausend Stylesheets des Wordpress-Themes oder sonstwo ran, um meine Klassen zu erstellen, was meine Fähigkeiten dann vllt. überfordert... Puh... ^^'Natürlich ist mir klar, dass das hier kein Wordpress-Forum ist. Ich wollte nur mal meine Gedankengänge in Bezug auf Eure Verbesserungsvorschläge schildern. Was natürlich auch nicht heißen soll, dass ich Erläuterungen/Lösungsvorschlägen in Bezug auf das Wordpress-Problem abgeneigt wäre, sollte es zufällig jemand wissen. ;)
Viele Grüße und nochmal vielen Dank für die großartige Hilfe!
Euer Neuling ;)-
@@Patrick, der Neuling:
nuqneH
aber ich denke, ich sehe durchaus auch Vorteile in der von Euch angeregten Trennung zwischen Inhalt und Style.
Gut.
Aber hier kämen dann wohl, wenn man es ordentlich machen will, die "Klassen" zum Zuge, oder?
Eventuell. Oder IDs.
Ich müsste quasi eine Div-Klasse "Rahmen" o.Ä. erstellen, und die dann den Divs zuweisen, die ich mit Rahmen haben will?
Nein. Dann hättest du ja präsentationsbezogenes Markup, d.h. Darstellung im HTML angegeben, also wieder nicht Inhalt und Style voneinander getrennt.
Du kannst die entsprechenden Elemente (bspw.
<div id="foo">und<div class="bar">) selektieren und zusammenfassen:#foo, .bar { border: 1px solid }Mit CSS-Präprozessoren lässt sich das mit Extends noch besser realisieren. Bsp. Sass:
%rahmen { border: 1px solid } #foo { @extend %rahmen; } .bar { @extend %rahmen; }Daraus wird der o.g. CSS-Code generiert.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Meine aktuelle Lösung, auch wenn sie Euren Angregungen nicht 100% entspricht. Aber dazu dann unten mehr. Erst mal der aktuelle Stand:
Link: http://wcraft.lorebase.org/der-tag-des-drachen/
(Falls jemand neu dazukommt: es geht nur um das erste <div> mit dem Bild drin)Ich habe mein html-Dokument aufgeteilt, um mit Klassen arbeiten zu können. Hier die Style-Definitionen:
<style type="text/css"> div.rahmen { border:thin solid silver; overflow:auto; padding:20px; margin-bottom:35px; text-align:justify; } </style>Und hier dann das <div>:
<div class="rahmen"> <img style="width:40%; float:left; margin-right:20px; margin-bottom:20px" src="http://wcraft.lorebase.org/wp-content/uploads/cover.book_.dayofthedragon-de-430x640.jpg" title="" alt="Cover von 'Der Tag des Drachen'"/> <blockquote>"Furchteinflössende Ereignisse in den höchsten Zaubererkreisen zwingen den jungen Magier Rhonin zu einer gefährlichen Reise in das von Orks kontrollierte Land Khaz Modan. Dort entdeckt Rhonin eine gewaltige, weitreichende Verschwörung, die dunkler ist als alles, was er sich je vorstellen konnte. Diese Bedrohung zwingt ihn zu einer gewagten Allianz mit uralten Kreaturen der Luft und des Feuers. Mit ihrer Hilfe wird es für die Welt Azeroth vielleicht ein Morgen geben."</blockquote> <p style="font-weight:bold">Der Tag des Drachen, Buchrücken</p> </div>Damit habe ich doch jetzt schon mal eine Trennung zwischen style und content, oder nicht? Das eine steht im <head> und das andere im <body>. Das verschafft mir den Vorteil nur einmal sagen zu müssen, wie meine divs aussehen sollen.
Super wäre natürlich, wenn ich die Klassen direkt im Stylesheet meines Themes definieren könnte, aber DAS bzw. die richtige Stelle darin müsste ich erst mal finden. ^^'
Zu dem was noch gesagt wurde:
Ich müsste quasi eine Div-Klasse "Rahmen" o.Ä. erstellen, und die dann den Divs zuweisen, die ich mit Rahmen haben will?
Nein. Dann hättest du ja präsentationsbezogenes Markup, d.h. Darstellung im HTML angegeben, also wieder nicht Inhalt und Style voneinander getrennt.
Versteh ich nicht. IRGENDWIE muss ich doch auch im HTML den Verweis einbauen, wie mein div aussehen soll! Zumindest dann, wenn ich die Möglichkeit behalten will verschiedene div-styles zu nutzen? Oder steh ich da auf dem Schlauch?
Du kannst die entsprechenden Elemente (bspw.
<div id="foo">und<div class="bar">) selektieren und zusammenfassen:#foo, .bar { border: 1px solid }
> > > Mit CSS-Präprozessoren lässt sich das mit Extends noch besser realisieren. Bsp. Sass: > > ~~~css %rahmen { border: 1px solid } > > #foo { @extend %rahmen; } > > .bar { @extend %rahmen; }Daraus wird der o.g. CSS-Code generiert.
DAS überfordert mich jetzt total. Ich weiß gar nicht, wo ich anfangen soll zu fragen :D
-
Om nah hoo pez nyeetz, Patrick, der Neuling!
Nein. Dann hättest du ja präsentationsbezogenes Markup, d.h. Darstellung im HTML angegeben, also wieder nicht Inhalt und Style voneinander getrennt.
Versteh ich nicht. IRGENDWIE muss ich doch auch im HTML den Verweis einbauen, wie mein div aussehen soll! Zumindest dann, wenn ich die Möglichkeit behalten will verschiedene div-styles zu nutzen? Oder steh ich da auf dem Schlauch?
nicht wie, sondern warum es so aussehen soll. Manchmal ist jedoch der Grund, es soll ein Rahmen sein, dann Rahmen.
Mit CSS-Präprozessoren lässt sich das mit Extends noch besser realisieren. Bsp. Sass:
DAS überfordert mich jetzt total. Ich weiß gar nicht, wo ich anfangen soll zu fragen :DDas ist nicht schlimm. Das brauchst du noch nicht.
Matthias
-
Das erleichtert mich dann doch sehr! ^^
Ich nehme dann diesen Post zum Anlass nochmal allen Helfern vielmals zu danken: Mein Problem wurde gelöst und ich konnte noch lernen Klassen zu erstellen und anzuwenden, was mir deutlich mehr Übersicht und Komfort in meinen Code gebracht hat! Für mich war dieser Thread also ein voller Erfolg. Danke! Wirklich super, wie einem hier geholfen wird!
Daher kommt hier auch gleich der nächste Thread zu einem weiteren Problem: ^^'
http://forum.de.selfhtml.org/my/?t=215695&m=1477497
-
-
-
-
-
