zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Texte mit margin:auto - Bilder mit margin:0

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.10.2006, 10:09
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard Texte mit margin:auto - Bilder mit margin:0

Hallo,

Edit: Ich habe mittlerweile sämtliche Vorgaben für den Entwurf nochmal übersichtlich auf eine Webseite gestellt:
http://borumat.de/html-und-css-tipps...d-volle-breite

ein typisches Markup lautet:
Code:
<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>
Mein Gestaltungswunsch lautet:
* Textbereich zentriert innerhalb DIV CLASS="INHALT"
* Der Textbereich enthält diverse Elemente wie P, UL, OL, DL, TABLE, BLOCKQUOTE etc.
* Textbereich mit Polsterung zu DIV CLASS="INHALT" von 1em links und rechts
Die Polsterung kommt erst zum Tragen, wenn der Schriftgrad groß genug ist.
* Textbereich maximal 65 Zeichen breit.
Bezug für Zeichenbreite ist der Fließtext.
* Bilder ganz links am Box DIV CLASS="INHALT" ausgerichtet und ohne Beschränkung in der Breite.
Sie können also auch bis zum rechten RAND der Box DIV CLASS="INHALT" reichen, falls nötig.
http://borumat.de/bilder/misc/temp/hc-050.png
http://borumat.de/bilder/misc/temp/hc-051.png
Das Motiv:
Die Lesbarkeit von Fließtext verbessert sich durch eine Beschränkung der Zeilenlänge auf eine maximale Zeichenzahl enorm.
Große Bilder passen jedoch in so schmale Boxen nicht hinein. Das sehe ich gestalterisch nicht als Not an. Mir gefällt es ausgesprochen gut, wenn Bilder nach links gegenüber dem Text ausgerückt erscheinen.

Der Wunsch ist mit einer Verschmutzung des Markups problemlos realisieren.
Code:
<style type="text/css">
div.inhalt{
width:70%;
background: rgb(240,240,240);
}
div.inhalt div.text{
max-width: 65ex;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
}
</style>


<div class="inhalt">
	<div class="text">
		<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>
	</div>
	<img src="..." alt="" width="650" height="50" />
	<div class="text">
		<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>
</div>
Kennt ihr einen Weg das Gestaltungsziel zu erreichen, ohne das Markup so grauslig zu verschmutzen?

Edit 7.10.2006
Ergänzung der Polsterung für den Text, die ich vergessen hatte. Entfernung des DIV CLASS="BILD" im "unverschmutzten" Markup.
__________________


Geändert von AndreasB (07.10.2006 um 14:22 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.10.2006, 10:40
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nur so ein Gedanke:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Bild und Text</title>
<style type="text/css">
p, h1{
clear:left;
width:70%;
background: rgb(240,240,240);
max-width: 65ex;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
img {
display: block;
float: left;
margin-left: 0;
border: 1px solid #000;
}
</style>

</head>
<body>
<div class="inhalt">
			<h1>Lorem ipsum dolor sit amet</h1>
		<p><img src="bild.gif" width="650"/>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. 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.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.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>
		
	
		<p><img src="bild.gif" width="300" />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.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.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>
	
</div>
</body>
</html>
Berichtige mich, wenn ich Dich falsch verstanden habe.
p hat jetzt die maximale Breite, für deine Aufgabenstellung scheint mir anderes nicht nötig.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.10.2006, 14:44
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

@andir
Danke erstmal für Deinen Vorschlag.
Du hast mich jedoch missverstanden.

Besser als in Worten ist mein Gestaltungswunsch eigentlich in den beiden Screenshots aus dem Ursprungsposting erklärt.

Ich ergänze nochmal:
Die H1-Box soll exakt die gleiche Breite besitzen wie die P-Box. Die Boxbreite soll 65ex (von P) betragen.
Das Bild soll linksbündig an DIV class="inhalt" ausgerichtet sein.

Dein Code produziert
http://borumat.de/bilder/misc/temp/hc-052.png

Hier sind die H1-Box und die P-Box nicht gleich breit und das Bild ist nicht linksbündig an DIV class="inhalt" ausgerichtet.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 06.10.2006, 15:18
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das dürfte deinen Erwartungen entsprechen:
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.

EDIT: Code geändert, das h1 hat mit ex ein paar Schwierigkeiten, mit em gehts. Das span dürfte mittlerweile überflüssig sein, habe damit rumprobiert, könnte aber raus.

EDIT 2: Verschlankte Version hier zu sehen

EDIT 3: Jetzt durch 30em Breite 68 Anschläge/Zeile. Maße H! / P angepasst, damit die Breite immer gleich bleibt.
So: Jetzt bleibt Dir kaum noch was zu tun

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Bild und Text</title>
<style type="text/css">


* { margin: 0; padding:0; }

.inhalt {
width: 70%;
margin: 0 auto;
}

p, h1 {
font-size: 1em;
display:block;
width: 70%;
background: rgb(240,240,240);
max-width: 30em;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}

h1 {
font-size: 1.5em;
max-width:20em;
}

img {
display: block;
float: left;
margin-left: 0;
border: 1px solid #000;
}
</style>

</head>
<body>
<div class="inhalt">
	<h1>Lorem ipsum dolor sit amet</h1>
<img src="bild.gif" width="650" height="200"/>
		<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. 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.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.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.<br style="clear:both;" /></p>
		<img src="bild.gif" width="400" />
	
		<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.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.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><br style="clear: both;" /><img src="bild.gif" width="300" />
	
</div>
</body>
</html>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (06.10.2006 um 15:32 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.10.2006, 12:19
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
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
  #6 (permalink)  
Alt 09.10.2006, 12:56
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Haben sich deine Vorgaben geändert??
Bisher waren die Überschriften doch in einer Linie mit dem Text gesetzt- was ich insofern nutzerfreundlicher finde, als ich eine direkte Zuordnung zum Text vornehmen konnte - Prinzip der Ähnlichkeit, die Zuordnung zu einer Funktion ( hier: Textbezug) ist so leichter möglich.
Daher auch das Getue mit den Werten von ex oder em und das entstehende Anpassungserfordernis aufgrund unterschiedlicher Schriftgrößen.
Betrachte deine Screenshots: Ich sehe bereits jetzt 3 vertikale Achsen: Überschrift, Bild, Text. Das ist mir zu unruhig.

Zitat:
Aha, gut zu wissen. EM statt EX sehe ich nicht als Nachteil an.
Sorry, das war Quatsch von mir. Natürlich geht auch ex problemlos, wenn man die unterschiedlichen Schriftgrößen berücksichtigt, das heißt: auch bei ex muss "relativiert" werden in Abhängigkeit der differierenden Schriftgrößen eben.

Zitat:
display:block für img?
Nicht notwendig ich weiß. Hatte ja auch noch das gleiche für p und h1 drin^^ - mal wieder historische Gründe (vergessen rauszumachen).

Zitat:
warum img gefloated?
Meine Fehlinterpretation. Ich nahm an, dass die meisten der Bilder kleiner sein würden und nur einige wenige größer (= über die ganze Breite von inhalt) sein würden.
Meiner Empfindung nach ist der Lesefluss deutlich besser, wenn die Bilder gefloated sind und ein Text sich einem vorhergehenden optisch anschließt.
Zu enge Lesespalten bei größeren Bildern könnte man durch eine min-width der entsprechenden Elemente vorbeugen.

Aber vielleicht hast Du andere Vorlieben.
Alternativ könntest Du ein testcase bauen und die User hier ( in einem neuem Thread, vielleicht im Forum Barrierefreiheit) zur besseren oder schlechteren Lesbarkeit der unterschiedlichen Gestaltung befragen. Davon könnten alle profitieren.

Zitat:
OK, die Notwendigkeit von SPAN wäre ein Ausschlusskrititerium.
Brauchts auch nicht. Ab in die Tonne damit.


Zitat:
Essentiell für ein akzeptables CSS ist für mich, dass keine manuellen Breitenangaben notwendig sind
Haben wir doch hier bereits: Max-width 65 oder 66ex ist eine manuelle Vorgabe. Das ganze sieht bei größeren Auflösungen bei Defaultwerten (100%) übrigens bescheiden aus ( ab 1280x1024) und erst dann wieder brauchbar, wenn die Schriftgröße größer ist.

Zu h1

Zitat:
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.
Dann bleibt Dir nur, h1 anders auszuzeichnen - fetter und/oder mit unterschiedlicher Farbe oder Hintergrund. ex und em sind nun einmal relative Werte. Natürlich- wenn h1 auch links anschließen darf, ist das kein Thema, siehe oben.



Zitat:
Der Text soll, bei entsprechenden hohen Schriftgraden, bis an den Rand der Box DIV CLASS="INHALT" heranreichen.
In Ordnung, siehe unten. Bei größeren Schriftgrößen reicht der Text an den Rand von Inhalt heran, einfach die 70% herausnehmen (s.u.)



Zitat:
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.
Jepp. Mir ist leider kein tauglicher Universalselektor a la
Code:
 Alle Kindelemente von xx {...}
bekannt. Da würde es reichen nur die Ausnahmen zu definieren.

Mit dem Kindkombinator
Code:
.inhalt > *
hätte der IE bis V.6 so seine Probleme. Die anderen modernen Browser könnens. Aber der IE bis V.6 hat ja bereits mit max-width Probleme.

Zitat:
Es scheint keinen Weg zu geben, bei einem Padding für DIV CLASS="INHALT" das IMG über die gesamte Boxbreite darzustellen.
Nein, natürlich nicht, wenn inhalt das padding hat. Wie Du weißt, bedeutet padding den Innenabstand zum nächsten Element, sprich, der Inhaltsbereich wird kleiner bei gleichen Außenmaßen, jedenfalls wenn nicht das falsche Boxmodel angewendet wird.

Das Kindelement kann die Vorgaben des Elternelements nicht überschreiben.

Was die Textpolsterung soll, hm... da würde ich doch lieber .inhalt nach außen "polstern" und ein entsprechendes margin mitgeben oder 2% weniger von 70% Breite einsetzen.


Du willst ein möglichst sauberes HTML und ein möglichst schlankes CSS ohne Abhängigkeiten. Beides geht nur in bestimmten Fällen, in einfachsten Gestaltungsfragen. CSS ist ja prinzipell als dependent ( wenn auch hierarchisch dependent) angelegt. Daher erfordern Unterschiede auf einer Hierarchieebene Mehraufwand. Letztlich wird eine Entscheidung, ein Kompromiss nötig sein, wobei meine Entscheidung im Zweifel jene für das saubere HTML ist.

Der leicht geänderte Code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Bild und Text</title>
<style type="text/css">


* { 
margin: 0;
 padding:0;
 color: #000;
 }

.inhalt {
width: 70%;
margin: 0 auto;
background: rgb(240,240,240);
}

.inhalt p, .inhalt h1, .inhalt q {
font-size: 1em;
max-width: 66ex;
margin: 0 auto 0 auto;
background-color: #b7b7b7;
}


/**** nur zum BrowserTesten ****/
.inhalt > * {
color: green;
}


.inhalt h1 {
font-size: 1.5em;
max-width:44ex;
color: #000;
}

img {
margin-left: 0;
border: 1px solid #000;
display: block;
}

.inhalt q {
display: block;
background-color: yellow; 
}

</style>

</head>
<body>
<div class="inhalt">
	<h1>Lorem ipsum dolor sit amet</h1>
<img src="bild.gif" width="650" height="200" alt=""  />
		<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. 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.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.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="bild.gif" width="400" alt="" />
	<q>Wenn der Hahn kräht auf dem Mist, ändert sich das Wetter oder es bleibt wie es ist.</q>
		<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.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.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="bild.gif" width="300" alt="" />
	
</div>
</body>
</html>
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #7 (permalink)  
Alt 09.10.2006, 14:02
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Haben sich deine Vorgaben geändert??
Bisher waren die Überschriften doch in einer Linie mit dem Text gesetzt- was ich insofern nutzerfreundlicher finde, als ich eine direkte Zuordnung zum Text vornehmen konnte - Prinzip der Ähnlichkeit, die Zuordnung zu einer Funktion ( hier: Textbezug) ist so leichter möglich.
Richtig, meine Vorgabe "ausgerückte Hn" hatte ich beim Ursprungsposting vergessen.

Ich sehe als großen Vorteil der ausgerückten Hn, dass das Auge leicht zum nächsten ähnlichen Objekt (denn Ähnlichkeit wirkt sich aus, da bin ich mit Dir einig, nur nicht über die konkrete Folgerung) springen kann: zur nächsten Überschrift.

Und zum besseren Zusammenhalt von Hn plus nachfolgender Inhalt: Was genau soll zusammengehalten werden?
Zu einer Überschrift gehört nicht nur der erste ihr folgende Absatz, sondern eventuell weitere Blöcke mit untergeordneten Überschriften.

Kurz: ich bin mir nicht sicher, welcher Effekt der Lesbarkeit insgesamt mehr nützt. Untersuchungen zu einem direkten Vergleich der beiden diskutierten Gestaltungsvarianten kenne ich leider auch nicht.

Ich gebe in einem Medium mit reichlich Platz dem Ausrücken den Vorzug - lasse mich jedoch gerne von der Unangemessenheit überzeugen.

Nachdem ich auf meiner bescheidenen Seite das Ausrücken der Hn eingeführt hatte und ein halbes Dutzend Freunde um eine Bewertung hinsichtlich der Auswirkung auf die Lesbarkeit gebeten hatte, war deren Urteil eindeutig: besser.
Aber so eine winzige Stichprobe sagt natürlich kaum was aus.

Zitat:
Betrachte deine Screenshots: Ich sehe bereits jetzt 3 vertikale Achsen: Überschrift, Bild, Text. Das ist mir zu unruhig.
Es ist unruhiger, als wenn das Bild mit der linken Kante der Hn fluchten würde. Da gebe ich Dir Recht.

Hier hat für mich das Vermeiden von Querscrollerei den höheren Rang.
Aber dennoch: Dein Vorschlag, auf die Ausrückung von Hn zu verzichten, würde eine Achse weniger bedeuten und damit mehr Ruhe bedeuten.
Da stimme ich Dir voll zu.
Es gibt übrigends noch weitere Achsen: die Zeilenanfänge von Listen und - bei gefloateten Bilder - die neuen Achsen für die Ränder der Textboxen, etc.

Zitat:
Meine Fehlinterpretation. Ich nahm an, dass die meisten der Bilder kleiner sein würden und nur einige wenige größer (= über die ganze Breite von inhalt) sein würden.
Meiner Empfindung nach ist der Lesefluss deutlich besser, wenn die Bilder gefloated sind und ein Text sich einem vorhergehenden optisch anschließt.
Zu enge Lesespalten bei größeren Bildern könnte man durch eine min-width der entsprechenden Elemente vorbeugen.
Kleine Bilder sollen gefloated werden, ACK.
Die habe ich im Beispiel jedoch nicht betrachtet um es so prägnant wie möglich zu halten.

Zitat:
Alternativ könntest Du ein testcase bauen und die User hier ( in einem neuem Thread, vielleicht im Forum Barrierefreiheit) zur besseren oder schlechteren Lesbarkeit der unterschiedlichen Gestaltung befragen. Davon könnten alle profitieren.
Kann ich gerne machen.
Ich werde mich dann allein auf den Vergleich der Merkmale "ausgerückte/nicht ausgerückte Hn" beschränken.
Etwas Geduld bitte noch.

Zitat:
Haben wir doch hier bereits: Max-width 65 oder 66ex ist eine manuelle Vorgabe. Das ganze sieht bei größeren Auflösungen bei Defaultwerten (100%) übrigens bescheiden aus ( ab 1280x1024) und erst dann wieder brauchbar, wenn die Schriftgröße größer ist.
Klar, ist die maximale Zeichenzahl eine manuelle Angabe. Auch der Schriftgrad von Hn
Ich meinte Größen, die sich daraus ableiten und die für das Funktionieren einer Gestaltung nötig sind.
Es ist unschön, wenn der Autor rechnen und editieren muss, nur weil er sich entscheidet den Schriftgrad von Hn zu ändern.

Zitat:
Dann bleibt Dir nur, h1 anders auszuzeichnen - fetter und/oder mit unterschiedlicher Farbe oder Hintergrund. ex und em sind nun einmal relative Werte. Natürlich- wenn h1 auch links anschließen darf, ist das kein Thema, siehe oben.
ACK

Mir liegt jedoch sowohl daran, Hn frei Schriftgrade zuweisen zu können, als auch an der Ausrückung.
Zitat:
[Nicht breit unterstützte Selektoren]
ACK

Zitat:
Das Kindelement kann die Vorgaben des Elternelements nicht überschreiben.
Doch: durch negative Margins.

Ist eigentlich bei
E{ margin: 0 -1em; width: 100%; }
die korrekte zu rendernde Breite für E "100% plus 2em"?

Zitat:
Du willst ein möglichst sauberes HTML und ein möglichst schlankes CSS ohne Abhängigkeiten.
Genau
Zitat:
Beides geht nur in bestimmten Fällen, in einfachsten Gestaltungsfragen. CSS ist ja prinzipell als dependent ( wenn auch hierarchisch dependent) angelegt. Daher erfordern Unterschiede auf einer Hierarchieebene Mehraufwand. Letztlich wird eine Entscheidung, ein Kompromiss nötig sein, wobei meine Entscheidung im Zweifel jene für das saubere HTML ist.
Ja, Du hast den Konflikt gut beschrieben.
In aller Regel verzichte ich auch lieber beim Markup auf Verschmutzungen.
Wenn die Pflegbarkeit und Verständlichkeit des CSS jedoch stark leiden würde, mache ich Zugeständnisse.
In der Hoffnung, dass mit besser unterstütztem CSS, insbesondere die diversen bisher nicht unterstützten mächtigen Selektoren, das überflüssige Markup beizeiten entfernt werden kann.

Zitat:
Der leicht geänderte Code: [...]
(Uff, ist das Zitieren in einem Webforum doch zeitaufwändig und umständlich gegenüber dem Zitieren in Postings im Usenet!)

Wir können Deinen Entwurf so stehen lassen.
Er befriedigt etwas andere Vorgaben als meine eigenen, ist aber auf jedenfall interessant - nicht nur, weil er das Markup nicht verschmutzt.
Das CSS für Listen kann man sicher auch noch anpassen.

Übrigends: sehr angenehme Diskussion mit Dir
__________________

Mit Zitat antworten
  #8 (permalink)  
Alt 09.10.2006, 20:25
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Der leicht geänderte Code: [...]
Hier Dein CSS mit meinem Markup.
Textbereiche zentriert und mit maximaler Zeichenzahl pro Zeile - Bilder linksbündig und die volle Breite nutzend - kein zusätzliches Markup - Überschriften nicht ausgerückt | borumat.de

Ich sehe noch keine elegante Lösung für Elemente wie TABLE, die keine 100% einnehmen, oder für verschachtelte UL.
Vielleicht fällt Dir noch was ein.


Zum Vergleich nochmal das gleiche Dokument mit verschmutztem Markup: mit umhüllenden DIVs für die Textbereiche und mit "meinem" CSS.
Textbereiche zentriert und mit maximaler Zeichenzahl pro Zeile - Bilder linksbündig und die volle Breite nutzend - mit zusätzlichen DIVs - mit ausgerückten Hn | borumat.de
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 09.10.2006, 21:51
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Ich sehe noch keine elegante Lösung für Elemente wie TABLE, die keine 100% einnehmen, oder für verschachtelte UL.
Vielleicht fällt Dir noch was ein.
Ehm, nein

Das ist eben das schmutzige dran- entweder schmutzigen Code oder dickes CSS außer in Ausnahmefällen.
Was haben wir denn?

Einen Fließtext, q's die sich wie Fließtext verhalten können, aber mit display:block versehen werden müssen, damit sie gerückt werden können, Überschriften, Tabellen, hm, hm....

Grob gesagt: Drei Textelemente, Bilder und der ganze Rest. Macht drei Gruppen.


Damit ließe sich vermutlich etwas Ordnung reinbringen- aber frag mich jetzt nicht wie. Es war ein langer Tag.

Zitat:
Doch: durch negative Margins.

Ist eigentlich bei
E{ margin: 0 -1em; width: 100%; }
die korrekte zu rendernde Breite für E "100% plus 2em"?
Ich hatte heute nachmittag mal einen Versuch gemacht, bin aber nicht weit gekommen. Mit neg. margins habe ich mich noch nicht genauer beschäftigt.
Zu deiner Frage: Das kann ich (noch) nicht beantworten.

Zitat:
Übrigens: sehr angenehme Diskussion mit Dir
Dito.

Aah, es gibt eine neue Version mit Multi-Zitier-Funktion.
vBulletin.com Running 3.6 - vBulletin Community Forum
Mal schauen ob und wie das was taugt
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (09.10.2006 um 22:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.10.2006, 22:34
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.291
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Aah, es gibt eine neue Version mit Multi-Zitier-Funktion.
[x]Ausnahmslos alle Webforen in Newsgroup umwandeln!
... und die Usability der Netzwelt-Diskussionen wäre um Dimensionen besser.

Klar: So eine Ketzerei richtet sich natürlich in keiner Weise gegen Dich persönlich, Hemfrie.

Es ist eben Pech, dass sich so viele Webforennutzer mit so wenig Usability zufrieden geben - obwohl das objektiv bessere Medium schon lange existiert.

Ich wäre schon glücklich, wenn wenigsten mehr Forentypen existieren würden, die ein Web2News- und News2Web-Gateway besitzen, wie z.B. Olympus E-System, FourThirds, E-1, E-300, E-330, E-400, E-500, E-10, E-20, E-100RS: Forum

Aber die Entwickler der modernen Webforensysteme scheinen Newsserver nicht zu lieben. Leider.

Sagte ich schon, dass auch Mailinglisten saugen - im Vergleich zu Newsgroups
__________________

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Grafikpositionierung escapet CSS 19 05.09.2010 19:06
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
include laden und anzeigen casge Serveradministration und serverseitige Scripte 31 14.11.2009 14:06
Wordpress: Content im Quelltext VOR allem anderen, aber wie? Bichareh CSS 4 13.06.2009 17:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:44 Uhr.