CSS - Responsive website vraagje

Alles over programmeren en development binnen de IT-wereld
Plaats reactie
Flippi
Elite Poster
Elite Poster
Berichten: 895
Lid geworden op: 26 jan 2011, 18:44
Uitgedeelde bedankjes: 92 keer
Bedankt: 80 keer
Recent bedankt: 1 keer

Hallo,

Het is de eerste maal dat ik mij bezig hou met een responsive website die draait op Wordpress en ik snap iets niet.
Voor de header-div gebruik ik een foto van 1260 x 240 pixels waaraan ik zelf de rode "div" heb toegevoegd. Die rode div staat absolute-gepositioneerd, 50 pixels van de bovenrand. Dit klopt zoals u ziet op de 1ste screenshot hieronder.

Code: Selecteer alles

#site-header {
	position: relative;
	z-index: 3;
	max-width: 100%;
	height: auto;
}

<div id="site-header">
<div style = "position: absolute; top: 50px; right: 50px; background: red;"><a href="#" target="_blank">Radio en TV via Satelliet</a></div>
<img src="../Satellietantenne.png" width="1260" height="240"> 
</div>
Afbeelding

Als ik de site nu bekijk op mijn Galaxy S7 met een resolutie van 1440 x 2560 pixels, dan krijg ik onderstaande schermlayout.
De title-header is aangepast aan de breedte van het smartphonescherm, maar die rode div staat nu plots op 200 pixels van de bovenrand. Ik had die eigenlijk ook op mijn smartphone op 50 pixels verwacht, want hij staat toch absoluut gepositioneerd?
Ik weet dat ik dit kan oplossen via "@media screen and (min-width: xxxpx) etcetera", maar ik wou toch begrijpen waar de fout in mijn redenering zit...

Afbeelding
xayana
Premium Member
Premium Member
Berichten: 694
Lid geworden op: 21 dec 2009, 17:33
Uitgedeelde bedankjes: 57 keer
Bedankt: 77 keer

Een ander zal dit overschrijven. Je WP-thema zal een sh*tload aan CSS genereren en daarvan zal er eentje een media query bevatten die jouw inline CSS overschrijft. Check eens in de inspector (F12) van je browser welke CSS nog slaat op die div.

In Chrome kan je daarvoor de device toolbar gebruiken, of gewoon de inspector schalen.
butskristof
Elite Poster
Elite Poster
Berichten: 1512
Lid geworden op: 19 dec 2011, 18:42
Locatie: Heist-op-den-Berg
Uitgedeelde bedankjes: 478 keer
Bedankt: 110 keer

Kan die 200px ook niet te maken hebben met upscaling van je schermresolutie? Voor de browser (en de media queries) heeft je scherm een resolutie van 720x1280, dewelke dan achteraf x2 (of x4 hier? in dat geval 360px breed) gedaan wordt. Anders zou je de responsive versie ook gewoon helemaal niet krijgen, maar de desktop versie bij 1440px breed.

Xayana's opmerking is zeker ook een om rekening mee te houden, maar voor zo ver ik hier kan zien blijft die absolute position gewoon gelden (in Safari).
brubbel
Elite Poster
Elite Poster
Berichten: 918
Lid geworden op: 04 jul 2012, 16:55
Uitgedeelde bedankjes: 76 keer
Bedankt: 174 keer
Recent bedankt: 1 keer

Probeer er eens top: 50px !important; van te maken?
Flippi
Elite Poster
Elite Poster
Berichten: 895
Lid geworden op: 26 jan 2011, 18:44
Uitgedeelde bedankjes: 92 keer
Bedankt: 80 keer
Recent bedankt: 1 keer

Bedankt voor de tips. Ik heb ondertussen al wat screenshots verzameld van toestellen met verschillende resoluties.
Ik zoek het verder uit en hou jullie op de hoogte.
Flippi
Elite Poster
Elite Poster
Berichten: 895
Lid geworden op: 26 jan 2011, 18:44
Uitgedeelde bedankjes: 92 keer
Bedankt: 80 keer
Recent bedankt: 1 keer

Waar ik uiteindelijk op uitgekomen ben:

Code: Selecteer alles

Modern mobile devices have high-density displays where 1px in your CSS e.g. corresponds to 2.25, 4, … physical pixels on the screen hardware.
Dus Kristof, je zat in de goede richting.
De raad die ik meekreeg van een webdesigner: gebruik bij absolute positionering voor responsive sites geen pixels, maar percentages.
Plaats reactie

Terug naar “Development”