2 x div fixed, 1x div vertikal zentriert
0 
Inita
0 0 0 0 0 0 Patrick Andrieu
2 x div fixed, 1x div vertikal zentriert
Hallo zusammen,
ich möchte nochmal kurz auf diesen Thread aufmerksam machen. Leider komme ich mit meinem Problem noch immer nicht wirklich weiter.
http://forum.de.selfhtml.org/archiv/2008/4/t170093/#m1111414
Vielen Dank für jede Hilfe
Frank
-
-
die loesung:
http://gut.lv/beispiel/stickself.htmlkeine lösung, nur ein workaround für ein vermeintliches problem
die wirkliche lösung:
versuche keine drucklayouts auf dem monitor umzusetzen oder "bewährte" tabellenlayouts nachzubauenich zb finds persönlich etwas uncool, wenn der footer immer unten klebt (pivot monitor - sieht echt scheisse aus ;))
-
Hallo Suit,
Eine feste Fußzeile ist auch nicht das was ich bevorzuge. Das liegt aber leider nicht auf meinem Tisch. Ich muss das ganze nur umsetzen.
Und die Aufgabe lautet:
Kopf und Fuß fixiert.
Content vertikal zentriert wenn kleiner als sichtbarer Bereich.
Content scrollbar wenn größer als sichtbarer Bereich.Im FF habe ich es ja schon hinbekommen http://forum.de.selfhtml.org/archiv/2008/4/t170093/#m1111590. Nur der IE zickt immer noch rum.
Viele Grüße
Frank-
Mahlzeit,
Content vertikal zentriert wenn kleiner als sichtbarer Bereich.
Content scrollbar wenn größer als sichtbarer Bereich.<haarspalt>Und wenn der Content genauso groß ist wie der sichtbare Bereich?</haarspalt> ;-)
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Danke für nichts. Wo ist Dein Problem bei der Aufgabenstellung? Wenn der Content nur aus zwei Zeilen besteht sollen die eben nicht oben am Kopf kleben, sondern vertikal zentriert werden. Wusste gar nicht das sich die Trolle die außer dummes Gelaber nichts wertvolles zustande bringen nun auch schon hier rum treiben. Schade um die Qualität des Forums.
Mahlzeit,
Content vertikal zentriert wenn kleiner als sichtbarer Bereich.
Content scrollbar wenn größer als sichtbarer Bereich.<haarspalt>Und wenn der Content genauso groß ist wie der sichtbare Bereich?</haarspalt> ;-)
MfG,
EKKi
-
-
-
-
Hallo Inita,
vielen Dank für den Link. Nur hilft mir das nicht wirklich weiter. Der Kopf und der Fuß sind nicht fixiert, und der Contentbereich lässt sich weder scrollen noch ist er zentriert.
Viele Grüße
FrankHoi,
die loesung:
http://gut.lv/beispiel/stickself.html
LG,
Inita-
vielen Dank für den Link. Nur hilft mir das nicht wirklich weiter. Der Kopf und der Fuß sind nicht fixiert, und der Contentbereich lässt sich weder scrollen noch ist er zentriert.
ich vermute, da kann dir jetzt niemand folgen - wenn du dein "problem" genauer beschreibst, wirds vielleicht etwas ;)
"fixiert" - die dinger kleben unabhängig vom viewport oben und unten und alle elemente sind horizontal zentriert
scrollen kann man den content nicht - aber was hindert dich daran, ihm ein overflow: auto zu verpassen oder es zumindest zu versuchen?
-
ich vermute, da kann dir jetzt niemand folgen - wenn du dein "problem" genauer beschreibst, wirds vielleicht etwas ;)
die Aufgabe lautet:
Kopf und Fuß fixiert, also immer bündig am oberen bzw. unteren Rand des BrowserfernstersBesteht der Content z.B. nur aus zwei Zeilen soll dieser Bereich vertikal zentriert werden. Also in der Mitte zwischen Kopf- und Fußzeile erscheinen.
Ist der Content größer als der sichtbare Bereich, soll der Content natürlich scrollbar sein (aber nur der Content, Kopf- und Fusszeile sollen ja oben und unten fixiert sein)
scrollen kann man den content nicht - aber was hindert dich daran, ihm ein overflow: auto zu verpassen oder es zumindest zu versuchen?
Daran hindert mich nichts. Es funktioniert nur nicht. Deswegen wende ich mich ja hier ans Forum und hoffe auf Hilfe. Hier nochmal mein Code den ich bisher habe und der im FF einwandfrei funktioniert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2 x fixed, 1 x middle</title> <style type="text/css"> <!-- body, html { height:100%; } body { margin:0; padding:0; } body, td, th { font-family: Arial, Helvetica, sans-serif; } #wrapper { display: table; height: 100%; #position: relative; overflow: hidden; background-color:#0066FF; width: 900px; z-index: 50; } #container { #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; } #inner { #position: relative; #top: -50%; background-color:#6699FF; width: 900px; margin: 100px 0 50px 0px; } #header { position: fixed; width: 900px; top: 0px; height: 100px; background-color: #00CC99; z-index: 100; } #footer { position: fixed; width: 900px; bottom: 0px; height: 50px; background-color: #33CC99; z-index: 100; } --> </style> </head> <body> <div id="header">header</div> <div id="wrapper"> <div id="container"> <div id="inner"> start<br /> hier gaaaaaanz viiiieeeeel Text einfügen<br /> hier gaaaaaanz viiiieeeeel Text einfügen<br /> hier gaaaaaanz viiiieeeeel Text einfügen<br /> Ende </div> </div> </div> <div id="footer">footer</div> </body> </html>Kopf und Fusszeile sind fixiert, der Content in der Mitte vertikal zentriert (auch im IE). Ist der Content aber länger als der zur Verfügung stehende Bereich soll der Contentbereich natürlich scrollbar sein. Und da gehen meine Probleme mit dem IE los. Dort ist der Inhalt nicht scrollbar sondern steht fest. Daher folgende Anpassung für den IE:
<!--[if lte IE 7]> <style type="text/css"> html, body { height: 100%; overflow-y: hidden; } #container { height: 100%; width: 100%; overflow: auto; top:0px; margin:100px 0px 50px 0px; } #inner { position: static; margin: 0px 0px 0px 0px; } </style> <![endif]-->Jetzt ist der Content zwar scrollbar, ist aber nicht mehr zentriert wenn weniger drin steht. Dazu kommt noch das der Contentbereich unten unter der Fusszeile verschwindet.
Ich hoffe ich konnte Dir das Problem jetzt nochchmal etwas näher bringen.
-
ich vermute, da kann dir jetzt niemand folgen - wenn du dein "problem" genauer beschreibst, wirds vielleicht etwas ;)
die Aufgabe lautet:
Kopf und Fuß fixiert, also immer bündig am oberen bzw. unteren Rand des BrowserfernstersBesteht der Content z.B. nur aus zwei Zeilen soll dieser Bereich vertikal zentriert werden. Also in der Mitte zwischen Kopf- und Fußzeile erscheinen.
Ist der Content größer als der sichtbare Bereich, soll der Content natürlich scrollbar sein (aber nur der Content, Kopf- und Fusszeile sollen ja oben und unten fixiert sein)
sind die irre? - wer hat sich das ausgedacht? jemand der vorher postkarten gemalt hat?
ohne dir nahetreten zu wollen: aber da ist bei der beratung gewaltig was schief gelaufen
Ich hoffe ich konnte Dir das Problem jetzt nochchmal etwas näher bringen.
ja, das problem kann ich jetzt nachvollziehen - wie schon gesagt: irrsinn, so ein "design" umsetzen zu wollen
da hilft dir im endeffekt nur ein tabellenlayout (sehr einfach) oder viel javascript (zeitaufwändig aber grade noch vertretbar oder css mit fürchterlich vielen hacks (die ich mir jetzt garnicht vorstellen will)
-
Hallo Frank!
#position: relative;
#position: absolute;
#top: 50%;
#position: relative;
#top: -50%;Was sollen die http://de.selfhtml.org/css/formate/einbinden.htm#kommentare@title=Raute-Zeichen bewirken? Nur der Richtigkeit halber angemerkt, trägt nicht zur Lösung bei.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?-
Ave Patrick!
#position: relative;
#position: absolute;
#top: 50%;
#position: relative;
#top: -50%;
Was sollen die http://de.selfhtml.org/css/formate/einbinden.htm#kommentare@title=Raute-Zeichen bewirken? Nur der Richtigkeit halber angemerkt, trägt nicht zur Lösung bei.Wieder mal IE Bugs. :)
Statt * Star html kann man auch Raute verwenden, _unterstrich geht übrigens auch, also ohne zusätzliche Hack Methoden, direkt im CSS Block, über Sinn und Unsinn lässt sich bekannter massen streiten. :)Das gute daran ist, das man erstmal damit testen kann, bevor man dann einen richtigen IE Hack anwendet.
Grüße aus H im R an Patrick,
Primus Enginus*-
Ave Imperator CSSus!
Wieder mal IE Bugs. :)
Statt * Star html kann man auch Raute verwenden, _unterstrich geht übrigens auch, also ohne zusätzliche Hack Methoden, direkt im CSS Block, über Sinn und Unsinn lässt sich bekannter massen streiten. :)Eben... wenn Frank CC einsetzt, warum dann der Raute-Hack (denn ich übrigens nicht kenne, wo haste denn her?)...
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?-
Ave Patrick!
Eben... wenn Frank CC einsetzt, warum dann der Raute-Hack (denn ich übrigens nicht kenne, wo haste denn her?)...
Frank hat ein Copy&Paste beispiel, hier ist das Raute beispiel im Einsatz.
Und auf wellstyled.com habe ich den underscore Hack entdeckt.
Wie zuverlässlich diese Hacks sind kann ich aber nicht beurteilen, aber wie gesagt, mal kurz zum antesten beim Stylen Ideal.
Grüße aus H im R an Patrick,
Primus Enginus*-
Hallo Engin!
hier ist das Raute beispiel im Einsatz.
Und auf wellstyled.com habe ich den underscore Hack entdeckt.Ach, jetzt wo Du's sagst... gelesen hatte ich das schon mal, aber mein kleines Hirn hat die Angewohnheit, das, was er nicht braucht, in die unterste Schublade ganz hinten zu verstecken. Hab's wohl zugunsten der Star-Hacks vergessen ;)
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
-
-
-
-
-
-
-
-
