9 replies [Last post]
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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...

http://www.w3.org/TR/2001/WD-css3-multicol-20010118

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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 Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

how is <colOne> semantic?

how is <colOne> semantic?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 5 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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..

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

CupidsToejam wrote: colOne is

CupidsToejam wrote:

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.

Quote:

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 1 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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. Sad

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.