3 Images innerhalb einer Box verteilen

Hi,

ich hab mich jetzt schon mehrere Stunden mit dem Thema CSS und Positionierung auseinandergesetzt, aber ich steh immer noch auf dem Schlauch, deshalb an Euch die (Anfänger) Frage:

Ich habe einen <div> Bereich, in den ich 3 Images legen will, ein Image ganz links oben, ein Image ganz rechts oben und ein Image zentriert oben. [soll ein spezieller Pageheader werden].

Mit den CSS Eigenschaft float left/right habe ich zwei von den drei Bildern richtig positionieren können, nur schaff ichs um Verr*cken nicht, das dritte Bild mittig zu bekommen.

Sorry für die doofe frage, echt...

mein HTML Code schaut so aus :

<div id="oml-header">

	<div class="oml-header-image-middle">
		<img src="img/middle.png" alt="" />
	</div>

	<div class="oml-header-image-left">
		<img src="img/corner_left.png" alt="" />
	</div>
	
	<div class="oml-header-image-right">	
		<img src="img/corner_right.png" alt="" />
	</div>
	
</div>

und mein Skript:

#oml-header {
	background:red;
	margin:0 auto;
	padding: 0px;
	width:61.25em;
	height:7em;
	#border:1px solid black;
	border-bottom:none;
}

.oml-header-image-left {
	float:left;		
}

.oml-header-image-middle {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
		
.oml-header-image-right {
	float:right;
}

### mit float:left für middle:
#.oml-header-image-middle {
#	float:left;		
#}

Könnt ihr mir da einen Tipp geben,
vielen Dank

#angry#

die 3 divs jeweils breite von 33% und dann jeweils ein align mit links,center,right

georg

Hi und danke für dir schnelle Antwort!

ich hab jetzt folgenden html und css code:

<div id="oml-header">

	<div class="oml-header-image-left" width="33%">
		<img src="img/corner_left.png" align="left">
	</div>

	<div class="oml-header-image-middle" width="33%">
		<img src="img/middle.png" align="center">
	</div>
		
	<div class="oml-header-image-right" width="33%">	
		<img src="img/corner_right.png" align="right">
	</div>
	
</div>

	.oml-header-image-left {
	}

	.oml-header-image-middle {
	}
			
	.oml-header-image-right {
	}

ich hoffe ich hab dich da richtig verstanden?

auf jeden Fall sind das linke und das mittlere bild richtig, das rechte bild ist zwar recht aligned, aber von der höhe unter den beiden anderen (genau um die Höhe der Grafik versetzt).

An den Grafiken selbst liegts nicht, hab mal spaßhalber 3 identische, kleine, bilder genommen - Fehlerbild bleibt allerdings bestehen.

Hoffe ihr seit noch online ;-) Danke Shortie

Hab ich alle vergrault :o

Sorry, steh immer noch auf dem Schlauch

Olla!

Für den Fall das ich Dich richtig verstanden habe:

<div id="oml-header">
 <img src="img/corner_left.png">
 <img src="img/middle.png">
 <img src="img/corner_right.png">
</div><div class="clear"></div>

#oml-header img {
 float: left;
}
.clear {
 clear: both;
 font-size: 1px;
 line-height: 1px;
 height: 0;
}

Evtl. braucht Dein #oml-header div noch ne Höhenangabe, sollte aber so auch ohne funktionieren.

gruss, fuss

hi fuss,

danke für deine Antwort. Bei deiner Lösung sind alle dre Bilder left aligned,
ich brauche aber ein Bild links, eins center und eins rechts.

[corner_left.png]<---NIX--->[middle.png]<---NIX--->[corner_right.png]

Danke und Gruß Shortie

Wenn die Bilder und die umgebende div-Box eine feste Breite haben, sprich Pixel, em oder sonst eine statische Maßeinheit, kannst du das mittle Bild positionieren indem du es folgendermaßen formatierts:

<style type="text/css">
#imgleft, #imgcenter, #imgright{
float:left;
}
#imgcenter, #imgright{
margin-left:...px;
}
</style>
...
<div id="oml...">
<img id="imgleft" src="..." alt="..." />
<img id="imgcenter" src="..." alt="..." />
<img id="imgright" src="..." alt="..." />
</div>

Sollte das ganze jedoch liquid sein (feste Breite der Bilder vorrausgesetzt), so könnstest du mit position:relative arbeiten, das ganze ist dann anz einfach:

<style type="text/css">
#imgleft{
float:left;
}
#imgcenter{
position:relative; left:50%; margin-left:-450px;
}
#imgright{
float:right;
}
</style>
...
<div id="oml..."><!-- image width 300px -->
<img id="imgleft" src="..." alt="..." />
<img id="imgcenter" src="..." alt="..." />
<img id="imgright" src="..." alt="..." />
</div>

Zur Erklärung:
http://www.css4you.de/position.html <- einmal lesen

//Alle Bilder haben in diesem Beispiel eine Breite von 300px
Mit position:relative und left:50% schiebst du das mittlere Image nach rechts, mit margin-left:-450px schiebts du das Image wieder entsprechend nach Links, -150px (1/2 von 300px) + -300px (Breite des linken Images)

Funktioniert im IE7 und FF2, du musst aber evt. noch eine Spacer-div einbauen damit sich die Divs nicht zusammenschieben wenn das außenliegende Div entsprechend verkleinert wird.

Im übrigen bin ich davon überzeugt, dass es auch eine sehr viel leichtere Lösung gibt, es wäre allerdings hilfreich, wenn du z. B. mal eine Grafik o.ä. zeigen könntest und sagen könntest, welche Werte fix und welche liquid, sprich prozentual, sind.

MfG Hk.

Hi HK,

danke für die Antwort. Ich hab deine Lösung ausprobiert, und die scheint zu funktionieren -- Vielen Dank.

Ich hab mir einfach nicht gedacht, dass so eine "einfache" Aufgabe, so kompliziert werden kann.

Nochmal zu deiner Frage was ich denn eigentlich will: Ich habe im Worst Case 3 Bilder unterschiedlicher Größe, die ich in meinem DIV Bereich ausgerichtet haben möchte ... Höhe ist irrelevant, der DIV Bereich ist hoch genug. Wichtig ist die Ausrichtung der drei unterschiedlichen Bilder.

Bild1-links (z.B. 130px breit), Bild2-Center(z.B. 600px breit), Bild3-rechts(z.B. 200px) breit.
Bild1 soll ganz links liegen, bild2 soll genau mittig sein, und Bild3 ganz rechts... Im besten Fall, sollte sich das Stylesheet nicht mehr ändern müssen, wenn ich drauf kommen, Bild2 doch noch um 30px breiter zu machen.

Div Bereich ist z.B. 61.25em breit, Höhe: 7em.

In meinem beschränkten ANSI C Denken eine eigentlich einfach Aufgabe ;-)
Aber CSS ist da einfach vom Denkansatz komplett verschieden, seh ich schon ein.

mfG Shortie