|
|||
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 |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
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> |
|
|||
also etwa so
|
|
|||
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; } |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |