✔ background-image wird verschoben durch Text!

[4nd3rl]

Hallo zusammen,

in meinem Design werden 2 background-images in Boxen verschoben, wenn man die Schriftgröße von einem Text ändert, der über den Boxen liegt. Ich hätte die Hintergrundbilder gerne fest. Zur Veranschaulichung 2 Bilder und der "Quältext":

#top_bg /*umgibt die beiden unteren Container und richtet sie mittig aus*/
{
width:820px; 
height: 307px; 
margin: 0 auto; 
text-align:center;
background-image: url(images/bg_top.gif);
background-repeat: no-repeat;
}

#logo_top_left /*in den Screenshots als graues Rechteck dargestellt*/
{
	position:relative; top:25px; left:38px;
	float:left;
	background-image: url(images/logo_top.gif);
	background-repeat: no-repeat;
	width:242px;
	height:249px;
	}

#logo_top_right /*das Photo auf der rechten Seite*/
{
	position:relative; top:25px; right:38px;
	float:right;
	background-image: url(images/right_top.png);
	background-repeat: no-repeat;
	width:503px;
	height:249px;
	}

Wer weiß warum?
Danke und Gruß
4nd3rl

 

[Maik]

Hi,

in welchem Browser tritt denn bei dir diese Darstellung auf, wenn die Ansicht der Schriftgröße im Browser vergrößert wird?

Denn entgegen deinem Screenshot verschieben sich bei mir im Firefox nicht die Hintergrundbilder, sondern die komplette Box #top_bg, was in der Natur des Textflusses liegt.

Opera hingegen wartet da mit seinem eigenen "Feature" auf, und skaliert bei einer Schriftgrößenänderung automatisch alle enthaltenden Seitenelemente.

 

[4nd3rl]

Dein Einwand ist korrekt, sorry.

Browserverschiebung nur im FF, IE6 macht insofern keine Mucken, weil die Schriftgröße da, auch beim Versuch Sie zu ändern, gleich bleibt
Andere Browser kann ich hier nicht testen.

Wie kann ich nun das Verschieben verhindern? Wenn ich position:absolute; nehme, dann kann ich die Bilder nicht mehr so ausrichten, wie ich es gerne hätte. Es besteht ja dann kein Bezug mehr zu der Box #top_bg, die ja die beiden Akteure mittig ausrichtet.

Hast du einen Tip für mich?

 

[Maik]

Wenn ich position:absolute; nehme, dann kann ich die Bilder nicht mehr so ausrichten, wie ich es gerne hätte. Es besteht ja dann kein Bezug mehr zu der Box #top_bg, die ja die beiden Akteure mittig ausrichtet.

Eine absolute Positionierung incl. horizontaler Zentrierung wäre sehr wohl möglich:

#top_bg /*umgibt die beiden unteren Container und richtet sie mittig aus*/
{
width:820px;
height: 307px;
position:absolute;
top:30px;
left:50%;
margin-left:-410px; /* negative Hälfte von width:820px */
text-align:center;
background: url(images/bg_top.gif);
background-repeat: no-repeat;
}

Im Firefox, IE und Safari bleibt die Box bei der Skalierung der Schriftgröße auch an ihrem angedachten Platz, nur verschwindet der Text bzw. die Links dann darunter, oder er legt sich über die Box, je nachdem, welche Schichtpositionierung für die einzelnen Seitenbereiche vorgenommen wird.

Opera lässt sich davon nicht beeindrucken und skaliert weiterhin fleissig alle Elemente und verschiebt sie dementsprechend nach unten.

 

[4nd3rl]

Sehr geil, you made my day!
Danke ;-)