Als je naar mijn linkje kijkt zie je dat 6 kolommen een maximale aantal is.
Je moet een vaste breedte nemen en die opdelen door het aantal kolommen dat je max. wilt hebben.
Ik werk op een vaste breedte van 960px en wilde graag max. 6 kolommen hebben dus dat wordt dan 130px min- de margins (tussenruimtes)
Maar kijk eens naar de achtergrond lijntjes- ‘raster’ ..zie je hoe breed dat deze kolommen zijn. één zo’n kolom is 130px breed en de tussenruimte is 20px (margin-left en -right van 10px maakt samen 20px)
Ik heb dus div’s met classes in-gedeeld in “one” , “two” , “three” , “four” , “five” , “six” dit zijn het aantal kolommen aan elkaar vast kijk maar hieronder naar mijn width..
.six { width: 930px; } .five { width: 770px; } .four { width: 610px; } .three { width: 450px; } .two { width: 290px; } .one { width: 130px; }
Dus ik kan een lijn van div’s maken met 6 x “one” = mijn volledige breedte
of 2 x “three” = ook 6.
Of “four” + “two” is ook samen 6.
zolang ik maar naar mijn volledige breedte werk qua indeling op elke rij blijft het netjes uitzien.
Dat kan je ook zien bij de twee groene vlakken met “Heading h3” erin dat zijn 2 “three” div’s naast elkaar dat maakt samen 6.
Dan plaats ik een .clear en ga ik verder met de volgende lijn (rij)
Daaronder maak ik een div van “five” + één van “one” = ook weer 6.
En dan die blauwe met “Heading h5” erin staan 6 losse “one” div’s op één rij.
Met dit systeem werk ik al mijn hele leven alleen is het nu echt heel goed zichtbaar als ik het achtergrond (raster) weghaal dan vallen mijn kolommen helemaal niet op.
Dit soort layouts gebruikt men bij het ontwerpen van kranten en Magazines op deze manier krijg je alles netjes uitgelijnd en geen lege plekken omdat je zelf kan bepalen hoeveel ruimte je nodig hebt.
Kan iedereen dit doen?
Ja ik denk het wel maar dan moet je wel verstand hebben van html-/css er zijn genoeg gratis basis rasters in html-css te vinden die je kan gebruiken als een vorm van reset.
Ik heb dus mijn hele TwentyTen gestript (sidebar, footer(s) ) allemaal heb ik ze eruit gesloopt (lekker snel) en als ik nu een pagina aanmaak ben ik dus verplicht in html-view te werken en mijn content handmatig een indeling te geven.. Dit is meer werk dan ieder ander graag zou willen maar hiermee bepaal ik wel zelf wat op welke pagina komt.
En ik ben niet iemand die elke dag een blog-post maak. Ik ben meer van veel onderzoek doen voordat je iets opschrijft en dan mag ik graag de layout aan het onderwerp aanpassen.
Voor het maken van een nieuws -/kranten site in WordPress is dit natuurlijk een beetje TE omdat je vaker veel nieuws snel moet posten en met veel socialmedia plugins moet werken.
Dus dan wordt het zoeken naar een WP thema met een kranten layout. Dit is niet makkelijk geloof mij omdat de pagina indeling juist het moeilijkste is bij dit soort websites.
Nog even wat voorbeeldjes van andere pagina’s zonder het raster in de achtergrond en nu is het ineens veel moeilijker te zien dat ik nog steeds met die kolommen van 6 werk. (pagina’s zijn nog niet klaar en puur dummy’s dus let niet op de kleuren)
(categorie pagina)
http://www.plaatjesupload.nl/bekijk/2011/03/10/1299752367-060.png
(blog-post1)
http://www.plaatjesupload.nl/bekijk/2011/03/10/1299752514-80.png
(blog-post2)
http://www.plaatjesupload.nl/bekijk/2011/03/10/1299752867-890.jpg
