Flexibel, zwei Reihen, Hintergrundbild

Magerquark · 04.06.2006, 15:45

Folgendes soll gemacht werden:
Ein DIV mit einer min- und einer max-width. Darin soll auf der linken Seite (50% des übergeordneten DIVs) Text stehen. Die rechte Hälfte soll mit einem Hintergrundbild gefüllt werden.

Was nicht geht: Man kann nicht dem übergeordneten DIV ein Hintergrundbild geben, das rechts oben ausgerichtet ist. Das Bild selber ist halb so breit wie die max-width des großen DIVs. Der Text bekommt ein padding-right 50%. Warum geht das nicht? Das klappt nur, wenn man bei max-width angekommen ist. Sobald man eine kleinere Auflösung hat, resp. seinen Browser verkleinert, wird das Hintergrundbild unter den Text "geschoben" - der sich übrigens brav immer nur zu 50% innerhalb des großen DIVs ausbreitet.

Was auch nicht geht: Im großen DIV, zwei untergeordnete DIVs und mit float positionieren. Dem rechten DIV dann das Bild als Hintergrund geben, diesmal oben zentriert ausgerichtet (der Optik wegen). Das klappt mit dem Verkleinern des Browser-Fensters. Aber da in dem rechten DIV mit dem Hintergrundbild kein Inhalt ist, wird es auch nicht angezeigt. Klar.

Jemand eine Idee, wie man es am besten hinbekommt? Faux-Column geht auch nicht. Das würde das relativ große Hintergrundbild rechts nur noch mehr vergrößern. (Mal abgesehen davon, dass FC ja auch eine ganz andere "Aufgabe" hat...

)

Man könnte natürlich das Bild mit einem img-Tag einfügen, da es aber nur Deko ist, hat das Bild im HTML nichts zu suchen. *grübel*

321 · 06.06.2006, 12:19

Da sich Hintergrund-Grafiken NIE dem verfügbaren Raum anpassen, wirst Du es wohl oder übel als <img> einbinden müssen.

so geht es jedenfalls (erst bei einem Fenster von ca. 170 px verhält es sich falsch)

Code:

<html><head>
<title>Test mit Bild rechts</title></head>
<body><div style="float: right; width: 50%">
<img src="http://www.mywebra.net/morcote/heute031.JPG" alt="dein Bild"
WIDTH="100%" />
</div>
<div style="float: left">
<p>Als Blindtext wird Text bezeichnet, den man bei der Gestaltung von
Medien verwendet, sofern der eigentliche Text noch nicht vorliegt. 
Mit Hilfe des Blindtextes kann die Verteilung des Textes auf der Seite sowie 
die Lesbarkeit der Typografie beurteilt werden. Er besteht aus einer mehr 
oder minder sinnlosen Folge von Wörtern, oft auch nur aus wortähnlichen 
Silbenfolgen. Komponisten von Liedern benutzen Blindtexte beim Komponieren 
von Melodien und singen diese bevor der Liedtext gedichtet wird 
(z.B. von Herbert Grönemeyer).
</p></div></body>
</html>

Magerquark · 06.06.2006, 12:44

*hmm* Das hier könnte gehen, aber ich finde es arg unverständlich geschrieben...

buffy2511 · 06.06.2006, 12:58

Hast Du schon die Variante probiert, in der Du in der DIV-Box auf der rechten Seite angiebst:

HTML-Code:

background-image: url(mein_bild.gif);
background-position: top right;

? Wüsste jetzt so spontan nicht, warum das nicht klappen sollte.

321 · 06.06.2006, 13:49

@buffy2511: das schiebt das Bild unter den text, wenn das Fenster kleiner gemacht wird.

@MQ: 'Das hier' arbeitet mit einer Breite des Containers, der die beiden Kolonnen enthält. Das Bild wäre beim Verkleinern des Fensters weg, resp. müsste herbei gescrollt werden.
ps:
Wenn Du es mit Deko = Hintergrund so genau nimmst,
dann gilt auch: Ohne Vordergrund kein Hintergrund

buffy2511 · 06.06.2006, 14:05

Zitat:

Zitat von 321

@buffy2511: das schiebt das Bild unter den text, wenn das Fenster kleiner gemacht wird.

Stimmt, da ja alles in % angegeben ist. Das hatte ich nicht bedacht. Klappt wohl nur mit festen Größen. Schande über mein Haupt...

321 · 06.06.2006, 15:40

Mein Beispiel spielt auch bei variabler Fenstergrösse mit

buffy2511 · 06.06.2006, 16:08

Zitat:

Zitat von 321

Mein Beispiel spielt auch bei variabler Fenstergrösse mit

Jajajajajajaja...