absoluut positioneren en schermgroottes

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Goedemorgen helpmij collega's,
Ik maak regelmatig mee dat ik een div of span absoluut positioneer maar dan bij allerlei schermgroottes de positie moet her bepalen.
Aan de ene kant logisch maar misschien is er een oplossing voor.

Bedankt!
 
Niet vast blijven houden aan......

Tenzij het om een heel specifieke situatie gaat, waarin alle gebruikers en alle devices (incl. schermformaten) bekend zijn,
is het bijna nooit een goed idee om absolute positionering te gebruiken.

Relatieve positionering is vaak beter
en het volgen van de natuurlijke flow is m.i. bijna altijd het beste.

Bovendien: de begrippen "pixel-perfect" en "web-based" gaan slecht samen.
 
Een goede weergave op alle apparaten bereik je alleen door het gebruik van procenten in de breedte van de pagina en met relatieve positionering. Hierdoor zal een pagina zich aanpassen aan het apparaat in plaats van omgekeerd. Bijkomend voordeel is dat je de pagina niet hoeft te testen op tientallen resoluties die de fabrikanten ons in de loop der jaren hebben voorgeschoteld.

Met tecsman eens dat absoluut positioneren geen uitgangspunt mag/kan zijn en dat dit alleen is bedoeld voor specifieke situaties.

Waarschijnlijk al bekend: als een absoluut element in een relatief element zit, dan is de absolute positie ten opzichte van het relatieve element.

Suc6. Have fun.
 
@bron en @tecsman bedankt voor het meedenken. Tot nu toe gebruik ik absoluut positioneren bij situaties waar ik geen andere oplossing zie. Ja goeie @bron, absoluut positioneren in een relative div, dat zal ik beter onthouden.
Ja met percentages positioneren is verstandig. Alleen moet ik daarbij ook wel eens aanpassingen doen bij diverse schermgroottes.
In ieder geval, weer een opgeloste vraag :)
 
nu ja ieder zijn mening je kan het met position:...
Code: 
#foot{background:#565656 repeat-x scroll 0 0;border-top: 2px solid black;
	  display:block; position: fixed; left: 0; bottom: 0;bottom: 0%;
       height: 50px; width: 100%; padding:10px ; z-index:95;
       text-align: center; color:#fff;	
}
#foot a:link	{text-decoration: none; color:#fff;}
#foot a:visited {text-decoration: none; color:#fff;}
#foot a:active  {color:#fff; }
#foot a:hover   {color:#fff; }
#foot a:hover   {color:#fff; }
nu iedereen heeft er de mond van vol maar in vele gevallen zal je voor de kleineschermpjes gebruikers toch een andere css en html hebben en dat ga je dan detecteren serverside.Sommige doen het clientside maar dan heb je de met js en zonder js.
Indien de website voor iedereen benaderbaar moet zijn zal je de belangerijkste knoppen niet met jquery doen.Zodat iedereen kan navigeren.
 
Er is idd niets mis met position:absolute of position:fixed. Het is niet voor niets in de css opgenomen. Het mag echter nooit een uitgangspunt zijn voor elk element van de html.

maar in vele gevallen zal je voor de kleineschermpjes gebruikers toch een andere css en html hebben en dat ga je dan detecteren serverside. Sommige doen het clientside maar dan heb je de met js en zonder js
Klik om te vergroten...
Yep, er is verschillende css nodig voor smartphone, tablet en pc. Maar user-agent detectie (server- of clientside) is niet future-proof. Tegenwoordig gebruikt men @media(min-width:...px){...} voorbeeldje op deze website.

Indien de website voor iedereen benaderbaar moet zijn zal je de belangerijkste knoppen niet met jquery doen.Zodat iedereen kan navigeren
Klik om te vergroten...
Menu's voor een smartphone worden meestal in JavaScript/jQuery gemaakt, maar dit hoeft niet. Een mobile menu kan ook met puur css gemaakt worden, alleen heb je dan minder mogelijkheden.
 
Zie dat ik deze nog niet op opgelost heb gezet. :eek: Dank voor de laatste reacties ook!!! :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan