nicht angemeldet
Fließtext mit Bild + Bildtext
Hi,
Ich möchte einen Textrahmen haben, mit einem (dunkel)grauen Hintergrund. In diesem soll ein Text mit etwas Abstand beginnen und rechtzeitig vor dem Bildrahmen (Abstand!) eine neue Zeile beginnen. Die Rahmen selber habe ich nur zur Veranschaulichung gewählt, einzig ein Rahmen um das Bild soll vorhanden sein. Der Rahmen um das eigentliche Bild soll auf weißem Hintergrund eine schwarzen Bildtext unterhalb des Bildes ermöglichen. Das Bild samt Rahmen soll natürlich auch vom rechten Bildschirmrand den gleichen Abstand haben.
<div style="width:100%; background-color:grey; color:white;"><!--umgebendes DIV-->
<div style="border: thin solid yellow;"><!--Rahmen DIV-->
<div style="background-color: white; color: black; border:10px solid red; float:right; height:320px; width:440px;vertical-align: bottom;">Bildunterschrift<!--umgebendes Bild-Div-->
<div style="border:thin solid blue; float: right; height:300px; width:440px; color: black;" id="Bild"><!--Bild DIV--></div>
<!--umgebendes Bild-DIV--></div>
fsdfsdfsdf dffsdfsdfsdsdf fsddf fd fdfd fddfs dfdf df df sdffsd fd fsd fsd fd f fd fd f f ff dfd fd fd fsd fsd fsd fsd dffsd fd fd fd fd fsd df fd dff df sdfsd fsd fsd dfs
fddf f fsd fsd fd df sdf fsd fsdf sdf sddf fsd fd fd fsd fsd df er tret t te t tz t zzui ui ui ui io oi o o p p poo ppo
<!--Floats aufheben-->
<div style="clear: both;"></div>
Hier
- geht der äußerste Rahmen nicht bis zum jeweiligen Bildschirmrand
- der Text lässt weder einen Abstand links noch rechts zum Bild
- Die Bildunterschrift befindet sich nicht unterhalb des Bildes.
Bei einigen Varianten, welche ich schon probiert habe, gab es unterschiedliche Darstellungen im IE und Firefox.
Leider bin ich nicht so tief in CSS drinnen. Was tun?
lg
-
<body> <div style=" position:relative; background-color:grey; color:white; width:100%;;"><!--umgebendes DIV--> <div style="float:left; border: thin solid yellow; color:#000; position:relative; width:400px; padding:20px; "><!--Rahmen DIV--> fsdfsdfsdf dffsdfsdfsdsdf fsddf fd fdfd fddfs dfdf df df sdffsd fd fsd fsd fd f fd fd f f ff dfd fd fd fsd fsd fsd fsd dffsd fd fd fd fd fsd df fd dff df sdfsd fsd fsd dfs fddf f fsd fsd fd df sdf fsd fsdf sdf sddf fsd fd fd fsd fsd df er tret t te t tz t zzui ui ui ui io oi o o p p poo ppo</div> <div style=" position:relative;background-color: white; color: black; border:10px solid red; float:right; height:320px; width:440px;vertical-align: bottom;">Bildunterschrift<!--umgebendes Bild-Div--> <div style="border:thin solid blue; float: right; height:300px; width:440px; color: black;" id="Bild"><!--Bild DIV--></div> <!--umgebendes Bild-DIV--></div> <!--Floats aufheben--> <div style="clear: both;"></div> </div> </div> </body>Ist das so deine Vorstellung oder habe ich da was falsch verstanden?
-
Danke für die Antwort.
Ist das so deine Vorstellung oder habe ich da was falsch verstanden?
Folgendes passt noch nicht:
-
Das äußerste Div soll die beiden Bilder-Rahmen umfassen. Falls der Text länger ist und die Höhe des Bilder-Rahmens nicht ausgeht, dann soll der Text nicht nur links, sondern auch unterhalb des Bildes fliessen.
-
Der äußerste Textrahmen geht nicht bis zum linken Bildschirmrand. Der soll ja die gesamte Bildschirmbreite einnehmen.
-
Die Bildunterschrift soll unterhalb des Bildes stehen, nicht oberhalb. Weiss nicht, warum das vertical-align nicht funkt.
Alles klar?
lg
-
Weiss nicht, warum das vertical-align nicht funkt.
Ja:
"Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie."-
So und jetzt ? Passt jetzt alles? Oder habe ich noch was falsch verstanden?
Gruß
KL<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> </head> <body> <div style=" position:relative; background-color:grey; color:white; width:100%;;"><!--umgebendes DIV--> <div style="float:left; border: thin solid yellow; color:#000; position:relative; padding:20px; "><!--Rahmen DIV--> <div style=" position:relative; background-color: white; color: black; border:10px solid red; float:right; height:320px; width:440px;vertical-align: bottom; display:block; margin:20px; right:-20px; top:-20px;"><div style="border:thin solid blue; height:300px; width:440px; color: black;" id="Bild"> <!--Bild DIV--> </div>Bildunterschrift<!--umgebendes Bild-Div--> <!--umgebendes Bild-DIV--></div> <p><strong>München</strong> (Bairisch: <em>Minga</em>) ist die Landeshauptstadt und mit rund 1,35 Millionen Einwohnern gleichzeitig größte Stadt des Freistaates Bayern, die drittgrößte Stadt Deutschlands sowie die zwölftgrößte der Europäischen Union. Die Stadt ist eines der wichtigsten Wirtschafts-, Verkehrs- und Kulturzentren der Bundesrepublik und eine der prosperierendsten Städte Europas. München ist Zentrum der Metropolregion München sowie Verwaltungssitz des Regierungsbezirks Oberbayern.</p> <h4> Geographie</h4> <p>München bildet eines der 23 Oberzentren des Freistaates Bayern. Mit 4.313 Einwohnern je km² hat München die höchste Bevölkerungsdichte aller deutschen Großstädte.</p> <h4> Topographie </h4> <p>Der höchste Punkt der Stadt ist der Warnberg im Stadtbezirk 19 mit 579 m über NN, der tiefste Punkt liegt mit 482 m über NN im nördlichen Schwarzhölzl im Stadtteil Feldmoching. Die Isar durchfließt das Stadtgebiet auf einer Länge von 13,7 km von Südwest nach Nordost. Bekannte Flussinseln sind die Museumsinsel mit dem Deutschen Museum und die in unmittelbarer Nähe gelegene Praterinsel. Im weiteren Umland liegen zahlreiche große Seen, wie z. B. der Ammersee, der Wörthsee oder der Starnberger See. Weitere Fließgewässer sind die Würm, die aus dem Starnberger See kommend den Westen Münchens durchfließt, der Hachinger Bach, der im Südosten bei Perlach in das Stadtgebiet eintritt und nördlich von Neuperlach versickert, sowie etliche von der Isar abzweigende Münchner Stadtbäche wie der Eisbach, der Auer Mühlbach, der unmittelbar nach seiner Ableitung aus dem Isarkanal als erstes den Münchner Tierpark Hellabrunn durchfließt, und der Brunnbach. Die Stadtbäche wurden größtenteils entlang der Isar angelegt; einige durchfließen auch die Innenstadt, wobei die Bäche im Zentrum heute größtenteils unterirdisch durch Röhren geführt werden oder seit dem Bau von S- und U-Bahnlinien teilweise trockengelegt wurden. Seen im Münchner Stadtgebiet sind der Kleinhesseloher See im Englischen Garten, der See im Olympiagelände, die Dreiseenplatte (bestehend aus Lerchenauer, Fasanerie- und Feldmochinger See) im Norden, sowie an der Stadtgrenze im Westen die Langwieder Seenplatte mit Langwieder See und Lußsee. Der ebenfalls zur Seenplatte gehörende Birkensee liegt jenseits der Stadtgrenze auf dem Gebiet des Landkreises Dachau. Im Süden in der Nähe des linken Isarufers liegt der Hinterbrühler See.</p> </div> <!--Floats aufheben--> <div style="clear: both;"></div> </div> </div> </body> </html>-
So und jetzt ? Passt jetzt alles? Oder habe ich noch was falsch verstanden?
Ich bin immer noch nicht sicher, was du eigentlich erreichen möchtest :)
-
Ich bin immer noch nicht sicher, was du eigentlich erreichen möchtest :)
Ja, schaut jetzt im IE + Firefox gut aus.
Danke
-
Leider passt es noch immer nicht. Wenn ich deinen langen Text herausnehme und auf ein paar Worte reduziere, so wird in Firefox und IE 8 mit dem äußeren Div nicht der ganze Bildschirm in Anspruch genommen, sondern nur, solange der Text + Bildrahmen geht.
Was bedeutet im Doc-Statement der 2. Teil unter Anführungszeichen? Ist er erforderlich? Ebenso xmlns= im HTML-Statement? Erforderlich?
lg
-
-
-
-
-
-