Archief - Enkele vragen hoe je het best werkt met een 960 grid systeem

In de avondschool heb ik tot op heden altijd leren werken met een fluid layout in procenten.

Echter ik zou graag een gewone layout doen met pixels omdat vele sites dit toch gebruiken en ben daar nu eens mee bezig met het gebruik van een 960 grid en bijhorende stylesheets (reset.css, text.css, 960.css)

Om een achterliggende grid op een pagina te plaatsen, maak ik gebruik van een jquery plugin ( 960.gs grid overlay – a jQuery plugin | badlyDrawnToy )

Eerst kwam ik uit op .psd files om die 960 grid's te tonen, maar toen ik vond dat psd voor photoshop was, was dat niet voor mij aangezien ik dat programma niet ken.

Echter ervaar ik ietwat problemen als ik een border toepas op een div-blok dat binnen de kolommen van het grid hoort. Het schuift op naar links of rechts en vraag me af wat de beste oplossing is om borders op een div blok toe te passen?

Doen jullie direct de borders plaatsen op bijvoorbeeld een grid van 220px of plaats je eerst een grid en dan daarin iets anders (container?)

Ik ben niet volledig zeker, maar ik denk dat ik rekening moet houden met margin, borders en dan de width maar ik weet niet of ik nog eens moet extra rekenen als ik gebruik zou maken van padding.

Zijn er nog andere css factoren waarbij ik rekening moet houden om alles mooi te laten uitlijnen in zo'n 960 grid?

Moet je in dit grid eventueel negatieve pixels toekennen in een css bestand (bv: margin-left: -10px) ?

Is het gebruik van een 960 grid, een soort standaard in bedrijven of is men creatief met ontwerpen van sites en het gebruik van aantal kolommen (8-12-16-20) en mixen ze die kolommen dan nog eens op één pagina (12-16-8)?

Ik heb ook gelezen op google dat velen gebruik maken van een 960 of 980 width, maar ik zou eens willen weten wat de minimum breedte en de maximum breedte mag zijn naast bovenstaande getallen?

Wanneer je een border toekent aan een blok binnen je container zoals jij nu aanhaalt. Dan moet je rekening houden dat het blok met het aantal border pixels breed zal toenemen. Als je bijvoorbeeld een blok hebt van 200px en je voegt een border toe van 2px dan zal de totale breedte 204px zijn. Je kan dat dan compenseren door de width te reduceren tot 196px zodat je blok weer 200px breed wordt.

Ik gebruik meestal border, tenzij het soms niet anders kan om een rand te krijgen rondom een div dan gebruik ik een div rond een div.

En of het een standaard is om 960px voor de breedte te nemen dat weet ik niet. Ik vermoed dat dit vaak genomen wordt om een evenwicht te hebben tussen de verschillende resoluties van monitoren. Stel je neemt een width van 1200px dan kan dat geen aangename ervaring zijn voor iemand die een beeldscherm heeft van 1000px breed.

Ik hoop dat je hier wat aan hebt.

Of je kan het jezelf gemakkelijker maken zolang je geen IE7 of lager moet supporten door "box-sizing:border-box;" te gebruiken. Dan verander je het box model zodat borders onderdeel uitmaken van de box zelf.

Bedankt voor de antwoorden. Als er nog iemand tips heeft, zeg het maar .

Prior zei:

Bedankt voor de antwoorden. Als er nog iemand tips heeft, zeg het maar .

Klik om te vergroten...

Beste Prior,

In Dreamweaver 6, is er een zeer deglijke "Fluid Grid" - builder ingebouwd, die je volledig kan customizeren. De media-queries kunnen eveneens aangepast worden naar wens ...

Kijk eens naar lynda.com, en zoek "Responsive-Design-Dreamweaver-CS6", zeer goede cursus.

greezt

omega_ws zei:

Beste Prior,

In Dreamweaver 6, is er een zeer deglijke "Fluid Grid" - builder ingebouwd, die je volledig kan customizeren. De media-queries kunnen eveneens aangepast worden naar wens ...

Kijk eens naar lynda.com, en zoek "Responsive-Design-Dreamweaver-CS6", zeer goede cursus.

greezt

Klik om te vergroten...

Ik denk niet dat een cursus Dreamweaver met bijhorend grid builder aan mij besteed is.

Ik wil gewoon puur zelf (html(5)/css(3)) kunnen maken in een gratis programma als kladblok of notepad ++, etc ... met bijhorende jquery/javascriptjes, zonder extra bijkomende kosten en zever, om uiteindelijk als doel 0 fouten te verkrijgen in een (html/css) validator en dat crossbrowser supported is.

@Omega:

http://www.omegawebsolutions.be/images/team/banner TEAM3.jpg

Als je je job zo serieus neemt, waarom staan er dan al die fouten in jouw website?
De startpagina alleen al heeft 66 fouten als je die door een wc3 validator sleurt ...

Als die site met Dreamweaver is gemaakt, dan is dat heus niet voor mij.