nicht angemeldet
Zentrierung eines Objektes in Mitte des Bildschirms
0 
Gunnar Bittersmann
0 0 0 0 0 0 0 0 0
0
Zentrierung eines Objektes in Mitte des Bildschirms
Hallo Forum,
ich habe ein Problem bei einer Auflösung von 800 x 600.
Bei 1024x768 ist das Objekt wunderbar in der Bildschirmmitte zentriert.
Bei 800x600 kann ich zwar nach unten scrollen aber der wichtige obere Rand des Objektes in dem sich die Navi befindet ist nicht mehr im Browserfenster.
Sitze nun schon fast ne Stunde daran und bin wieder am Ausgangspunkt.
Wie bekomme ich das Ding zentriert bei 1024x768 und in voller Höher sichtbar bei 800x600?
<style type="text/css">
<!--
#myObject {
position:absolute;
top:50%;
left:50%;
margin-left:-375px;
margin-top:-275px;
width:750px;
height:550px;
}
-->
</style>
</head>
<body>
<div id="myObject">Hier ist das Objekt drin(ausgelassen)</div>
</body>
-
ich habe ein Problem bei einer Auflösung von 800 x 600.
Proggi,
Die Bildschirmauflösung hat für dich keine Relevanz. Nicht die geringste.Was für dein Anliegen entscheidend ist, ist die Größe des Browserfensters, genauer: dessen Inneres, des Viewports.
Hast du schon mal versucht, das Archiv zu befragen? Ein Thread zu dem Thema ist auch noch aktuell in der Forumshauptdatei.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo,
Hast du schon mal versucht, das Archiv zu befragen?
So wie ich es jetzt habe ist es sogar aus dem Archiv.
Ein Thread zu dem Thema ist auch noch aktuell in der Forumshauptdatei.
Welcher soll das sein? Kann ihn nicht ausmachen.
-
Tag Proggi.
Ein Thread zu dem Thema ist auch noch aktuell in der Forumshauptdatei.
Welcher soll das sein? Kann ihn nicht ausmachen.Da helfe ich doch mal aus: https://forum.selfhtml.org/?t=118878&m=762140.
Siechfred
-
Da helfe ich doch mal aus:
Danke aber die machen das ja alle genau so wie ich:
http://milov.nl/code/css/verticalcenter.htmlNur bei denen passt das Objekt vertikal auch auf den Bildschirm bei 800x600. Mein Objekt ist aber 750 breit und 550 hoch. Mit dem negativen Margin geht es nicht!
-
Danke aber die machen das ja alle genau so wie ich:
http://milov.nl/code/css/verticalcenter.htmlBist du bis zu meinem Posting nebst verlinktem Beispiel vorgedrungen? Hast du dir Detlefs Vorschlag angesehen?
Siechfred
-
Hast du dir Detlefs Vorschlag angesehen?
Ups, der war einem anderen Thread, deshalb exklusiv für dich auch dieser Link:
https://forum.selfhtml.org/?t=119025&m=763225Siechfred
-
Ups, der war einem anderen Thread, deshalb exklusiv für dich auch dieser Link:
https://forum.selfhtml.org/?t=119025&m=763225Ja, das ist ja wieder genau das gleiche.
Negative Hälfte der Breite und Höhe. Das klappt nicht.-
Versuch mal ein 750x550 Bild bei einer Auflösung von 1024x768 zu zentrieren. Und dann schalte mal auf 800x600!
Na?
-
Versuch mal ein 750x550 Bild bei einer Auflösung von 1024x768 zu zentrieren. Und dann schalte mal auf 800x600!
Und? Genau das habe ich versucht, deutlich zu machen. Lies bitte den von mir verlinkten Thread bis zum Ende, dort gibt es jede Menge Alternativvorschläge.
Siechfred
-
Hi,
ich denke du beziehst dich auf diese Seite:
http://d-graff.de/selfhtml/center2.html
Habe meine Code abgeändert ohne den geringsten Effekt. Bleibt genau gleich. Warum bloß?
<style type="text/css">
<!--
html, body{
height:100%;
margin:0;
padding:0;
}
#spacer, #center{
position:absolute;
margin:0;
padding:0;
}
#spacer{
/* sorgt dafür, dass wenn nötig Scrolleisten erscheinen */
width:100%; /* ganauso breit, wie der Anzeigebereich */
height:100%; /* ganauso hoch, wie der Anzeigebereich *//* jetzt werden die notwendigen oder gewünschten Mindestmaße definiert. */
min-width:380px; /* Breite von #center (+ ein paar Pixel Rand) */
min-height:280px; /* Höhe von #center (+ ein paar Pixel Rand) */
}
#center {
position: absolute;
top:50%;
left:50%;
margin-left:-375px;
margin-top:-275px;
width:750px;
height:550px;
}
-->
</style>
</head>
<body>
<div id="spacer">
<div id="center">OBJEKT hier drin</div>
</div>
</body>
</html>-
Hallo Proggi
/* jetzt werden die notwendigen oder gewünschten Mindestmaße definiert. */
min-width:380px; /* Breite von #center (+ ein paar Pixel Rand) */Das ^^^ ist deiner Meinung nach die Breite von #center?
min-height:280px; /* Höhe von #center (+ ein paar Pixel Rand) */
Das ^^^ ist deiner Meinung nach die Höhe von #center?
#center {
...
width:750px;
height:550px;...
</head>
Der Teil für den IE fehlt auch.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Das ^^^ ist deiner Meinung nach die Breite von #center?
min-height:280px; /* Höhe von #center (+ ein paar Pixel Rand) */
Das ^^^ ist deiner Meinung nach die Höhe von #center?Ich tue so gut wie immer nur meine Meinung hier kund.
Was ist deine Meinung dazu?-
Was ist deine Meinung dazu?
Dass du den Code von Detlef nicht verstanden hast. Beachte bitte die Kommentare zu den Properties des Spacer-DIV und vergleiche sodann die Mindestbreite und -höhe dieses DIV mit der definierten Breite und Höhe des Center-DIV sowohl bei Detlefs Vorschlag als auch bei deiner Umsetzung. Fällt dir da wirklich nichts auf?
Siechfred
-
Mit dem IE Scipt geht es auch nicht. Javascript ist aktiviert.
<style type="text/css">
<!--
html, body{
height:100%;
margin:0;
padding:0;
}
#spacer, #center{
position:absolute;
margin:0;
padding:0;
}
#spacer{
/* sorgt dafür, dass wenn nötig Scrolleisten erscheinen */
width:100%; /* ganauso breit, wie der Anzeigebereich */
height:100%; /* ganauso hoch, wie der Anzeigebereich *//* jetzt werden die notwendigen oder gewünschten Mindestmaße definiert. */
min-width: 760px; /* Breite von #center (+ ein paar Pixel Rand) */
min-height: 560px; /* Höhe von #center (+ ein paar Pixel Rand) */
}
#center {
position: absolute;
top: 50%;
left: 50%;
margin-left: -375px;
margin-top: -275px;
width: 750px;
height: 550px;
}
/* min-height für den IE */
* html #center {
height:560px; /* das selbe Maß wie oben bei min-height */
}
-->
</style>
<!-- Hiermit wird min-height und min-width für den IE simuliert, Maße wie oben.
Es funktioniert nur wenn Javascript aktiviert ist. -->
<!--[if lte IE 6]>
<style type="text/css">
#spacer{
width:expression(document.body.clientWidth < 761 ? "760px" : "100%");
height:expression(document.body.clientHeight < 561 ? "560px" : "100%");
/* Die zweite Zahl gibt die Mindestbreite bzw. -höhe an. Die erste Zahl
muss ein wenig größer als diese sein, um Endlosschleifen zu vermeiden. */
}
</style>
<![endif]-->-
Mit dem IE Scipt geht es auch nicht. Javascript ist aktiviert.
Siehe Lösungsansatz ohne Javascript.
Siechfred
-
Jetzt klappt es.
Vielen Dank!
-
-
-
-
Tut mir leid. Jetzt sehe ich was du meinst.
Nun klappt es wenigstens im Firefox. Im IE besteht das Problem weiter.<style type="text/css">
<!--
html, body{
height:100%;
margin:0;
padding:0;
}
#spacer, #center{
position:absolute;
margin:0;
padding:0;
}
#spacer{
/* sorgt dafür, dass wenn nötig Scrolleisten erscheinen */
width:100%; /* ganauso breit, wie der Anzeigebereich */
height:100%; /* ganauso hoch, wie der Anzeigebereich *//* jetzt werden die notwendigen oder gewünschten Mindestmaße definiert. */
min-width: 760px; /* Breite von #center (+ ein paar Pixel Rand) */
min-height: 560px; /* Höhe von #center (+ ein paar Pixel Rand) */
}
#center {
position: absolute;
top: 50%;
left: 50%;
margin-left: -375px;
margin-top: -275px;
width: 750px;
height: 550px;
}
/* min-height für den IE */
* html #center {
height:560px; /* das selbe Maß wie oben bei min-height */
}
-->
</style>
-
-
-
-
-
-
-
-
-
-
-
-
Du meinst ja wohl nicht diesen https://forum.selfhtml.org/?t=119102&m=764073 oder?
Das ist ja genau so wie ich es gemacht habe.
-