Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 06.10.2006, 09:09
Benutzerbild von AndreasB
AndreasB AndreasB ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.322
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 13:22 Uhr)
Mit Zitat antworten
Sponsored Links