Patrick, der Neuling: Die Tücken von float

Beitrag lesen

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