nicht angemeldet
Absolut mittige Positionierung
Hallo Leute,
ich möchte (ohne den Einsatz von Tabellen) ein Block-Element (800x600) so positionieren, daß es zu allen Seiten den gleichen Abstand hat!
Die horizontale mittige Ausrichtung klappt mittels
<!-- workaround für IE -->
<div style="text-align:center; vertical-align:middle;">
<!-- bitte nicht an position:relative stören -->
<div style="margin-left:auto; margin-right: auto; margin-top: auto; margin-bottom: auto; position: relative; width:800px; height: 600px; border:1px solid #FF0000;">
<img src="asdf" alt="" />
</div>
</div>
- vertical-align bringt aber nichts
- genausowenig auto für margin-top und -bottom
- auch position:absolute; left:50%; right:50%; top:50%; bottom:50%; bringt nicht
Welche Lösungen gibt es also, um die vertikale mittige Ausrichtung zu erzwingen!
Danke im voraus
Martin
-
Hallo Martin,
1. Hast Du versucht den html und body Elementen in CSS eine height: 100% zu verpassen?
2. Hast Du versucht, dem äußerem <div> die Größenangaben zu verpassen?
3. Ist Dir klar, dass "Optimierung" auf eine Bildschirmauflösung böse[tm] ist?Grüße,
Christian
-
Hallo Christian,
- Hast Du versucht den html und body Elementen in CSS eine height: 100% zu verpassen?
Nein ... habs probiert, aber bringt auch nix!
- Hast Du versucht, dem äußerem <div> die Größenangaben zu verpassen?
Nein ... aber ebenfalls kein Erfolg!
- Ist Dir klar, dass "Optimierung" auf eine Bildschirmauflösung böse[tm] ist?
Ja :)
Hmm, vertical-align scheint mir eigentlich auch nicht ganz das richtige css Attribut zu sein :(
Liebe Grüße
Martin
-
-
Hallo Leute,
ich möchte (ohne den Einsatz von Tabellen) ein Block-Element (800x600) so positionieren, daß es zu allen Seiten den gleichen Abstand hat!
Die horizontale mittige Ausrichtung klappt mittels
<!-- workaround für IE -->
<div style="text-align:center; vertical-align:middle;"><!-- bitte nicht an position:relative stören -->
<div style="margin-left:auto; margin-right: auto; margin-top: auto; margin-bottom: auto; position: relative; width:800px; height: 600px; border:1px solid #FF0000;"><img src="asdf" alt="" />
</div>
</div>
- vertical-align bringt aber nichts
- genausowenig auto für margin-top und -bottom
- auch position:absolute; left:50%; right:50%; top:50%; bottom:50%; bringt nicht
Welche Lösungen gibt es also, um die vertikale mittige Ausrichtung zu erzwingen!
Hallo Martin,
vertical-align richtet nur nebeneinanderstehende Elemente oder Texte in einer Zeile im Verhältnis zueinander aus, du kannst vertical-align also i.d.R. nicht dazu benutzen um ein "<div>" in einem "<div>" horizontal auszurichten.
siehe auch:
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align
Du kannst aber einen kleinen, na ja nennen wir es mal vorsichtig: Trick, benutzen, indem du deinen Quelltext so umschreibst:
<div style="text-align:center; vertical-align:middle;">
<span style="position: relative; width:800px;
height: 600px; border:1px solid #FF0000;"><span style="position: relative; left:0px;
width:0px; height:100%;
border:1px solid #FFffff;
vertical-align:middle;">
</span><img src="asdf" alt=""
style="vertical-align:middle;"/>
</span>
</div>Du erzeugst also 2 nebeneinanderliegende "<span>" und richtest diese vertical mittig zueinander aus, so kommt das Bild in die Mitte, vorausgesetzt, dass das "1. <span>" die gleiche Höhe hat wie dein äußerer Rahmen (bzw. <div>).
Margin-left und Co. kannst du i.d.R. weglassen, ergibt sich ja eh "auto"matisch.Mag sein, dass es noch andere Lösungen gibt, aber momentan von meiner Seite her nicht.
MfG
Palme
-
Hi Palme,
erstmal vielen Dank für Deine ausführliche Antwort.
vertical-align richtet nur nebeneinanderstehende Elemente oder Texte in einer Zeile im Verhältnis zueinander aus, du kannst vertical-align also i.d.R. nicht dazu benutzen um ein "<div>" in einem "<div>" horizontal auszurichten.
Ja, exakt was ich auch im Hinterkopf hatte :))) .... bloß auf span bin ich nicht gekommen!
siehe auch:
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align
Du kannst aber einen kleinen, na ja nennen wir es mal vorsichtig: Trick, benutzen, indem du deinen Quelltext so umschreibst:
<div style="text-align:center; vertical-align:middle;">
<span style="position: relative; width:800px;
height: 600px; border:1px solid #FF0000;"><span style="position: relative; left:0px;
width:0px; height:100%;
border:1px solid #FFffff;
vertical-align:middle;">
</span><img src="asdf" alt=""
style="vertical-align:middle;"/>
</span>
</div>Du erzeugst also 2 nebeneinanderliegende "<span>" und richtest diese vertical mittig zueinander aus, so kommt das Bild in die Mitte, vorausgesetzt, dass das "1. <span>" die gleiche Höhe hat wie dein äußerer Rahmen (bzw. <div>).
Margin-left und Co. kannst du i.d.R. weglassen, ergibt sich ja eh "auto"matisch.Mag sein, dass es noch andere Lösungen gibt, aber momentan von meiner Seite her nicht.
Ich hab noch ein Lösung gefunden, die zwar nicht ganz sauber ist, aber zumindest funktioniert:
<div style="
width:800px;
height:600px;
position:absolute;
left:50%;
margin-left:-400px; //Hälfte der Breite des divs
top:50%;
margin-top:-300px; //Analag halbe Höhe
">
<!== hier absolut mittigiger Bereich -->
</div>Sauber ist sie deshalb nicht, weil sie bei einer Fenstergröße des Browser, die kleiner als 800x600 ist, linken und oberen Teil des div-Inhalt verschluckt.
Liebe Grüße
Martin
-
Hi Palme,
erstmal vielen Dank für Deine ausführliche Antwort.
vertical-align richtet nur nebeneinanderstehende Elemente oder Texte in einer Zeile im Verhältnis zueinander aus, du kannst vertical-align also i.d.R. nicht dazu benutzen um ein "<div>" in einem "<div>" horizontal auszurichten.
Ja, exakt was ich auch im Hinterkopf hatte :))) .... bloß auf span bin ich nicht gekommen!siehe auch:
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#vertical_align
Du kannst aber einen kleinen, na ja nennen wir es mal vorsichtig: Trick, benutzen, indem du deinen Quelltext so umschreibst:
<div style="text-align:center; vertical-align:middle;">
<span style="position: relative; width:800px;
height: 600px; border:1px solid #FF0000;"><span style="position: relative; left:0px;
width:0px; height:100%;
border:1px solid #FFffff;
vertical-align:middle;">
</span><img src="asdf" alt=""
style="vertical-align:middle;"/>
</span>
</div>Du erzeugst also 2 nebeneinanderliegende "<span>" und richtest diese vertical mittig zueinander aus, so kommt das Bild in die Mitte, vorausgesetzt, dass das "1. <span>" die gleiche Höhe hat wie dein äußerer Rahmen (bzw. <div>).
Margin-left und Co. kannst du i.d.R. weglassen, ergibt sich ja eh "auto"matisch.Mag sein, dass es noch andere Lösungen gibt, aber momentan von meiner Seite her nicht.
Ich hab noch ein Lösung gefunden, die zwar nicht ganz sauber ist, aber zumindest funktioniert:
<div style="
width:800px;
height:600px;
position:absolute;
left:50%;
margin-left:-400px; //Hälfte der Breite des divs
top:50%;
margin-top:-300px; //Analag halbe Höhe
">
<!== hier absolut mittigiger Bereich -->
</div>Sauber ist sie deshalb nicht, weil sie bei einer Fenstergröße des Browser, die kleiner als 800x600 ist, linken und oberen Teil des div-Inhalt verschluckt.
Hi,
deshalb habe ich es dir auch auf die andere Art und Weise vorgeschlagen, denn wenn du deine Auflösung änderst, egal ob größer oder kleiner, so verschiebt sich dein Bild.
Daran solltest du vor allem deshalb denken, da nicht jeder der auf deine Homepage kommt, die gleiche Auflösung hat wie du -beim Testen der Seiten.MfG
Palme
-
Hi Palme,
<div style="text-align:center; vertical-align:middle;">
<span style="position: relative; width:800px;
height: 600px; border:1px solid #FF0000;"><span style="position: relative; left:0px;
width:0px; height:100%;
border:1px solid #FFffff;
vertical-align:middle;">
</span><img src="asdf" alt=""
style="vertical-align:middle;"/>
</span>
</div>Hab inzwischen Deinen Vorschlag mal probiert, aber leider ohne Erfolg (sowohl in IE5.5, 6, als auch in Opera) :( Hab auch einige Modifikationen probiert, klappt aber alles nicht :(
Du erzeugst also 2 nebeneinanderliegende "<span>" und richtest diese vertical mittig zueinander aus, so kommt das Bild in die Mitte, vorausgesetzt, dass das "1. <span>" die gleiche Höhe hat wie dein äußerer Rahmen (bzw. <div>).
Margin-left und Co. kannst du i.d.R. weglassen, ergibt sich ja eh "auto"matisch.Die Idee an sich ist gut, bloß es klappt nicht :(
Ich hab noch ein Lösung gefunden, die zwar nicht ganz sauber ist, aber zumindest funktioniert:
<div style="
width:800px;
height:600px;
position:absolute;
left:50%;
margin-left:-400px; //Hälfte der Breite des divs
top:50%;
margin-top:-300px; //Analag halbe Höhe
">
<!== hier absolut mittigiger Bereich -->
</div>Sauber ist sie deshalb nicht, weil sie bei einer Fenstergröße des Browser, die kleiner als 800x600 ist, linken und oberen Teil des div-Inhalt verschluckt.
deshalb habe ich es dir auch auf die andere Art und Weise vorgeschlagen, denn wenn du deine Auflösung änderst, egal ob größer oder kleiner, so verschiebt sich dein Bild.
Wäre super, wenn Du mir mal eine funktionierenden source von Deiner Version/Idee schicken könntest. Vielleicht seh ich den Fehler gerade nicht!
Bei meiner Version bleibt es immer in der Mitte :)) Probleme gibts nur, wenn der screen kleiner als 800x600 ist!!
Daran solltest du vor allem deshalb denken, da nicht jeder der auf deine Homepage kommt, die gleiche Auflösung hat wie du -beim Testen der Seiten.
Ja, das ist schon klar :))
Liebe Grüße
Martin
-
Hi Palme,
<div style="text-align:center; vertical-align:middle;">
<span style="position: relative; width:800px;
height: 600px; border:1px solid #FF0000;"><span style="position: relative; left:0px;
width:0px; height:100%;
border:1px solid #FFffff;
vertical-align:middle;">
</span><img src="asdf" alt=""
style="vertical-align:middle;"/>
</span>
</div>Hab inzwischen Deinen Vorschlag mal probiert, aber leider ohne Erfolg (sowohl in IE5.5, 6, als auch in Opera) :( Hab auch einige Modifikationen probiert, klappt aber alles nicht :(
Hallo Martin,
Hast du den Quelltext hier reinkopiert, oder geschrieben?
Wenn du ihn geschrieben hast, dann überprüfe bitte deine HTML-Datei mal auf evtl. Schreibfehler.
Ich habe den Quelltext so wie er oben steht in eine HTML-Datei gepackt, und bei mir klappts (IE6), allerdings im Opera und im Mozilla bei mir auch nicht, hmm... muss ich mal nochmal schauen, aber wie gesagt im IE klappts bei mir, deshalb mal Syntax bei dir schauen!MfG
Palme
-
Hi Palme,
Hast du den Quelltext hier reinkopiert, oder geschrieben?
Wenn du ihn geschrieben hast, dann überprüfe bitte deine HTML-Datei mal auf evtl. Schreibfehler.Hab ich eigentlich gemacht .... ich seh keinen syntaktischen Fehler :((
Ich habe den Quelltext so wie er oben steht in eine HTML-Datei gepackt, und bei mir klappts (IE6), allerdings im Opera und im Mozilla bei mir auch nicht, hmm... muss ich mal nochmal schauen, aber wie gesagt im IE klappts bei mir, deshalb mal Syntax bei dir schauen!
Ich hab das ganze jetzt in einen neuen Thread verschoben. "fest vorgegebene Zellengröße in Tabelle", da es also mit normal CSS in divs meiner Meinung nach nicht sauber in den Griff zu kriegen ist!
Liebe Grüße
Martin
-
-
-
-