Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 06.10.2006, 15:18
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

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