1.
Ja, de resolutie is bepalend, niet de schermafmetingen in inches of cm's of km's. De afmetingen worden in je css met px geregeld *), en de resolutie werkt ook met px.
- Via de beeldscherm-instellingen kan ik m'n (maximaal) 1280*1024px monitor instellen op bv. 1024*768px: dan zijn de pixels op dezelfde hoeveelheid beeldscherm-centimeters allemaal wat groter. En een img van 1000px breed loopt dan van het scherm af.
2.
Ja, dan kan. Bv. met javascript de beschikbare schermpixels opmeten, en bij te weinig ruimte de css laten aanpassen:
[JS]<script type="text/javascript">
//<![CDATA[
if (document.getElementsByTagName('html')[0].offsetWidth < 1310 ){
document.getElementById('facebook').style.top='45px';
document.getElementById('facebook').style.marginLeft='600px';
}
//]]>
</script>[/JS]
Of verhuizen naar een ander mooi plekje binnen de #container.
- Het scriptje wel helemaal onderaan de pagina zetten, vlak voor de </body></html>, anders bestaat het #facebook-element nog niet en kan het script niets doen (behalve een foutmelding geven
).
Met vriendelijke groet,
CSShunter
_______
*) Bij een compleet "liquid design" daarentegen maak je gebruik van % van de schermbreedte en niet in pixels. Dan kan je een site altijd beeldvullend maken op elke resolutie, maar dan loop je weer andere troubles tegen het lijf.
Bij jouw testpagina zou dat betekenen dat de middenkolom in breedte gaat variëren, dan kan de facebook-button er wel altijd naast komen. > Maar dan passen bij smalle schermen de images van de "featured-box" niet meer naast elkaar, de menu-items + zoekvenstertje komen in het gedrang, enz.
- Voorbeeld liquid design: Elastico! (window verkleinen en rechterzijkant slepen; die gaat goed tot 800*600px)
