[CSS] wat geniet de voorkeur

[anoniem]

Beste mensen, Welke vorm van positioning geniet de voorkeur bij CSS? *relative *fixed *absolute *static of is dit alles toepassing gebonden?

[anoniem]

Inderdaad, het is maar net wat je ermee wil bereiken. static-dit is standaard voor alle elementen en zit in de normale flow relative - het element is verschoven tov de normale flow (mbv top,left etc), maar neemt nog wel de ruimte ervan in, zoals static. absolute - het element zit buiten de normale flow en neemt ook geen ruimte meer in zoals static. Positie wordt bepaald aan de hand van de eerst volgende ancestor dat geen position:static heeft. fixed - idem als absolute, maar positie is tov scherm en blijft altijd op dezelfde plek op het scherm. Zie ook: http://www.handleidinghtml.nl/css/css-oud/position.htm#position Het gebruik van position icm top,left,bottom,right kan dus heel belangrijk zijn om een bepaalde layout te bereiken. Het is iig een van de belangrijkere dingen in css om te begrijpen.

[anoniem]

Ok, das duidelijk. wat ik me nu afvraag is het volgende: De site bevat een div, deze moet gecentreerd op ieder beeldscherm staan. maar waar moet ik deze instelling plaatsen en hoe heet deze? dus in mijn css #holder {bla bla bla} of in mijn div <div id="holder">bla bla bla </div> ik neem aan dat er ergens iets moet staan zoals: align="center" oid

[anoniem]

Horizontaal: http://annevankesteren.nl/test/templates/center-h.php (prima oplossing) Horizontaal & verticaal: http://annevankesteren.nl/test/templates/center-hv.php (niet echt een goede, maar wel de enige [ins]die cross-browser werkt[/ins])

[anoniem]

Voor alleen horizontaal gebruik je: [code:1:b3060835d7] div{ margin-left:auto; margin-right:auto; width:200px; } [/code:1:b3060835d7] Helaas begrijpt ie daar niets van, deze gebruikt om onduidelijke redenen text-align hiervoor, die moet je dan zetten op de parent van de div (body waarschijnlijk). Dus als je iets horizontaal wil centreren en rekening moet houden met ie, doe zoiets: [code:1:b3060835d7] body{ text-align:center; } div{ margin-left:auto; margin-right:auto; width:200px; text-align:left; } [/code:1:b3060835d7] Dit komt ongeveer overeen met het eerste voorbeeld van Anne. Ik kan je aanraden om eerst te testen in Mozilla of Opera, omdat ie slecht met de spec omgaat en je zo het risico loopt om css property's verkeerd te begrijpen, vanwege het slechte gedrag van ie.

[anoniem]

FYI, IE6 in SCMode ondersteund 'margin:0 auto;'.

[anoniem]

[quote:bbde282d57="termin8or"]FYI, IE6 in SCMode ondersteund 'margin:0 auto;'.[/quote:bbde282d57] Op zich is dat wel goed, maar met al die doctype switches wordt het er niet echt overzichtelijker van. Als ie5 echt uitgestorven is, dan is het wel bruikbaar denk ik.

[anoniem]

[quote:8185da0225="termin8or"]FYI, IE6 in SCMode ondersteund 'margin:0 auto;'.[/quote:8185da0225]Serieus? Té relaxed! IE5.x sterft al langzaam uit, maar of IE6 in SC Mode zit heb ik helemaal zelf in de hand, dus dat zit wel goed. - Bas

[anoniem]

Wat toevallig. Kwam toevallig ook hetzelfde probleem tegen. Bedankt voor de links :D, resultaat valt snel te beoordelen in site-chek :D

[anoniem]

Bij mij gaat het om het volgende. Ik heb na een paar schetsen de volgende mockup gemaakt in photoshop. [url]http://www.planetdust.nl/active_mockup.jpg[/url] Maar welke div moet ik nu positioneren ten opzichte van wie? Ik wordt er maar niet wijs uit. wie kan me op weg helpen of heeft nog bruikbare links/tips? bedankt allen

[anoniem]

Voordat ik hier antwoord op kan geven moet je jezelf eerst een paar vragen stellen... Heeft de site een vaste breedte en/of hoogte of is het een liquid design. Hebben bepaalde kolommen een vaste breedte? Iets meer info dan alleen een screenshot is dus gewenst. - Bas

[anoniem]

Vooruit hier gaat ie dan. Allereerst de namen van de div's #holder (de hoofd div) #logo (spreekt voor zich) #top (afbeelding bovenin) #nav (navigatie #content (inhoud van site) #footer (voet tekstbalk) De holder zal 955x600 pixels zijn. De rest van de div's ben ik nog niet helemaal zeker van wat betreft afmetingen. Echter de logo div zal zijn 290x130 en de top zal zijn:590x130 De footer zal over de hele breedte worden weergegeven met een hoogte van 50 px Het kan zijn dat de afmetingen nog gaan veranderen. (is snel aan te passen) Het hele ontwerp zal dus fixed zijn. Ik heb toch gekozen voor een 1024x768 gebruiker. Lijkt mij dat deze in de meerderheid zijn ten opzichte van 800x600. correct me if i'm wrong. hopelijk heb je hier iets aan. zo niet dan hoor ik t wel bedankt

[anoniem]

Ik heb een voorbeeld gemaakt, tijdelijk [url=http://basje.com/temp/active.html]hier[/url] te vinden. De afmetingen en kleuren kloppen nog niet, maar dat is slechts een kwestie van de CSS aanpassen. Let even op de volgende zaken:[list:1c8764a43f][*:1c8764a43f]Ik heb gekozen voor absoluut positioneren omdat dat het makkelijkst is bij vaste maten en pixelprecies plaatsen.[*:1c8764a43f][i:1c8764a43f]#holder[/i:1c8764a43f] heeft [i:1c8764a43f]position: relative;[/i:1c8764a43f] zodat alle elementen erbinnen worden geplaatst tov de linkerbovenhoek van [i:1c8764a43f]#holder[/i:1c8764a43f] ipv het venster.[*:1c8764a43f]Door het toevoegen van de juiste [i:1c8764a43f]doctype[/i:1c8764a43f] komt IE6 in zgn Standard Complience mode, wat ons 2 voordelen oplevert:[list=1:1c8764a43f][*:1c8764a43f]Het toevoegen van [i:1c8764a43f]margin: 0 auto;[/i:1c8764a43f] is genoeg om [i:1c8764a43f]#holder[/i:1c8764a43f] cross-browser te centreren.[*:1c8764a43f]Alle browsers zullen van hetzelfde box model gebruik maken.[/list:u:1c8764a43f][*:1c8764a43f]De CSS staat nu in de header maar moet eigenlijk in een apart bestand.[/list:o:1c8764a43f]Ik hoop dat je hier wat aan hebt, succes ermee. - Bas

[anoniem]

waaw, helemaal goed. Als ik met behulp van dit document het nog niet ga snappen/leren dan ga ik de verzorging in :P helemaal te gek, bedankt voor je hulp