Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 07.10.2006, 12:19
Benutzerbild von AndreasB
AndreasB AndreasB ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Es muß lediglich nach dem p gecleart werden - wenn der Text weniger Platz braucht als das Bild hoch ist, da sonst ein nachfolgendes Bild seitlich rutschen kann. Das geht auch eleganter als mit br... aber es fällt mir grad nicht ein, vielleicht mit content:after.
Eventuell geht es mit
http://borumat.de/html-und-css-tipps...ide-clear-both
Ob dann Widrigkeiten auftauchen, habe ich noch nicht getestet.

Ich betrachte jetzt zunächst einmal Deine interessanten Vorschläge und kommentiere sie in Bezug auf meine Intentionen.

Zitat:
Code geändert, das h1 hat mit ex ein paar Schwierigkeiten, mit em gehts.
Aha, gut zu wissen. EM statt EX sehe ich nicht als Nachteil an.

Zitat:
Das span dürfte mittlerweile überflüssig sein, habe damit rumprobiert, könnte aber raus.
OK, die Notwendigkeit von SPAN wäre ein Ausschlusskrititerium.

Was ist vielleicht noch wichtig für Euch zu wissen?
Der Code im Ausgangsposting ist selbstverständlich nur ein stark vereinfachtes Testcase.
Im richtigen Dokument kommen im Inhalt alle typischen Standardelemente vor: ULs, OLs, DLs, TABLEs, PREs, BLOCKQUOTEs

Alle Stilregeln sollen für diese Elemente also nur innerhalb von DIV CLASS="INHALT" gelten.
Es müssen also stets abhängige Selektoren gewählt des Typs DIV.INHALT ELEMENT{...}.

Ein wichtiges Teilziel ist die gute Kontrollierbarkeit des CSS für den Autor. Dies wäre nicht mehr gegeben, wenn das CSS voll mit Hacks und komplexen Reaktionen auf diverse Widrigkeiten wäre.
Dies sage ich hier nur allgemein, damit ihr meine Intention versteht. Es bezieht sich nicht auf Deinen Entwurf konkret.

Essentiell für ein akzeptables CSS ist für mich, dass keine manuellen Breitenangaben notwendig sind.

Zu weiteren Details Deines Entwurfs:
Code:
p, h1 {
width: 70%;
}
Dies entspricht nicht meiner Intention.
Der Text soll, bei entsprechenden hohen Schriftgraden, bis an den Rand der Box DIV CLASS="INHALT" heranreichen.

Code:
h1 {
max-width:20em;
}
Hier handelt es sich im Prinzip um eine manuelle Angabe einer abhängigen Breite.
Sie hängt von der Breite für P ab.

Eine solche Notwendigkeit möchte im CSS vermeiden.

Code:
img {
display: block;
float: left;
}
Hier verstehe ich Dein Motiv noch nicht, warum Du IMG floaten lässt.
Ein IMG ohne umhüllendes Blockelement, wird doch automatisch als Blockelement gerendert.
Den Fachjargon aus den Specs dafür habe ich gerade nicht parat.

Ich habe Deinen Ansatz, zunächst P und H1 ein 1em zuzuweisen und danach H1 erst das 1.5em, ausprobiert.
Aber ohne Erfolg.
Code:
<style type="text/css">
.inhalt {
width: 70%;
margin-left: 1em;
margin-right: 1em;
background: rgb(240,240,240);
}
p, h1 {
font-size: 1em;
max-width: 30em;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 1.5em;
}
</style>

<div class="inhalt">
	<h1>Lorem ipsum dolor sit amet</h1>
	<p>Textbereich zentriert und maximal 65 Zeichen breit. Bezug für Zeichenbreite
		ist der Fließtext. Bilder links ausgerichtet und ohne Beschränkung
		in der Breite.</p>	
	<img src="..." width="650" height="50" />
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
		veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
		ea commodo consequat.</p>
</div>
Stupst Du mich bitte, falls ich etwas von Deinem Ansatz übersehen oder falsch verstanden habe?

Im folgenden Beispiel greife ich Deinen Ansatz, dem H1 manuell eine maximale Breite zuzuweisen, auf.
Code:
<style type="text/css">
.inhalt {
width: 70%;
padding-left: 1em;
padding-right: 1em;
background: rgb(240,240,240);
}
.inhalt p,
.inhalt h1,
.inhalt ul {
font-size: 1em;
display:block;
max-width: 30em;
margin-left: auto;
margin-right: auto;
}
.inhalt h1 {
font-size: 1.5em;
max-width:20em;
}
.inhalt img{
margin-left: -1em;
}
</style>

<div class="inhalt">
	<h1>Lorem ipsum dolor sit amet</h1>
	<p>Textbereich zentriert und maximal 65 Zeichen breit. Bezug für Zeichenbreite
		ist der Fließtext. Bilder links ausgerichtet und ohne Beschränkung in
		der Breite.</p>
	<ul>
		<li>Lorem</li>
		<li>ipsum</li>
	</ul>
	<img src="..." alt="" width="650" height="50" />
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
		veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
		ea commodo consequat.</p>
</div>
Was sind Nachteile des aktuellen Entwurfes ohne Verschmutzungen im Markup?
1 Manuelle Breitenangabe im Stylesheet für H1 bzw. alle Elemente, die nicht 1em Schriftgröße besitzen.
2 Längliche Aufzählung im Stylesheet für jedes einzelne Element
Code:
.inhalt p, .inhalt h1, .inhalt ul {...}
Bei einem solchen CSS-Code kann es leicht passieren, dass der Autor Elemente vergisst.
Vor allem wird die typische und nützliche Zuweisung von Margins überschrieben. Beispiel UL.
Hier müsste mit spezifischen Regeln nachgebessert werden. Ob die entstehenden Probleme überhaupt lösbar wären, weiß ich noch nicht.
3 Es scheint keinen Weg zu geben, bei einem Padding für DIV CLASS="INHALT" das IMG über die gesamte Boxbreite darzustellen.
Ein
Code:
.inhalt img{
margin-left: -1em;
margin-right: -1em;
}
gleicht das Padding in IE6 nur nach links aus. In FF 1.5 klappt es.
Es gibt eben keinen Weg "zusammengesetzte" Marginbreiten zu setzen: 100%+2em
Hier noch ein einfaches Testcase für dieses Detail:
Code:
<style type="text/css">
body{ margin: 1em; }
p{ background: yellow; }
p.foo{ margin: 0 -1em; background: red; }
</style>

<body>
<p>Lorem</p>
<p class="foo">Ipsum</p>
<p>Dolor</p>
</body>
__________________


Geändert von AndreasB (08.10.2006 um 12:17 Uhr)
Mit Zitat antworten