Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[css] weer een resolutievraagje

Anoniem
None
6 antwoorden
  • Ik heb een probleempje met een site. Ik heb een layer met een breedte van 800px, maar gaat de resolutie op 800 x 600 of lager dan valt een deel van de layer en dus met tekst en plaatjes weg, alleen het middelste deel blijft dan in beeld, en scrollen heeft niet veel zin want ook links van eea weg.
    Ik weet niet of het kan, maar ik wil een max breedte behouden van 800px ivm de opmaak, maar als het echt noodzakelijk is, dus bij die lage resoluties dan aanpassen naar een kleinere breedte. Ik weet dat er ook een javascript is waarmee dat kan, maar ik wil eigenlijk dit zonder javascript voor elkaar krijgen, heeft iemand een id hoe dit kan, als het al kan :-? ?
  • in theorie.. ja, in praktijk nee. Met max-width kun je met css een maximum breedte aan een object geven. Je kan dan bijv. een stijl opgeven:

    width:100%;
    max-width:800px;

    Alleen werkt dit niet in Internet Explorer. Daar zul je - denk ik - toch met javascript aan de slag moeten.
  • Eh jammer :(
    Maar nou zit ik te denken, als het dan met javascript moet, moet ik dan voor elke resolutie zo'n aparte pagina maken, of hoeft dat dan alleen voor de resolutie van 640 x 480 die onder 800 x 600 komt.
    Het wordt niet veel meer gebruikt, maar er zijn nog mensen die zo'n lage resolutie gebruiken, dus wil het daarvoor er toch ook goed uit laten zien.
  • Ok, ik heb wat gevonden alleen het werkt nog niet helemaal, ik hoop dat iemand mij hier zo snel mogelijk bij kan helpen. 8)
    Ik gebruik onderstaande code bij lage resoluties:[code:1:9f0c6a0672]<script type="text/javascript">
    <!–
    var breedte=801;
    var hoogte=601;
    if (screen.width < breedte || screen.height < hoogte)

    window.location="index_small.html";



    //–>
    </script>[/code:1:9f0c6a0672]
    Als ik de resolutie laat zet werkt het uitstekend, maar nu doet zich een probleem voor bij een hogere resolutie, er wordt om de één of andere vage reden een popup geopend van de pagina…?
    Iemand een id hoe dat kan ?
  • Dit is sowieso niet de goede aanpak. Ten eerste moet je nu 2 versies van de pagina's bijhouden, ten tweede meet je de resoltie van het buroblad van de gebruiker, niet van de browser. Hoewel ik een res draai van 1600x1200, komt het regelmatig voor dat ik mijn beeldscherm kleiner is dan 800x600.

    Je neemt ook nog in je script een hoogte op. 601. Als je resolutie hoger is, dan wordt je ook doorgestuurd. Vandaar je probleem.

    Met javascript kun je beter de breedte van bijvoorbeeld de body of een container-div uitlezen en niet groter laten worden dan een bepaalde waarde.

    Maar een betere oplossing is om je design 'elastic' te maken. Door te werken met percentages en de eenheid 'em' in je css kun je zorgen dat je design op elke resolutie goed meeschaald. Kijk hier bijvoorbeeld eens.
  • Het is me gelukt het wat beter voor elkaar te krijgen zonder javascript. Aan de linkerkant valt nu niet meer een deel weg, het blijft echter wel zo dat bij een resolutie lager dan 800x600 de scrollbalkjes tevoorschijn komen, maar er zijn tegenwoordig nog maar weinig mensen met z'n lage resolutie, dus die moeten dan maar scrollen :wink: Ze kunnen nu tenminste wel de hele site zien. Misschien dat ik het later nog wel een wat elastischer maak.

    Ik heb alleen nog één klein probleempje. In IE ziet de site er prima uit, maar als ik in mijn vertrouwde Firefox kijk staat de mainlayer ineens (gokje: 10px) onder de nav-balk, terwijl alle margins op 0 staan. De nav-balk sluit wel gewoon aan op de header. Hier maar even de noodzakelijke css:
    [code:1:a8f456f3b9]div#nav {

    margin:0px auto;
    padding:0px;
    width: 800px;
    height: 25px;

    }

    div#main {

    margin:0px auto;
    padding:0px;
    width: 800px;

    }[/code:1:a8f456f3b9]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.