Thu, 2009-12-17 17:14
I'm in the process of designing a new website using css3 and html5. I didnt fully understand exactly how multi-col was going to work. It seems it was designed to allow websites to flow textural content as a newspaper does. But I wonder if using them as for layout (same as we do divs) would be semantic or not. Thoughts pplz...
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Thu, 2009-12-17 17:19
#1
html5
I think html5 should have something like this for layout. The css multi-col will still need to attached to an html tag. html5 needs something like this...
<colOne>content</colOne> <colTwo>content</colTwo>
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Thu, 2009-12-17 20:16
#2
How does that help improve
How does that help improve what we have now? You're still deciding what content goes in what column and there is no flow. Also, you'd be reintroducing presentational elements to the markup 
Thu, 2009-12-17 20:23
#3
Unless it auto flows there
Unless it auto flows there doesn't seem a lot of point. All smacks of attempting to replicate DTP apps never been convinced by multi column but then such is the nature of CSS implementation that I have given up playing and testing; too much to do and get through.
Thu, 2009-12-17 20:29
#4
well, for semantics and user
well, for semantics and user experience. Without the ability to see the screen and how its designed, you have to rely on the markeup to provide a mental structure of the page. If we had html tags that make that process easier, then that would be best. html5 introduces some of those tags, but missed out on others.
<body> <header></header> <nav></nav> <colOne> <article> <section></section> </article> </colOne> <colTwo>content</colTwo> <colThree>content</colThree> <footer></footer> </body>
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Thu, 2009-12-17 20:45
#5
how is <colOne> semantic?
how is <colOne> semantic?
Thu, 2009-12-17 20:52
#6
colOne is better then <div
colOne is better then
<div id="colLeft">
although, html5 does have
<aside>seems we need others too, like
<bside> <cside> <dside> and so on..
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Thu, 2009-12-17 21:13
#7
CupidsToejam wrote: colOne is
colOne is better then
<div id="colLeft">
No it's not. All it's done is create another container, which div handles quite well. What's more is that it would be a presentational container - appearing as the first column. Your choice of id name for the div is not a good one. It should should describe what the element is, not where it lies.
although, html5 does have
<aside>seems we need others too, like
<bside> <cside> <dside> and so on..
I hope your joking here... It's not aside as in A,B,or C side. It's a literary term - a temporary departure from the main theme.
Thu, 2009-12-17 23:12
#8
In markup terms column layout
In markup terms column layout is a nonsense, one doesn't read different columns it's all a series of paragraphs or a new heading and paragraphs. the idea of columns is simply a visual presentation or representation, it can't have any real meaning in markup terms?
Fri, 2009-12-18 07:50
#9
I think you're looking at simulations
I think you're looking at the examples which they've coded to simulate flowed columns, instead of the real deal. Firefox 3.5 supports several of the column properties, using the proprietary -moz- prefix. I think Safari/webkit also has support, but I upgraded my kernel, and had trouble getting all the headers right to compile the vboxdrv module. I've got VirtualBox up and running, but haven't got Vista installed any more — long story.
Watch the text reflow as you drag the window wider or narrower. The markup remains semantically sound.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>misc tests</title> <style type="text/css"> /*<![CDATA[*/ body, html { } div { -moz-column-count: 4; -moz-column-gap: 1.25em; -moz-column-rule: 2px solid #ddd; column-count: 4; column-gap: 1.25em; column-rule: 2px solid #ddd; } /*]]>*/ </style> </head> <body> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna sem; tempus quis vehicula in, convallis nec tellus. Pellentesque viverra metus et odio adipiscing id feugiat nisi cursus. Proin a est felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer sagittis fringilla odio in pulvinar. Aliquam interdum dignissim nisl vitae condimentum. Sed condimentum mattis magna. Etiam congue tincidunt dapibus. Etiam ullamcorper velit sed dolor faucibus volutpat. Vestibulum id neque ac diam faucibus blandit sollicitudin ut felis. Mauris risus nibh, condimentum a suscipit nec; hendrerit vitae tellus? Donec in nunc ut leo mollis mollis faucibus at est. Fusce molestie ullamcorper mi, id fermentum risus luctus viverra! Maecenas lectus tellus, ultrices eget feugiat sit amet, auctor quis tortor. Quisque at tortor metus, quis varius metus? Nullam quis consectetur neque. Suspendisse porttitor faucibus turpis, vel luctus tellus commodo eget. Integer in magna eget metus cursus gravida quis vitae neque. Nunc mi dui, porttitor in rutrum ut, cursus sed velit. Pellentesque nunc neque, vulputate fermentum rutrum adipiscing, bibendum sed odio!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac ipsum et nulla consectetur facilisis? Proin sit amet lectus nulla, a malesuada dolor. Pellentesque facilisis sodales elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim condimentum sem a accumsan? Vestibulum dapibus pellentesque tellus, sit amet porttitor orci congue vitae? Sed eu elit erat, et aliquam purus? In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In molestie venenatis pulvinar.</p> <p>Nullam fringilla, est adipiscing tincidunt porttitor; lacus mauris laoreet dui, molestie fringilla nibh est vitae turpis. In volutpat metus et magna dictum blandit. Suspendisse felis metus, aliquet ac blandit cursus, posuere aliquet neque. Aenean ut augue et magna adipiscing blandit. In id augue eget tellus ornare semper non a est. Duis ante massa, bibendum congue dictum sed, scelerisque at justo. Nam aliquet, nunc sit amet tincidunt viverra, ligula tortor condimentum mauris; vel convallis mauris ante in leo. Integer aliquam varius sem vel vestibulum! Nullam varius sollicitudin velit, nec fermentum tellus commodo ac. Aliquam id ipsum vitae libero viverra pretium. In eu nibh lacus, non mattis ipsum. Ut sit amet quam in diam sodales congue. Quisque sodales lacus et elit ultrices eget varius arcu mattis. Phasellus tempus semper erat, pretium suscipit ante pharetra et. Vivamus convallis turpis semper turpis tempor semper.</p> </div> </body> </html>
cheers,
gary