nicht angemeldet
Zentrieren OHNE <body style="height:100%">
Hallo SelfForumler,
es ist interessant, dass ich bei der Fertigstellung meiner Website nach langer Zeit wieder auf das Problem stoße, mit dem ich am Anfang das Webdesign begonnen habe...:
Es geht um das gute alte Zentrierungsproblem:
Ich möchte eine Tabelle, die 80% (des bodys) breit und 80% (des bodys) hoch ist, horizontal und vertikal auf der Website zentrieren.
Um das Problem einfach darzustellen, verwende ich für den gesamten Tabellenkörper im Folgenden einfach die Bezeichnung [tabelle].
Wenn ich die Tabelle horizontal zentrieren möchte, kann ich um die gesamte Tabelle ein div mit dem Attribut align="center" machen, was in jedem Browser funktioniert:
<div align="center">
[tabelle]
</div>
Möchte ich die Tabelle nun aber auch veritkal im body zentrieren, ergibt sich ein Problem: Einen valides HTML-Attribut gibt es nicht - ich muss also auf CSS zurückgreifen.
Dafür füge ich dem div eine CSS-Eigenschaft hinzu:
<div style="height:100%;vertical-align:middle;" align="center">
[tabelle]
</div>
Auch das funktioniert natürlich einwandfrei. In einigen Browsern sinnvollerweise aber nur, wenn ich bereits vorher auch das html- und das body-Tag mit dieser Anweisung (style="height:100%;") formatiert habe. Und jetzt kommt das eigentliche Problem:
Ich habe meinem body schon die CSS-Eigenschaft "padding:10px;" zugewiesen - diese wird aber vom Browser bei der Höhenerkennung des bodys nicht von der Gesamthöhe subtrahiert, sodass ein "height:100%;" im body-Tag bewirkt, dass der body + padding insgesamt höher ist als der zu Verfügung stehende Platz und damit ein ungewollter Scrollbar eingefügt wird!
Meine Frage jetzt:
Wie kann ich die Tabelle vertikal genau in der Mitte des bodys (mit padding:10px) zentrieren, ohne dass ein Scrollbar angezeigt wird (der body also größer wird) und dass es auch in jedem Browser funktioniert?
Das Beispiel, um das es sich handelt, findet ihr hier (im Hauptframe):
=> http://www.mischa-hildebrand.de/v2/index.php?cat=kontakt
Viele Grüße,
Mischa
--
=========================
www.young-power.de
www.mischa-hildebrand.de
=========================
www.young-power.de
www.mischa-hildebrand.de
-
Moin moin> Hallo SelfForumler,
es ist interessant, dass ich bei der Fertigstellung meiner Website nach langer Zeit wieder auf das Problem stoße, mit dem ich am Anfang das Webdesign begonnen habe...:
Klar, Probleme lösen sich ja nciht von alleine...
Es geht um das gute alte Zentrierungsproblem:
Ich möchte eine Tabelle, die 80% (des bodys) breit und 80% (des bodys) hoch ist, horizontal und vertikal auf der Website zentrieren.Ich habe es selber nciht ausprobiert, aber sollte mit margin:10% gehen - dann hast du oben, unten, links und rechts einen Rand von 10% - so als ob Höhe und Breite 80% betrügen und alles zentriert wäre...
Um das Problem einfach darzustellen, verwende ich für den gesamten Tabellenkörper im Folgenden einfach die Bezeichnung [tabelle].
Wenn ich die Tabelle horizontal zentrieren möchte, kann ich um die gesamte Tabelle ein div mit dem Attribut align="center" machen, was in jedem Browser funktioniert:
<div align="center">
[tabelle]
</div>Möchte ich die Tabelle nun aber auch veritkal im body zentrieren, ergibt sich ein Problem: Einen valides HTML-Attribut gibt es nicht - ich muss also auf CSS zurückgreifen.
Auch >align="center"< ist seit langem deprecated...
Warum eigentlich nicht alles mit div? Wozu brauchst Du die Tabelle?
Ich habe meinem body schon die CSS-Eigenschaft "padding:10px;" zugewiesen - diese wird aber vom Browser bei der Höhenerkennung des bodys nicht von der Gesamthöhe subtrahiert, sodass ein "height:100%;" im body-Tag bewirkt, dass der body + padding insgesamt höher ist als der zu Verfügung stehende Platz und damit ein ungewollter Scrollbar eingefügt wird!
Dann schreib doch einfach: padding:0;
Wozu die 10 px rundrum, wenn eh alles zentriert wird???
Meine Frage jetzt:
Wie kann ich die Tabelle vertikal genau in der Mitte des bodys (mit padding:10px) zentrieren, ohne dass ein Scrollbar angezeigt wird (der body also größer wird) und dass es auch in jedem Browser funktioniert?Versuch es mal einfach mit
padding:10px;
margin:10%;Und schreib, ob es geholfen hat, dann haben die anderen auch etwas davon!
Übrigens hat der IE Probleme mit korrekten Umsetzung solcher Anweisungen...
Gruß,
Marc.--
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28-
Hei,
Übrigens hat der IE Probleme mit korrekten Umsetzung solcher Anweisungen...
Aber auch nur der IE5, denn den IE6 kann man ja zum Glück mit dem richtigen Doctype in den Standard-Mode switchen.
Gruß,
-Efchen -
Hoi,
Ich habe es selber nciht ausprobiert, aber sollte mit margin:10% gehen - dann hast du oben, unten, links und rechts einen Rand von 10% - so als ob Höhe und Breite 80% betrügen und alles zentriert wäre...
Dann schreib doch einfach: padding:0;
Wozu die 10 px rundrum, wenn eh alles zentriert wird???
Beides ist in meinem Fall nicht so ohne Weiteres möglich, da ich für alle Seiten nur ein und dieselbe PHP-Datei verwende, in der das HTML-Grundgerüst drin steht und in der die einzelnen Seiten-Inhalte aus einer Datenbank eingefügt werden. Ich kann also nicht bei einer Seite das padding auf 10px setzen und auf der anderen auf 0px, da alle seiten über eine Datei laufen. Und diese 10px sind durchaus sinnvoll, wenn man sich mal andere Seiten anguckt!
Auch >align="center"< ist seit langem deprecated...
Da musst du mich jetzt mal einweihen - was heißt in diesem Zusammenhang "deprecated"? "Unfein"? ;-)
Warum eigentlich nicht alles mit div? Wozu brauchst Du die Tabelle?
Frag mich nicht, aber ich glaube, das hatte irgendeinen tieferen Sinn...
Wie kann ich die Tabelle vertikal genau in der Mitte des bodys (mit padding:10px) zentrieren, ohne dass ein Scrollbar angezeigt wird (der body also größer wird) und dass es auch in jedem Browser funktioniert?
Versuch es mal einfach mit
padding:10px;
margin:10%;Und schreib, ob es geholfen hat, dann haben die anderen auch etwas davon!
Das mache ich sowieso immer - aber es ist wie gesagt in meinem Fall nicht möglich, dem Body diese Eigenschaften zuzuweisen, ohne damit andere Seiten zu beeinflussen!
Übrigens hat der IE Probleme mit korrekten Umsetzung solcher Anweisungen...
Inwiefern? Was genau würde nicht richtig umgesetzt?!
Danke & Grüße,
Mischa--
=========================
www.youth-page.de
www.mischa-hildebrand.de-
Moin moin
Habe es jetzt mal selber gebastelt:
<?xml version="1.0" encoding="iso-8859-15" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
<title>Titel</title>
</head><body>
<div style="position:absolute;top:10%;left10%;right:10%;bottom:10%;width:80%;height:80%;background-color:tan;border:1px solid black;padding:10px;">
<p style="width:100%;background-color:#ffa;">Hallo Welt!</p>
</div></body>
</html>So klappt es mit den Nachbarn (IE6 und Mozilla 1.7 - andere bitte selber testen)... musst Du dann natürlich in die PHP-Datei einbinden... - die Hintergrundfarben dienen nur dazu, die einzelnen Bereiche erkennbar zu machen, ebenso border - einfach löschen......
Gruß,
Marc.--
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28-
Hi Marc,
So klappt es mit den Nachbarn (IE6 und Mozilla 1.7 - andere bitte selber testen)...
Gibt es für dieses Problem eigentlich eine Lösung, die auch in den alten Browsern funktioniert?
Viele Grüße
Mathias Bigge-
Hallo,
danke erstmal an Marc für den Lösungsvorschlag. Ich hab jetzt mit dieser Anregung etwas Ähnliches gebastelt, das im Opera 7.03, im Firefox 0.9, im Netscape 7.02, im Mozilla 1.6 und _fast_ auch im IE 6 funktioniert.
Ist meines Erachtens aber ein bisschen "gemogelt" und ich arbeite nur sehr ungern mit absoluter Positionierung (führt sehr oft zu Interpretations- und Bezugsproblemen).
Meine vorerst zufriedenstellende Lösung sieht so aus:
-----------------------------------------------------------------------
<div style="position:absolute;top:50px;left:10%;right:10%;bottom:10%;width:80%;height:80%;text-align:center;vertical-align:middle;">
<table style="width:100%;height:100%;" cellspacing="0" cellpadding="0"><tr><td style="text-align:center;vertical-align:middle;"><b>Viele Wege führen nach Rom</b><br>
Und einige auch zu mir.<br>
<br>
Auf den Seiten in diesem Navigationsbereich können Sie:<br>
<line><div align="left">
<ul>
<li>das <a href="index.php?cat=kontakt&id=guestbook" target="_top">Gästebuch durchstöbern</a> und selbst einen <a href="index.php?cat=kontakt&id=guestbooknew" target="_top">Eintrag hinterlassen</a> (ich würde mich freuen!)<br></li>
<li>erfahren, wie und wo Sie mich <a href="index.php?cat=kontakt&id=adresse" target="_top">erreichen</a> können<br></li>
<li>mir direkt und einfach über das <a href="index.php?cat=kontakt&id=formular" target="_top">Webinterface</a> eine Nachricht zukommen lassen.<br></li>
</ul>
</div><br>
Ich freue mich über Ihre Emails und Kommentare zu dieser Website!</td></tr></table>
</div>-----------------------------------------------------------------------
Der IE kriegt es merkwürdigerweise immer noch nicht hin, die Tabelle und deren Inhalt wirklich horizontal zu zentrieren - das ganze Gerüst ist ein ganzes Stückchen nach links verschoben (sieht man besonders gut, wenn man der Tabelle eine border gibt). Auch im Opera ist es minimal nach links gezogen.
Optisch stellt mich diese "Lösung" jetzt natürlich erstmal zufrieden - "programmiertechnisch" aber absolut nicht. Gibt es keine schönere Möglichkeit, ein div oder eine table vertikal _und_ horizontal im zur Verfügung stehenden Raum zu zentrieren?!
Gibt es für dieses Problem eigentlich eine Lösung, die auch in den alten Browsern funktioniert?
Kann ich leider nicht sagen, aber eigentlich müsste das ja in beinahe allen Browsern funktionieren, die CSS schon voll unterstützen - aber das ist blanke Theorie...
Merkwürdig: Ich habe gestern abend zufällig die Seite mal in einem älteren Browser von einem anderen PC aufgerufen und festgestellt, dass der Mainframe gar nicht erst geladen wurde! Ist das noch jemandem aufgefallen?! Wie ist denn dieses Phänomen zu erklären? Ich lade die Website ja auf exakt die gleiche Weise in das IFrame wie auch im Navigationsframe!
Grüße,
Mischa-
Hi Mischa,
Ich habe gestern abend zufällig die Seite mal in einem älteren Browser von einem anderen PC aufgerufen und festgestellt, dass der Mainframe gar nicht erst geladen wurde! Wie ist denn dieses Phänomen zu erklären?
Es gibt Browser, die können keine IFrames...
Viele Grüße
Mathias Bigge-
Hallo Mathias,
Ich habe gestern abend zufällig die Seite mal in einem älteren Browser von einem anderen PC aufgerufen und festgestellt, dass der Mainframe gar nicht erst geladen wurde! Wie ist denn dieses Phänomen zu erklären?
Es gibt Browser, die können keine IFrames...Das ist mir bewusst, aber
1. sind die meistens schon einige Generationen alt und
2. würde in diesen Browsern auch das Navigationsmenü nicht angezeigt, denn auch das wird in einem IFrame geladen! Und wie gesagt: Der Nav-Frame wird geladen, der Main-Frame aber nicht!Grüße,
Mischa
-
-
Hi,
<div style="position:absolute;top:50px;left:10%;right:10%;bottom:10%;
was mich ja mal interessieren würde: was meinst Du, wo der Browser dieses DIV positionieren sollte?
top:50px; left:10%; ?
top:50px; right:10%; ?
left:10%; bottom:10%; ?
oder doch die letztgültigen Werte right:10%; bottom:10%; ?freundliche Grüße
Ingo
-
-
-
-
-
-
Hallo Mischa!
Also ich verstehe dein Problem gar nicht. Die Seite, die du angegeben hast,
http://www.mischa-hildebrand.de/v2/index.php?cat=kontakt
kommt doch noch ohne DIV-Elemente aus, ist absolut CSS-valide und nahezu HTML-valide (von marginheight und -width einmal abgesehen).
Wenn ich die Tabelle horizontal zentrieren möchte, kann ich um die gesamte Tabelle ein div mit dem Attribut align="center" machen, was in jedem Browser funktioniert:
<div align="center">
[tabelle]
</div>Du kannst aber auch die Tabelle selbst zentrieren:
<table align="center">
Das ist in der HTML-Variante "transitional" doch valide. Dann brauchst du auch keine Weite von 100%. Übrigens in Opera 7 und Netscape 4 ist deine Seite derzeit nicht horizontal mittig ausgerichtet, das wäre sie dann aber wahrscheinlich.Möchte ich die Tabelle nun aber auch veritkal im body zentrieren, ergibt sich ein Problem: Einen valides HTML-Attribut gibt es nicht - ich muss also auf CSS zurückgreifen.
Wieso, eine Tabelle in einer Tabellenzelle mit valign="middle" oder style="vertical-align:middle", so wie du es hast, ist doch valide?
Der von dir beschriebene Scrollbalken taucht bei mir nur in Opera auf. Man kann dann einen Millimeter runterscrollen. Wenn du die übergeordnete Tabelle auf 99% Höhe setzt, den Unterschied zu 100% sieht bestimmt keiner, ist das Problem wahrscheinlich behoben.
Gruß Gernot
-
Hallo,
Hallo Mischa!
Also ich verstehe dein Problem gar nicht. Die Seite, die du angegeben hast,
http://www.mischa-hildebrand.de/v2/index.php?cat=kontakt
kommt doch noch ohne DIV-Elemente aus, ist absolut CSS-valide und nahezu HTML-valide (von marginheight und -width einmal abgesehen).
Ja, ist sie jetzt ja auch _noch_!
Dafür wird sie aber eben im Opere und Netscape nicht wirklich _vertikal_ zentriert und das soll sie!Wenn ich die Tabelle horizontal zentrieren möchte, kann ich um die gesamte Tabelle ein div mit dem Attribut align="center" machen, was in jedem Browser funktioniert:
<div align="center">
[tabelle]
</div>Du kannst aber auch die Tabelle selbst zentrieren:
<table align="center">
Das ist in der HTML-Variante "transitional" doch valide. Dann brauchst du auch keine Weite von 100%. Übrigens in Opera 7 und Netscape 4 ist deine Seite derzeit nicht horizontal mittig ausgerichtet, das wäre sie dann aber wahrscheinlich.Wäre einen Versuch wert, aber auch das gilt nur für die horizontale Zentrierung!
Möchte ich die Tabelle nun aber auch veritkal im body zentrieren, ergibt sich ein Problem: Einen valides HTML-Attribut gibt es nicht - ich muss also auf CSS zurückgreifen.
Wieso, eine Tabelle in einer Tabellenzelle mit valign="middle" oder style="vertical-align:middle", so wie du es hast, ist doch valide?
Ja, klappt nur leider nicht in jedem Browser - that's the problem!
Der von dir beschriebene Scrollbalken taucht bei mir nur in Opera auf. Man kann dann einen Millimeter runterscrollen. Wenn du die übergeordnete Tabelle auf 99% Höhe setzt, den Unterschied zu 100% sieht bestimmt keiner, ist das Problem wahrscheinlich behoben.
Klar - momentan wird der Scrollbar - wenn überhaupt - nur im Opere angeziegt, denn ich habe den Body momentan gar nicht auf width:100% bzw. height:100% gestellt! Wenn ich das aber tue, taucht das Problem sofort in _jedem_ Browser auf!
Danke trotzdem für deine Hilfe,
Mischa--
=========================
www.youth-page.de
www.mischa-hildebrand.de
-