Autor Beitrag
Aya
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1964
Erhaltene Danke: 15

MacOSX 10.6.7
Xcode / C++
BeitragVerfasst: So 08.08.10 14:53 
Hi,

ich bastel z.Z. an einer neuen Webseite in der ich oben und unten einen Header, bzw Footer habe welcher immer fest an dieser stelle bleiben soll und der bereich dazwischen horinzontal scrollt.

Das klappt soweit wunderbar (Zumindest im Safari und Firefox, andere Browser habe ich nicht zum testen):
www.aya-chan.de/civil/japan2009

Nur, auf dem iPhone und iPad klappt es nicht.. hier hat das CSS Attribut "position: fixed;" keine wirkung.

Hat da jemand eine Idee wie ich das lösen könnte?

Danke,
Aya

_________________
Aya
I aim for my endless dreams and I know they will come true!
Dude566
ontopic starontopic starontopic starontopic starhalf ontopic starofftopic starofftopic starofftopic star
Beiträge: 1592
Erhaltene Danke: 79

W8, W7 (Chrome, FF, IE)
Delphi XE2 Pro, Eclipse Juno, VS2012
BeitragVerfasst: So 08.08.10 15:05 
Also ich betrachte mir die Seite gerade mit dem IPhone4 und es sieht so aus als wäre der Footer zwischen das 1. und 2. Bild gerutscht.

_________________
Es gibt 10 Gruppen von Menschen: diejenigen, die das Binärsystem verstehen, und die anderen.
Aya Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1964
Erhaltene Danke: 15

MacOSX 10.6.7
Xcode / C++
BeitragVerfasst: So 08.08.10 15:07 
user profile iconDude566 hat folgendes geschrieben Zum zitierten Posting springen:
Also ich betrachte mir die Seite gerade mit dem IPhone4 und es sieht so aus als wäre der Footer zwischen das 1. und 2. Bild gerutscht.


Jep das ist noch ein zusätzliches Problem wenn man das iPhone im LandscapeMode hält und die seite anschaut.. :(

_________________
Aya
I aim for my endless dreams and I know they will come true!
BenBE
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 8721
Erhaltene Danke: 191

Win95, Win98SE, Win2K, WinXP
D1S, D3S, D4S, D5E, D6E, D7E, D9PE, D10E, D12P, DXEP, L0.9\FPC2.0
BeitragVerfasst: So 08.08.10 15:14 
Was Du machen kannst, ist das Position-Attribut zweimal anzugeben: Einmal mit position:absolute; und dann noch mal gefolgt von position:fixed; für Browser, die das können. Deest dann über Browser-Weichen klären. Ggf. die unterschiedlichen CSS-Versionen via Server unterscheiden. Wer dann seine Browser-Kennung unbedingt umstellen muss, hat halt Pech.

_________________
Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.
Aya Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1964
Erhaltene Danke: 15

MacOSX 10.6.7
Xcode / C++
BeitragVerfasst: So 08.08.10 15:19 
user profile iconBenBE hat folgendes geschrieben Zum zitierten Posting springen:
Was Du machen kannst, ist das Position-Attribut zweimal anzugeben: Einmal mit position:absolute; und dann noch mal gefolgt von position:fixed; für Browser, die das können. Deest dann über Browser-Weichen klären. Ggf. die unterschiedlichen CSS-Versionen via Server unterscheiden. Wer dann seine Browser-Kennung unbedingt umstellen muss, hat halt Pech.

Das problem ist glaube ich da, dass das iPhone das "fixed" schon 'korrekt' interpretiert, nur eben die darstellung anders funktioniert.

Das iPhone rendert die komplette Webseite als hätte sie keine Scrollbalken und zeigt immer nur einen gewissen ausschnitt davon an. Dadurch wirkt es dann so als würde das 'fixed' ignoriert werden, wird es aber nicht wirklich.

Allerdings gibt es ja diverse Webseiten die oben und unten einen Header/Footer haben der auf dem iPhone auch statisch ist, allerdings hab ich das bisher immer nur mit vertikalem scrolling gesehen, und zusätzlich konnten diese Webseiten - glaube ich - nicht gezoomt werden :(

_________________
Aya
I aim for my endless dreams and I know they will come true!
Martok
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 3661
Erhaltene Danke: 604

Win 8.1, Win 10 x64
Pascal: Lazarus Snapshot, Delphi 7,2007; PHP, JS: WebStorm
BeitragVerfasst: So 08.08.10 15:42 
Eventuell könnte es was bringen, wenn du dem HTML und/oder BODY-Element eine feste Höhe gibst.

Wie man das dann bei Desktopbrowsern wieder hingedreht bekommt ist die andere Frage ;)

_________________
"The phoenix's price isn't inevitable. It's not part of some deep balance built into the universe. It's just the parts of the game where you haven't figured out yet how to cheat."
BenBE
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 8721
Erhaltene Danke: 191

Win95, Win98SE, Win2K, WinXP
D1S, D3S, D4S, D5E, D6E, D7E, D9PE, D10E, D12P, DXEP, L0.9\FPC2.0
BeitragVerfasst: So 08.08.10 15:57 
@Martok: Ich sag ja: Serverseitig je nach Browser n andres Stylesheet ausliefern. Ist zwar Messy, aber durchaus mberer als irgendwelche Browser-Weichen. Zumal man dann sogar immer valides CSS ausliefern kann.

_________________
Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.
Aya Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1964
Erhaltene Danke: 15

MacOSX 10.6.7
Xcode / C++
BeitragVerfasst: So 08.08.10 16:00 
Gegen verschiedene Stylesheets für verschiedene Platformen/Browser hab ich prinzipiell nichts, allerdings hapert es ja schon daran das ich nicht weiß wie ich das korrekte verhalten via CSS hinbekommen kann auf dem iPhone :(

_________________
Aya
I aim for my endless dreams and I know they will come true!
Aya Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 1964
Erhaltene Danke: 15

MacOSX 10.6.7
Xcode / C++
BeitragVerfasst: So 08.08.10 18:13 
Ich hab es hinbekommen. Nicht ganz so schön wie ich es gern hätte, aber so geht es aufjedenfall erstmal.


Man kann festlegen welche Größe der Viewport haben soll, damit ist sichergestellt das Header und Footer immer weit genug ausseinander sind.

ausblenden XML-Daten
1:
<meta name="viewport" content="width=xxx;" />					


Den Header und Footer hab ich dann einfach als Background-Image für <body> festgelegt, so das es dort wo der eigentliche Header aufhört einfach weiter gestreckt wird.

Falls noch wer eine andere Idee hat, wie ich das Menü immer wirklich 'fixed' halten kann, immer her damit! :)

Aya~

_________________
Aya
I aim for my endless dreams and I know they will come true!