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)

layers vastzetten?

Anoniem
boelieboelie
11 antwoorden
  • Hallo allemaal
    Ik heb het menu van mijn site in layers gezet zodat ik het "makkelijk" kon positioneren.

    Nu kom ik er achter dat alles verspringt bij een andere resolutie. Is het mogelijk om de layers vast te zetten?

    ik heb de positie van absolute al veranderd naar relative in de css maar toen sprong alles weer helemaal na beneden :o iemand een oplossing?
  • Kijk hier eens: http://limpid.nl/lab/css/fixed/header-and-left-sidebar , of bij een van de andere voorbeelden…

    [i:8cdc7b6eee](Deze link werd in dit topic door Moos gegeven en leek me ook wel geschikt voor dit probleem).[/i:8cdc7b6eee]
  • Zou niet die oplossing van limpid doen, dan dwing je IE in quirksmode en dus met het verkeerde (eigen) boxmodel.

    Verder: wanneer je de indruk bent toegedaan dat positioneren in CSS slechts behoort te gaan met 'position: relative' of 'position: absolute', dan heb je waarschijnlijk slechte bronnen gebruikt. Positioneren gaat meestal slechts door gebruik van margins/paddings, niet door het op de pixel vast te zetten met absolute positionering. Ook gebruikt men floats voor positionering.
    In dit geval is 'position: fixed' van toepassing. (Dat werkt, net als zoveel zaken, niet in IE5 en IE6, dus daar zou je naar een oplossing voor moeten googelen of WimB's oplossing uit het reeds aangehaalde topic moeten bekijken).
  • Ik kom er niet uit. Kan het te maken hebben dat de site gemaakt is in photoshop dat daarom alles verspringt? het gaat om deze site
    http://www.art-d-sign.nl/
    alle layers staan ook in de head ipv de body of maak dat niet uit?
  • Het is sterk af te raden om je code door Photoshop en/of ImageReady te laten genereren. Het spijt om te moeten zeggen, maar de broncode is echt een enorme teringzooi. Dat komt niet door jou, maar door Photoshop.

    De layers die volgens jou in de head staan zijn niet de echte layers, maar de zogenaamde selectors van het stylesheet (CSS). Als je een stukkie naar beneden scrollt in jouw source, dan zie je dingen als <div id="layer1"> en zo staan, dat zijn de eigenlijke layers, en de properties van de gelijknamige selector worden toegepast op die div.

    De goede raad van Boelieboelie zou ik zeker niet negeren. Voor een layout die je gebruikt zoals ik denk dat de site er uit moet komen te zien heb je geen relative of absolute position nodig. Het verticaal centreren is misschien moeilijk, maar voor de kolommen kun je prima met float uit de voeten.

    Heb je je site wel eens bekeken op 800x600 of een andere resolutie dan 1280x1024? Dan zie je meteen dat het positioneren zoals je het nu doet in elk geval niet goed gaat.

    Het ziet er naar uit dat je nog niet zo veel weet van layers en stylesheets. Daar is natuurlijk niks mis mee, want we moeten allemaal ergens beginnen, maar het is misschien handig om je daar eens wat meer in te verdiepen voordat je er echt mee gaat werken. Zeker het positioneren van layers met absolute en relative kan voor heel wat hoofdbrekens zorgen als je niet precies weet hoe dit exact werkt. Ik ben zelf ook een beginner met deze methodes en ik moet zeggen dat ik zelf ook nog regelmatig voor vreemde vraagstukken kom te staan doordat het er niet uit komt te zien zoals ik het in mijn gedachten had en heb getracht te programmeren (met name in bizarre browsers zoals IE, maar dat terzijde).

    Je kunt ook layout stylesheets jatten en daar je eigen vormgeving in knallen, wat met een beetje inzet best het juiste resultaat kan opleveren, maar je leert er niet echt veel van. Ik heb wel eens wat van deze site overgenomen bijvoorbeeld: http://www.glish.com/css/

    En laatst heb ik deze gebruikt; een link die Boelieboelie in een ander topic gaf. Daar wordt ook stap voor stap uitgelegd hoe het stylesheet is opgebouwd…
  • boelieboelie,
    [quote:6896ae28e2]Zou niet die oplossing van limpid doen, dan dwing je IE in quirksmode en dus met het verkeerde (eigen) boxmodel. [/quote:6896ae28e2]
    Kan je dit nader verklaren?
    Ik vind het wel een mooie oplossing als je een frames look wilt zonder frames.
  • bedankt voor jullie info zal me eerts wat meer gaan verdiepen in stylesheets
  • @moos:

    Simpelgezegd heeft elke browser twee manieren van CSS-weergave, namelijk eentje op basis van W3C-standaarden, plus een eigen interpretatie. De W3C-standaard zijn richtlijnen die zijn opgesteld o.a. door overleg van browserfabrikanten, om meer uniformiteit aan te brengen. Door te werken volgens webstandaarden zul je als het goed is betere ondersteuning hebben van alle browsers.
    Daarnaast is er de eigen interpretatie hoe de weergave zou moeten zijn. Die eigen interpretatie volgt veelal ook de W3C-standaard, maar Microsoft had tot voorkort zo haar eigen ideeën en bedacht eigen regels voor het omgaan met CSS. En de weergave van pagina's is in die gevallen dus anders dan bij andere browsers.

    Als je je doctype weglaat, of je gebruikt een onvolledig doctype, dan wordt je pagina dus getoond op een manier die afwijkt van de CSS-standaard. Deze modus heet quirksmode. Het kán er dus goed uitzien in alle browsers, maar voorspelbaar is het gedrag allerminst.

    Daar staat standardsmode tegenover: hiermee zal de weergave van je pagina veel uniformer en voorspelbaarder zijn, dus minder verschillen tussen FF, Opera en IE. Standardsmode 'activeer' je door het gebruik van een correct doctype.

    Kortom, vermijd werken zonder doctype of met onvolledig doctype [size=9:2515ca85e2](tenzij je net als Anne, de maker van het Limpid-voorbeeld uitermate goed weet wat je doet)[/size:2515ca85e2]; werk in standardsmode door het gebruk van een correct doctype.

    Verouderde boeken en veel populaire online handleidingen en tutorials zoals W3Schools wijzen helaas niet op wat het gebruik of weglaten van een doctype voor consequenties heeft (of concreter, dat veruit de meesten een strict doctype zouden moeten gebruiken). Voor het leren van het bouwen van websites raad ik zulke sites dan ook niet aan.
  • ik weet niet of ik t topic zo niet te ver van t beginonderwerp afbreng. Als dat t geval is, moet ie misschien gesplitst worden.

    Want ik wil graag even reageren op de link die boelieboelie gaf over een correct doctype. Onder template staat nl dat je ook altijd de volgende regel moet opnemen:
    <?xml version="1.0" encoding="utf-8"?>
    Nu zie ik hier: http://forum.computertotaal.nl/phpBB2/viewtopic.php?p=507185#507185 juist staan dat dat IE in 'Quirks mode' dwingt, dus niet de standaard. Laatste is volgens mij waar (heb t laatst nog getest en kreeg verschrikkelijke resultaten toen ik de <?xml-regel toevoegde). Maar heeft W3C t dan fout?
  • Het W3C legt de standaard vast; het is aan de browserfabrikanten er op de juiste wijze mee om te gaan. Je krijgt verschrikkelijke resultaten in IE, omdat IE niet met echte XHTML om kan gaan. Het is dus een IE-bug.
    Nou hebben ze dit gedeeltelijk gefixt in IE7, zie 'The <?xml> prolog, strict mode, and XHTML in IE', dus voor IE7 kun je die prolog wel laten staan, maar XHTML serveren als application/xml+xhtml werkt nog steeds niet, wat dus betekent dat je je XHTML als HTML serveert.

    Kortom, in theorie zou je een prolog moeten gebruiken voor XHTML, maar IE6 en lager kunnen er niet mee omgaan, dus is het beter die weg te laten. En ik ben van mening dat je XHTML beter helemaal kunt laten zitten, aangezien je het toch als HTML verstuurt (text/html). Zie voor meer achtergrond 'XHTML is not for beginners'. HTML 4.01 Strict voldoet in veel gevallen.
  • dank voor je uitleg. Toch vind ik dat W3C dat toch wel mag melden op haar site. Maar waarschijnlijk niemand hier die daar iets aan kan doen…

Beantwoord deze vraag

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