✔ Bild in mittigem Bild positionieren

Status
Nicht offen für weitere Antworten.
Sturmrider

Sturmrider

Erfahrenes Mitglied
Hallo zusammen :)
Ich versuche mit CSS auf einer Seite mit einem Kopfteil, Bildteil und Fußteil,
Code: 
|#################|
|######Kopfteil####|
|#################|
|-----------------|
|#################|
|######Bildteil###|
|#################|
|-----------------|
|#################|
|#######Fußteil###|
|#################|
ein Bild (1) mittig im Bildteil zu positionieren und auf ihm ein weiteres Bild (2) an eine bestimmte Stelle von Bild (1) zu positionieren. Natürlich wäre es kein Problem, wenn das Bild (1) nicht mittig positioniert würde. Da gibt es auch zahlreiche Beispiele im Netz:
http://www.frankmanno.com/ideas/css-imagemap/
http://www.cssplay.co.uk/articles/imagemap/
[...]
Dort könnte man mit festen Werten arbeiten...

Doch zurück zu meinem Problem. Ich kenne mich eigentlich ganz gut mit dem Box-Modell aus und trotzdem stehe ich vor einem Problem.
Das Bild (2) im Bild (1) zu positionieren müsste gehen, wenn man um Bild (1) ein enges Div macht, so das Bild (2) dieses Div als "Begrenzung" für top u. left nimmt (soll heißen, eine Position außerhalb des Div nach links wäre z.B. left: -20px;)
Allerdings bekomme ich ein so enges Div nur mit position: absolute hin und dann springt automatisch der Fußteil unten den Kopfteil und wird vom Bildteil verdeckt :(
Ich bin langsam am verzweifeln :( alles Tricksen hat mich bisher nicht weiter gebracht...
Habt vielleicht eine Idee?
 
Hi,

mein spontaner Lösungsvorschlag:

Code: 
<div class="box">
     <img src="..." alt="...">
     <img src="..." alt="..." class="pos">
</div>
Code: 
div.box {
position:relative;
width:200px;
height:200px;
}

div.box img.pos {
position:absolute;
top:10px;
left:10px;
}
mfg Maik
 
Darauf bin ich auch schon gekommen, nur bringt das leider ein Problem mit sich :(
der Fußteil rutscht hinter den Bildteil nach oben...

EDIT: Übrings danke für die schnelle Rückmeldung :)
 
Dann zeig mal deinen bisherigen Quellcode, denn hellsehen kann ich nicht, wie deine Seite konkret aufgebaut und formatiert ist.

mfg Maik
 
entschuldige
Code: 
[...]
<style type="text/css">
#box1 { border: solid black 1px; }
div.box2 {
	position:relative;
	border: solid black 1px;
	width:800px;
	height:600px;
	margin:auto;
}

div.box2 img.marker {
	position:absolute;
	top:25px;
	left:25px;
}
#box3 { border: solid black 1px; }
</style>
</head>

<body>

<div id="box1"><h1>Seite</h1></div>

<div class="box2">
	<img src="marker.gif" border="0" class="marker">
	<img name="locator" style="cursor:pointer;" onClick="coords(event);" src="14650751.jpg" border="0" usemap="#locator" id="bild"></div>
</div>
<div id="box3">
	<form name="test">
	x:<input type="text" name="x" size="4">
	 y:<input type="text" name="y" size="4">
	</form><br><br><br>
</div>
[...]

EDIT: Achso, ich vergaß -> durch die hohen Positionswerte: width:800px; height:600px; kann der Irrglaube entstehen, der Fußteil würde nicht nachrücken, wenn das Bild aber größer als 800x600 ist, bleibt das Problem leider
 
Zuletzt bearbeitet:
Passt doch, ansonsten kann ich da keine Probleme in den gängigen Browsern ausmachen.

mfg Maik
 
nein, leider nicht :(
#box3 rutscht unter div.box2, wobei die Größe von div.box2 nicht abhängig von den Bildmaßen ist, sondern von den gesetzten width- und height-Werten
d.h. wenn ein Bild größer ist als die div.box2 überdeckt es leider #box3
 
Dann richte mal für .box2 eine Mindesthöhe ein, denn die height-Deklaration wird von den standardkonformen Browsern als fixe Höhe behandelt, weshalb das nachfolgende Element nicht nach unten wandert, sondern vom "übergroßen" Grafikelement "überlappt" wird:

Code: 
div.box2 {
        position:relative;
        border: solid black 1px;
        width:800px;
        min-height:600px; /* Mindesthöhe in standardkonformen Browsern */
        height:auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height-Angabe ignorieren */
        height:600px; /* Mindesthöhe in IE */
        margin:auto;
}
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück