Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 09.10.2006, 12:56
andir andir ist offline
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.037
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