nicht angemeldet
Opera zentriert IMG nicht
0 
henman
Opera zentriert IMG nicht
Hallo zusammen,
ich schlag mich seit mehreren Stunden mit einem (eigentlich) kleinen Problem rum.
Die Seite (Bildergalerie), an der ich dran bin, soll eine Fullscreen-Seite werden. Also sie skaliert immer auf volle breite und volle Höhe.
Unterteilt ist sie in 3 Bereichen:
- Header
- Content
- Footer
Der Content-DIV beinhaltet ein Bild, welches zentriert mitskaliert werden soll, dabei aber nicht das Seitenverhältnis verlieren darf. Das klappt auch alles wunderbar, außer in Opera. Ich habe mal ein bisschen im Internet rumgestöbert und rausgefunden, dass ein Bild, welches position:absolute hat, sich erst zentriert, wenn Opera die feste Breite von dem Bild weiß. Problem ist nur, dass das Bild immer ausgetauscht werden soll (also unterschiedliche Größen) und durch das skalieren keine feste Größe geben darf.
Beispielbild was man verwenden könnte, um den Dummy etwas besser nachzuvollziehen:
http://www.wallpaper-gratis.eu/blume/natur/blume001_1400x1050.jpg
(Bilder sind halt größer als der letztendliche Anzeigenbereich und werden dementsprechend runterskaliert.)
Danke schonmal für jede Hilfe!
Viele Grüße
<body>
<div id="header"></div>
<div id="content">
<img src="http://www.wallpaper-gratis.eu/blume/natur/blume001_1400x1050.jpg" />
</div>
<div id="footer"></div>
</body>
*{
margin:0;
padding:0;
}
img {
border:none;
}
html,body {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
#header {
width:100%;
min-height:6%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:6%; /* For IE */
background-color:#0033CC;
}
#content {
width:94.2%;
height:72%;
background-color:#00FF00;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
background-color:#00FF00;
}
#content img {
border:1px solid #999999;
max-width:100%;
max-height:100%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#footer {
width:100%;
min-height:21%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:21%; /* For IE */
background-color:#993300;
}
-
hallo,
soll das wie hier aussehen?
Wenn ja, dann verstehe ich nicht, warum du überhaupt mit position arbeitest. Bis auf das Zeug im Header ist doch alles untereinander. das content-div kannst du mit text-align:center; ausstatten und das Bild über CSS mit deinen Angaben skalieren (width und height). mehr brauchst du nicht. position ist unnötig.grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
hallo,
soll das wie hier aussehen?
Wenn ja, dann verstehe ich nicht, warum du überhaupt mit position arbeitest. Bis auf das Zeug im Header ist doch alles untereinander. das content-div kannst du mit text-align:center; ausstatten und das Bild über CSS mit deinen Angaben skalieren (width und height). mehr brauchst du nicht. position ist unnötig.grüße,
henmanHallo Henman,
danke erstmal für die Antwort.ne, das soll nicht wie der Link, den Du genannt hast aussehen.
Vielleicht kopierst Du Dir den Code mal rüber ... Tut mir Leid, aber ich habe im Moment keine Möglichkeit das irgendwo online zu legen.Wenn Du den Browser größer oder kleiner ziehst, soll das Bild mitskalieren. Deswegen befindet sich das Bild in einem DIV um eine Relationsgröße zu haben und quasi eingezwengt zu werden. Scroller sollen vermieden werden.
Ist etwas schwierig zu erklären ... In Firefox, zum Beispiel, arbeitet es wunderbar. Ich wünschte ich hätte Webspace, dann könnte ich es zeigen.Was zum Bild selber noch zusagen ist, dass es bei der Skalierung nie das Seitenverhältnis verlieren darf. Also eine Verzerrung sollte nicht passieren.
Aber letztendlich geht es mir nur um das horizontale zentrieren des Bildes im Opera :)
viele grüße
-