nicht angemeldet
Content im Webbrowser zentriert darstellen
Hallo,
vermutlich ist es nur eine Kleinigkeit, aber ich kommen nicht drauf :-(
Ich habe eine dreigeteilte Seite bestehend aus Header, Content und Footer/Nav, diese soll immer zentriert im Web-Browser stehen was für Header und Footer/Nav auch funtioniert.
Der Content wird aber entweder zentriert über das gesamte Browserfenster dargestellt (Test 1) oder aber am linken Rand zentriert (Test 2) oder linksbündig (Test 3).
Beispiel siehe: http://www.godawa.de/test_css/test1.htm
Auszug aus der CSS:
body {
top:0; left:0; right:0;
min-height:100%; width:100%;
margin:0; border:0; padding:0;
position:absolute; background:#BBBEC3;
font: normal 100.01% Helvetica, Arial, sans-serif;
}
html {
top:0; left:0; right:0;
min-height:100%; width:100%;
margin:0; padding:0;
}
#header_container {
position:fixed;
top:0; left:0; right:0;
height:99px;
margin:0;
text-align:center;
z-index:2;
}
#header {
position:absolute;
top:0; left:0; right:0; bottom:0;
height:100%; width: 100%;
margin:0; padding:0;
background:#BBBEC3;
z-index:3;
}
#content_container {
position:fixed;
top:99px; left:0; right:0;
height:393px; width: 790px;
height:393px; width: 100%;
margin:0;
z-index:2;
}
#content_test1 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
height:100%; width: 100%;
text-align:center;
background:#BBBEC3;
z-index:3;
}
#content_test2 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 790px; height:393px;
text-align:center;
background:#BBBEC3;
z-index:3;
}
#content_test3 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 790px; height:393px;
background:#BBBEC3;
z-index:3;
}
Was mache ich falsch?
Web-Browser ist der FF 1.0.3 bzw. Moz. 1.7.7 unter OS/2 bzw. NT4!
Vielen Dank für Eure Hilfe,
Thorolf
-
Hallo Thorolf,
#content_container {
position:fixed;
top:99px; left:0; right:0;
height:393px; width: 790px;
height:393px; width: 100%;
margin:0;
z-index:2;
}du hast doppelte Höhen und Breitenangaben.
Gruß von Aybee
-
Hi Aybee,
du hast doppelte Höhen und Breitenangaben.
das mag zwar unschön oder verwirrend sein, aber wo ist das Problem?
Viele Grüße
Benjamin -
Hallo Aybee,
du hast doppelte Höhen und Breitenangaben.
ich weis, macht aber nichts, da lt. Doku die vorherigen Angaben überschrieben werden. Im übrigen ist es nur für die Testphase drin!
Tschüß,
Thorolf
-
-
Hi,
vermutlich ist es nur eine Kleinigkeit, aber ich kommen nicht drauf :-(
Nein, das ganze Konzept ist mangelhaft.
body {
right:0;
min-height:100%;der IE ignoriert diese Angaben.
html {
top:0; left:0; right:0;wozu das?
position:fixed;
Der IE kennt dies auch nicht.
#content_container {
position:fixed;
top:99px; left:0; right:0;
height:393px; width: 790px;
height:393px; width: 100%;
}Hier erzeugst Du ein DIV über die gesamte Fensterbreite. In zu niedrigen Fenstern wird der Inhalt unten unerreichbar abgeschnitten.
#content_test1 {
position:absolute;
overflow:auto;Hier erzeugst Du einen Scrollbalken für den sichtbaren Teil, wobei im Firefox das Scrollrad nicht funktioniert.
#content_test2 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 790px; height:393px;Hier beschränkst Du die Breite und richtest das DIV linksbündig aus...
text-align:center;
..und zentrierst den Inhalt.
#content_test3 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 790px; height:393px;dito.
Was mache ich falsch?
Vor allem der Footer mit der Navigation verschwindet in etwas kleineren Fenstern als erstes im Nirwana.
Der gängige Weg wäre, die Seite in einen Container zu setzen und diesen zu zentrieren.freundliche Grüße
Ingo-
Hallo Ingo,
erstmal vielen Dank für Deine Antwort!
Nein, das ganze Konzept ist mangelhaft.
Naja, ist im Wesentlichen aus den Beispielen von SELFHTML zusammen gestellt und sollte so schlecht eigentlich nicht sein - ich lasse mich aber gerne eines besseren belehren!
der IE ignoriert diese Angaben.
Zum Einen interessiert mich der IE erstmal nicht weil es für mich primär darum geht von meinem bisherigen "table-Desin" wegzukommen und zum Anderen habe ich ja nur einen Auszug der CSS gepostet, weiter unten kommen dann noch die Ausnahmen für den IE. Die sind allerdings nur von der SELFHTML-Seite übernommen und mangels IE auch noch nicht getestet!
#content_container {
position:fixed;
top:99px; left:0; right:0;
height:393px; width: 790px;
height:393px; width: 100%;
}
Hier erzeugst Du ein DIV über die gesamte Fensterbreite.richtig, was ich eigentlich nicht will, setzte ich für width allerdings 790px ein und zentriere ich das dann, bleibt der Content am linken Rand kleben :-(
»»In zu niedrigen Fenstern wird der Inhalt unten unerreichbar abgeschnitten.
Das ist sicher nicht wirklich gut, aber in meinem Fall kann man möglicherweise eine Beschränkung auf mind. 800x600 in Kauf nehmen. Zur Not kommt halt noch optional ein Scrollbalken auf die Seite!#content_test1 {
position:absolute;
overflow:auto;
Hier erzeugst Du einen Scrollbalken für den sichtbaren Teil, wobei im Firefox das Scrollrad nicht funktioniert.Richtig, mit "auto" aber nur dann wenn er benötigt wird. Das das Scrollrad im FF nicht funktioniert ist aber auch erstmal zweitrangig (was wäre dafür den die Lösung?).
#content_test2 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 790px; height:393px;
Hier beschränkst Du die Breite und richtest das DIV linksbündig aus...Ich WILL ja die Breite beschränken, aber wo richte ich das DIV linksbündig aus, ist das der Default?
text-align:center;
..und zentrierst den Inhalt.Aha, eigentlich nicht was ich wollte.
#content_test3 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 790px; height:393px;
dito.Ohne jedoch den Inhalt zu zentrieren. Aber wie zentrieren ich das DIV im Browser?
Der gängige Weg wäre, die Seite in einen Container zu setzen und diesen zu zentrieren.
Also mit Header, Content und Footer? Denn den Content setze ich ja in einen eigenen, einheitlichen Container, der auf 790px x 393px beschränkt sein soll, den müsste ich jetzt nur noch zentriert bekommen!
Vielen Dank nochmal,
Tschüß,
Thorolf
-
Hi,
Naja, ist im Wesentlichen aus den Beispielen von SELFHTML zusammen gestellt
ich kenne hier kein Beispiel, das diese CSS-Eigenschaften so unpassend kombiniert.
weil es für mich primär darum geht von meinem bisherigen "table-Desin" wegzukommen
Du hast Dir das neue Kapitel über CSS-basierte Layouts gründlich durchgelesen?
height:393px; width: 100%;
}
Hier erzeugst Du ein DIV über die gesamte Fensterbreite.
richtig, was ich eigentlich nicht will, setzte ich für width allerdings 790px einnein, 100%.
und zentriere ich das dann,
nein; abgesehen davon, daß es bei 100% nichts zu zentrieren gibt: womit denkst Du tust Du das?
In zu niedrigen Fenstern wird der Inhalt unten unerreichbar abgeschnitten.
Das ist sicher nicht wirklich gut, aber in meinem Fall kann man möglicherweise eine Beschränkung auf mind. 800x600 in Kauf nehmen.Nein, bei einen solchen Fenster wird bereits ein Teil des Inhaltsbereichs und die komplette Navigation abgeschnitten.
Zur Not kommt halt noch optional ein Scrollbalken auf die Seite!
Das wird Dir bei dieser Konstruktion nicht gelingen.
Richtig, mit "auto" aber nur dann wenn er benötigt wird. Das das Scrollrad im FF nicht funktioniert ist aber auch erstmal zweitrangig (was wäre dafür den die Lösung?).
Auf seiteninterne Scrollbalken verzichten!
Ich WILL ja die Breite beschränken, aber wo richte ich das DIV linksbündig aus, ist das der Default?
Ja.
Aber wie zentrieren ich das DIV im Browser?
Schau Dir die Beispiele im o.g. Selfhtml-Kapitel an.
freundliche Grüße
Ingo-
Hallo Ingo,
nochmal Danke für die prompte Antwort!
Naja, ist im Wesentlichen aus den Beispielen von SELFHTML zusammen gestellt
ich kenne hier kein Beispiel, das diese CSS-Eigenschaften so unpassend kombiniert.http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm
weil es für mich primär darum geht von meinem bisherigen "table-Desin" wegzukommen
Du hast Dir das neue Kapitel über CSS-basierte Layouts gründlich durchgelesen?Sicher noch nicht alles und auch nicht alles sehr gründlich, aber ich arbeite daran :-)
und zentriere ich das dann,
nein; abgesehen davon, daß es bei 100% nichts zu zentrieren gibt: womit denkst Du tust Du das?Darum sollte ja auch kein 100%, sondern 790px da stehen und mit "text-align: center;" sollte es zentriert werden , was zwar nicht ganz richtig war, für Header und Footer aber funktionierte!
Das ist sicher nicht wirklich gut, aber in meinem Fall kann man möglicherweise eine Beschränkung auf mind. 800x600 in Kauf nehmen.
Nein, bei einen solchen Fenster wird bereits ein Teil des Inhaltsbereichs und die komplette Navigation abgeschnitten.
Zur Not kommt halt noch optional ein Scrollbalken auf die Seite!
Das wird Dir bei dieser Konstruktion nicht gelingen.Also ein DIV um die ganze Seite (inkl. Header und Footer) mit Angabe der Seitengröße in px und "margin: 0 auto;" (habe ich schon probiert und der Scrollbalken kommt auch bei zu kleinem Fenster, aber er scrollt nichts :-( )?
Das das Scrollrad im FF nicht funktioniert ist aber auch erstmal zweitrangig (was wäre dafür den die Lösung?).
Auf seiteninterne Scrollbalken verzichten!Naja, eine Lösung ist das ja wohl eher nicht. Bei den angegebenen Beispielen mag das noch akzeptabel sein, in der Kontaktseite soll aber nur ein sehr kleiner Textbereich innerhalb des Content-DIV benutzt werden und dann muss da schon gescrollt werden!
Aber wie zentrieren ich das DIV im Browser?
Schau Dir die Beispiele im o.g. Selfhtml-Kapitel an.Ich habe lange erfolglos nach passenden Beispielen gesucht (sonst hätte ich nicht im Forum nachgefragt), dank neuer Suchbegriffe bin ich aber heute fündig geworden: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig_breite
Die Lösung ist im Wesentlichen:
body {
color:black; background-color:#BBBEC3;
font: normal 100.01% Helvetica, Arial, sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}...
#header_container {
position:fixed;
top:0; left:0; right:0;
width: 790px; height:99px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
z-index:2;
}#header {
position:absolute;
top:0; left:0; right:0;
width: 100%; height:100%;
margin:0; padding:0;
background:#BBBEC3;
z-index:3;
}#content_container {
position:fixed;
top:99px; left:0; right:0;
width: 790px; height:393px;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
z-index:2;
}#content_test1 {
position:absolute;
overflow:auto;
top:0; left:0; right:0; bottom:0;
width: 100%; height:100%;
background:#BBBEC3;
z-index:3;
}
...
..Jetzt brauchts noch eine Lösung für die Scrollbalken und die Ausnahmen für den IE und dann sollte das schon klappen :-)
Vielen Dank,
Thorolf
-
Hi,
Naja, ist im Wesentlichen aus den Beispielen von SELFHTML zusammen gestellt
ich kenne hier kein Beispiel, das diese CSS-Eigenschaften so unpassend kombiniert.
http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htmhier solltest Du am ehsten das letzte Beispiel 6 nehmen. Dieses hat nur einen klitzekleinen Schönheitsfehler im IE - und ist darüber hinaus leider bereits für normale 800*600er Fenster wegen der darin abgeschnittenen Navigation ungeeignet. Es spricht allerdings nicht wirklich etwas gegen dieses Beispiel, wenn die Navigation deutlich gekürzt wird.
Darum sollte ja auch kein 100%, sondern 790px da stehen und mit "text-align: center;" sollte es zentriert werden , was zwar nicht ganz richtig war, für Header und Footer aber funktionierte!
Die 790px hattest Du in der einen Version mit 100% überschrieben. Und mit text-align zentriert nur der IE fälschlich auch Block-Elemente.
Also ein DIV um die ganze Seite (inkl. Header und Footer) mit Angabe der Seitengröße in px und "margin: 0 auto;" (habe ich schon probiert und der Scrollbalken kommt auch bei zu kleinem Fenster, aber er scrollt nichts :-( )?
Du hast dabei nicht zufällig etwas anderes als position:static angegeben?
Auf seiteninterne Scrollbalken verzichten!
Naja, eine Lösung ist das ja wohl eher nicht.Bei der überwiegenen Mehrzahl der professionellen Seiten durchaus.
Ich habe lange erfolglos nach passenden Beispielen gesucht (sonst hätte ich nicht im Forum nachgefragt), dank neuer Suchbegriffe bin ich aber heute fündig geworden: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#zweispaltig_breite
nicht eher http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm, wobei Du unbedingt auch die nächste Seite [http://de.selfhtml.org/css/layouts/fixbereiche.htm] lesen solltest.
#header_container {
position:fixed;
top:0; left:0; right:0;Was bezweckst Du bloß mit der fixierten Positionierung und reight:0?
freundliche Grüße
Ingo-
Hallo Ingo,
hier solltest Du am ehsten das letzte Beispiel 6 nehmen. Dieses hat nur einen klitzekleinen Schönheitsfehler im IE - und ist darüber hinaus leider bereits für normale 800*600er Fenster wegen der darin abgeschnittenen Navigation ungeeignet. Es spricht allerdings nicht wirklich etwas gegen dieses Beispiel, wenn die Navigation deutlich gekürzt wird.
Was ich ja im wesentlichen gemacht habe, nur sollte die Nav nicht links sondern unten stehen und eben alles mittig!
Die 790px hattest Du in der einen Version mit 100% überschrieben.
Klar, war ja nur zum Testen - mit den 790px erschien der Inhalt dann zwar in der richtigen Breite, aber eben linksbündig!
Und mit text-align zentriert nur der IE fälschlich auch Block-Elemente.
Und beim FF ging das auch mit den Grafiken für Header und Footer.
Du hast dabei nicht zufällig etwas anderes als position:static angegeben?
Doch bis eben: "position:absolute", aber mit "static" geht es auch nicht:
#body_container {
position:static;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
top:0; left:0; right:0;
width: 790px; height:563px;
background:#BBBEC3;
z-index:1;
}nicht eher http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm, wobei Du unbedingt auch die nächste Seite [http://de.selfhtml.org/css/layouts/fixbereiche.htm] lesen solltest.
Die werde ich mir nochmal genauer ansehen, bisher habe ich die Grafiken nicht als Hintergrund drin sondern als normales img, aber im Prinzip spricht nichts dagegen das zu ändern!
#header_container {
position:fixed;
top:0; left:0; right:0;
Was bezweckst Du bloß mit der fixierten Positionierung und reight:0?Der Header soll fest an Position 0,0 erscheinen, das right:0 habe ich aus Beispielen übernommen (wobei die Angabe eigentlich überflüssig sein sollte) aber wenn man es löscht funktioniert "margin: 0 auto;" nicht mehr, d.h. die Seite wird wieder linksbündig ausgegeben :-(
Ich habe übrigens die Testseite unter: http://www.godawa.de/test_css/test1.htm aktualisiert, wobei Test 3 das Problem mit den "nichts tuenden" Scrollbalken demonstriert wenn man das Fenster klein macht!
Vielen Dank nochmal,
Thorolf
-
Hi,
Und mit text-align zentriert nur der IE fälschlich auch Block-Elemente.
Und beim FF ging das auch mit den Grafiken für Header und Footer.Grafiken sind inline-Elemente.
Was bezweckst Du bloß mit der fixierten Positionierung und reight:0?
Der Header soll fest an Position 0,0 erscheinen, das right:0 habe ich aus Beispielen übernommen (wobei die Angabe eigentlich überflüssig sein sollte) aber wenn man es löscht funktioniert "margin: 0 auto;" nicht mehr, d.h. die Seite wird wieder linksbündig ausgegeben :-(Weil die positionierte Box über right:0 auf 100% Breite aufgezogen wird - nicht jedoch im IE.
Eine nicht-positionierte Box (position:static) nimmt diese Breite automatisch ein.Ich habe übrigens die Testseite unter: http://www.godawa.de/test_css/test1.htm aktualisiert, wobei Test 3 das Problem mit den "nichts tuenden" Scrollbalken demonstriert wenn man das Fenster klein macht!
Da tut sich schon etwas. Die 563px hohe Box #body_container wird gescrollt. Nur ist kein Effekt sichtbar, da Du alle enthaltenen Boxen positioniert hast. ;-)
freundliche Grüße
Ingo-
Hallo Ingo,
wobei Test 3 das Problem mit den "nichts tuenden" Scrollbalken demonstriert wenn man das Fenster klein macht!
Da tut sich schon etwas. Die 563px hohe Box #body_container wird gescrollt. Nur ist kein Effekt sichtbar, da Du alle enthaltenen Boxen positioniert hast. ;-)Ist ja eigentlich auch logisch, d.h. ich müßte relativ zur linken oberen Ecke des "Haupt-DIVs" positionieren, das müsste dann ja mit "position:absolute" gehen!
Es sieht so aus als ob ich jetzt soweit alles hinbekommen habe: http://www.godawa.de/test_css/test21.htm .
Jetzt fehlen nur noch die IE-Korrekturen und dann kann ich auch meine anderen Seiten auf CSS umstellen sobald ich Zeit finde.Nochmal vielen Dank für die tolle Hilfe,
Tschüß,
Thorolf
-
Hi,
Ist ja eigentlich auch logisch, d.h. ich müßte relativ zur linken oberen Ecke des "Haupt-DIVs" positionieren, das müsste dann ja mit "position:absolute" gehen!
Mein Tip: vergiß zunächst einmal absolute oder fixierte Positionierung. Vergiß die Eigenschaft position überhaupt. Positionierte Elemente sind aus dem Elementenfluß genommen und können dadurch wirklich viele Probleme erzeugen. Sie sollten nur dort eingesetzt werden, wo es anders nicht geht - und das dann auch mit Bedacht und viel Sachkenntnis. Sieh' das mal analog zu Frames. Viele Anfänger meinen, hierin eine super einfache Möglichkeit zur Positionierung von Elementen gefunden zu haben. Die dadurch verursachten Probleme füllen dann z.B. unser Archiv ganz schön aus.
Es sieht so aus als ob ich jetzt soweit alles hinbekommen habe: http://www.godawa.de/test_css/test21.htm .
Nunja, wenn Du damit zufrieden bist...
Mich stört das nicht funktionierene Scrollrad und in einem 800er Fenster muß man erst mal drauf kommen, daß rechts noch ein zweiter Scrollbalken ist. Oder vergrößere die Schrift mal um zwei Stufen.freundliche Grüße
Ingo
-
-
-
-
-
-
-
-