zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme beim positionieren von Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.04.2006, 18:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2006
Beiträge: 4
Christian befindet sich auf einem aufstrebenden Ast
Standard Probleme beim positionieren von Bildern

Hab ein Problem beim positionieren der Bilder auf meiner Website.

Das Problem liegt darin, dass Firefox und der IE die Seiten vollkommen unterschiedlich darstellen.

Der IE positioniert die Bilder an der richtigen Stelle.
Die kleinen Zwerge sollten allerdings am unteren Bildschirmrand stehen, so, wie das Firefox darstellt.

http://web723.webbox239.server-home.org/de/idee.html

STYLE.CSS
body{
background-color:#ffffff;
margin:0;
padding:10% 0 0 0;
text-align:center;
height:80%;}

#box{
color:black;
background-color : 79C1E7;
width:80%;
height:80%;
text-align:left;
margin:auto;
padding : 0px;
overflow:auto;}



<div id="box">
<p span style="padding: 20px 20px 20px 250px">
Die Idee:
Einfach – aber anders, ...
</span></p>

<div style="position: absolute; bottom: 0px; left: 10px; z-index=1">[img]../images/gras.jpg[/img]</a></div>

<div style="position: absolute; bottom: 0px; left: 20px; z-index=2">[img]../images/blume.gif[/img]</div>

<div style="position:absolute; left:0; right:0; bottom:0; height:35px; width:100%;
background-image:url(../images/kleiner_Zwerg.jpg); background-repeat:repeat-x;z-index=3">
</div>
</body>

Wäre super, wenn ihr mir helfen könntet.

Vielen Dank
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.04.2006, 10:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2006
Beiträge: 4
Christian befindet sich auf einem aufstrebenden Ast
Standard

So, ich habe jetzt meinen Quelltext mal ein wenig bereinigt.

Leider werden die Bilder immer noch nicht an der richtigen Position angezeigt.

Die Wiese sollte am unteren Ende der Box sein und die Blume sollte links unten in der Box sein.

http://web723.webbox239.server-home.org/de/idee.html

Vielen Dank für eure Hilfe
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.04.2006, 11:56
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Christian,
ich schlage vor -- da sie eher Schmuck-Charakter haben -- die Bilder als Hintergrundbilder zu verstehen.

Die Blume als einzelnes Objekt kann man absolut positionieren, damit es keine Auswirkung auf den Seitenfluss hat.

Damit muss man der #box per position:relative sagen, dass sie den containing block für die absolut positionierte Blume bilden soll. Auch bekommt die #box die Wiese als Hintergrundbild, repeat-x.

Weil IE6 position:fixed für die Blume nicht versteht, kann man nicht die Box mit Scrollbalken versehen, da die Blume bei position:absolute mitscrollen würde. Der Ausweg ist also, den Text in einen Extra-Bereich zu stellen, #scrollpane.

Da alle heights in Prozent angegeben sind, und selbst body bei dir 80% height hat, musst du auch für html eine Bezugsgröße angeben.

Code:
html {height: 100%;}

body { ... height: 80%;... }

#box { 
	position:relative;
	margin: 0 auto; 
	width: 80%; 
	height: 80%; 
	padding: 0px;  
	color: black; 
	text-align: left; 
	background: #79C1E7 url(gras.jpg) left bottom repeat-x; 
	}

#scrollpane {
	overflow: auto; 
	height: 100%; 
	position: relative; /*IE*/
	padding: 0 20px 0 150px; /*links Platz für die Blume */
	}

#blume {
	position:absolute; 
	bottom: 0; 
	left: 0;
	width: 88px; 
	height: 290px; 
	background: transparent url(blume.gif) no-repeat;
	}

Code:
<div id="box">
	<div id="scrollpane">
		<h2>Die Idee:</h2>

		

Einfach – ...</p>

		

6 + 1 Zwerg ...</p>

		

Viel Spaß beim entdecken von 6 + 1 Zwerg!</p>
	</div>

	<div id="blume"></div>
</div>
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #4 (permalink)  
Alt 09.04.2006, 12:26
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

also etwa so
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 09.04.2006, 13:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.04.2006
Beiträge: 4
Christian befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, der Tipp war super. Jetzt klappts endlich. *freu

Gibt es eine Möglichkeit der Box eine andere Höhe zuzuweisen?
Wenn ich bei height: 550 px; eine andere Größe angebe aktzepiert er das leider nicht.

#box {
position:relative;
margin: 0 auto;
width: 760px;
--> height: 550 px; <--
padding: 0px;
color: black;
text-align: left;
background: #79C1E7 url(../images/gras.jpg) left bottom repeat-x;
}
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit box-sizing: border-box bei Bildern web334 CSS 7 03.07.2014 14:15
Menü mit Bildern - Probleme bei FF UND IE Noo CSS 18 28.10.2005 17:50
Probleme beim Positionieren meines Menüs EzKoRiaL CSS 10 05.08.2004 21:58
Probleme beim Positionieren! -derDon- CSS 1 30.11.2003 15:32
Probleme beim Positionieren von Bildern Jeff CSS 1 25.08.2003 09:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:25 Uhr.