[Responsive] Portrait mode; position absolute & padding

[Ronnyrr]

Tweakers,

Met een aantal websites die ik momenteel aan het maken ben loop ik beide tegen dezelfde problemen aan.
De website moet namelijk ook op tablets en mobiele devices goed werken.

In Landscape mode is hier geen enkel probleem mee.
Echter wanneer ik naar Portrait modus switch is de hele website messed up.

Alle absolute gepositioneerde elementen staan op een volledig andere plek, meerdere paddings ten opzichte van de body lijken te zijn verdwenen en elementen met width:100%; bereiken maar circa 70% van de schermbreedte.

Nou kan ik voor elk element dat verkeerd staat alles gaan fixen met Media Queries, maar dit is behoorlijk veel dubbel werk wat eigenlijk zonde is van mijn tijd.

Ik had verwacht, omdat ik hier bij meerdere websites last van heb, dat het wel een bekend probleem zou zijn. Maar na wat Google werk kwam ik alleen dit resultaat tegen wat mij bijster weinig verder kon helpen.

Ik vroeg mij af of er meerdere tweakers zijn die tegen dit probleem zijn aangelopen en welke oplossingen zij hiervoor hebben kunnen vinden?

Ben benieuwd, dit levert mij namelijk nogal wat frustratie op..

[Boelie-Boelie]

Zonder helder voorbeeld of case kan niemand goed antwoord geven op jouw probleem. Dus dan wordt het gokken.

Ik gok dat je elementen voornamelijk positioneert m.b.v. absolute positionering. De oplossing is om die techniek simpelweg slechts sporadisch te gebruiken (alleen wanneer nodig en da's vrij zelden het geval). Da's denk ik dan ook een belangrijke reden dat de meesten daar niet tegenaan lopen, want meestal gebruikt men bijv. floats.
http://www.w3.org/community/webed/wiki/Floats_and_clearing
Of wat interactiever: http://www.codecademy.com/courses/web-beginner-en-6merh (gratis online CSS-cursus)

Verder heb je het over meerdere paddings t.o.v. de body. Ik gok dat je elementen 'zomaar' in de body hebt geplaatst, terwijl men meestal de elementen plaatst in een soort container-element. Wil je dan bijv. de ruimte tot de kanten van je browserscherm regelen of je site centreren, dan hoef je alleen een simpele wijziging te doen aan de container, niet aan een hele lading losse elementen. Voorbeeld: als je de source van dit forum bekijkt, zie je dat in principe alles staat in een container-element genaamd 'layout'.

Kortom, zet je elementen eerst in een container-element en begrijp dat absoluut positioneren betekent dat je een element vastzet op een specifieke plek, terwijl die locatie wellicht niet handig is als je de schermoriëntatie verandert.

[Ronnyrr]

Bedankt voor je reactie, maar het is niet een antwoord waar ik veel aan heb helaas.
Ik gebruik de absolute positionering alleen wanneer het nodig is. Denk aan een afbeelding plaatsen en daar een button overheen zetten waarmee ik de button absolute plaats ten opzichte van de relatief gepositioneerde container om de afbeelding heen.

Ook het menu heb ik absoluut geplaatst omdat die half over een element heen valt.
Alle elementen heb ik ook wel degelijk in een wrapper staan, dit kan het probleem ook niet veroorzaken.

Een voorbeeld van mij probleem, zoals ik zei de navigatie.
Deze heb ik absoluut gepositioneerd en zo in het midden geplaatst:

Cascading Stylesheet:

.nav { 
  position:absolute;
  left:50%;
  margin-left:- de helft van de breedte van het element
}

Als ik dan in landscape mode zit op een tablet gaat dit goed.
Zodra ik dan naar portrait mode draai staat het menu ineens op -200px links uit de view.

Ook de mijn hele container element staat in een keer tegen de zijkant van mijn view aangeplakt..

[Bosmonster]

Ik gok dat je elementen voornamelijk positioneert m.b.v. absolute positionering. De oplossing is om die techniek simpelweg slechts sporadisch te gebruiken (alleen wanneer nodig en da's vrij zelden het geval). Da's denk ik dan ook een belangrijke reden dat de meesten daar niet tegenaan lopen, want meestal gebruikt men bijv. floats.

Goed gebruikte relative/absolute is een stuk robuuster en beheerbaarder dan floats.

Wat betreft de vraag van TS: Heb je juiste viewport-settings? Verder is het een beetje koffiedik kijken zonder voorbeeld

[ Voor 12% gewijzigd door Bosmonster op 27-05-2013 09:39 ]

[TheNephilim]

Het is alleen zo vaak onmogelijk om hoogte verschillen af te vangen met position: absolute;, daarom zie je toch weer vaak floats. Ik ben ook nog geen 'grid-systeem' tegengekomen die niet met floats werkt.

[incaz]

Als je de pagina herlaadt in de nieuwe modus, gaat het dan wel goed? Ik kan me vaag iets herinneren dat het draaien soms vreemde effecten levert, omdat niet alles meteen wordt toegepast.

Een andere mogelijkheid is het hele viewport-verhaal:
http://developer.apple.co...ort/UsingtheViewport.html

[Bosmonster]

TheNephilim schreef op maandag 27 mei 2013 @ 09:55:
Het is alleen zo vaak onmogelijk om hoogte verschillen af te vangen met position: absolute;, daarom zie je toch weer vaak floats. Ik ben ook nog geen 'grid-systeem' tegengekomen die niet met floats werkt.

Dat zijn dan ook precies die dingetjes waar floats voorlopig nog nodig zijn.

Wat je echter wilt voorkomen (en waar relative/absolute erg helpt) is de float-hell, die ik helaas te vaak tegenkom.

[MueR]

Het wordt hard tijd dat het W3 opschiet met css grid

[TheNephilim]

Bosmonster schreef op maandag 27 mei 2013 @ 11:10:
[...]


Dat zijn dan ook precies die dingetjes waar floats voorlopig nog nodig zijn.

Wat je echter wilt voorkomen (en waar relative/absolute erg helpt) is de float-hell, die ik helaas te vaak tegenkom.

Klakkeloos floats gebruiken is inderdaad niet nodig en inderdaad; er zijn situaties waar een float een soort van bugged.

MueR schreef op maandag 27 mei 2013 @ 11:30:
Het wordt hard tijd dat het W3 opschiet met css grid

Inderdaad! ^^ Al zul je nog steeds met 'fallback' aan de gang moeten, voordat de meest gebruikte browsers het allemaal ondersteunen...