SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 119
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Creating Newspaper Columns

    How do you create a web page that has "Newspaper Columns"? (You know, like 2-3 columns across the page.)

    I remember seeing this somewhere online and would like to learn how to incorporate it into my website, since that "print look-and-feel" still rules over web-stuff.



    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can do normal floated columns, of course. CSS3 offers new functionality that automatically divides content into columns, but it won't work in a lot of browsers yet. Or there's JavaScript, though I've found this a little buggy too.

    Here's an interesting challenge that was set recently:
    http://www.sitepoint.com/forums/show...23#post4438623

  3. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a css solution.

    This is a javascript solution
    Code:
     
     
    <!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> 
    <title></title> 
    <style type="text/css"> 
    ul { 
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style-type: none}
     
    #container { 
    border: 1px solid red; 
    width: 800px;
    overflow: hidden; 
    margin: 0px auto 0px auto;
    padding: 20px 20px 20px 20px} 
     
    #sidebar { 
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    border: 1px solid green; 
    float: left; 
    width: 250px} 
     
    #content { 
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    border: 1px solid blue; 
    float: right; 
    width: 490px} 
     
    </style> 
    <script type="text/javascript"> 
     
    window.onload=function() {
        var maxHeight = 0;
        //get the column containers
        var colsA = document.getElementById("container").childNodes;
        //get the height of the tallest column
        for(var i=0; i < colsA.length; i=i+1) {
             if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
        }
     
        //set all the column containers heights to maxHeight
        for(var i=0; i < colsA.length; i=i+1) {
             if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
        }   
    } 
     
    </script> 
    </head> 
    <body> 
     
    <div id="container"> 
        <div id="sidebar"> 
         <ul id="menu_list">
             <li>Menu item 1</li>
                <li>Menu item 2</li>
                <li>Menu item 3</li>
                <li>Menu item 4</li>
            </ul>
        </div>  
        <div id="content"> 
        Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
    Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
    pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
    ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
    aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
    volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
    ante sed, ac turpis dis dui vestibulum aut.
        </div> 
    </div> 
    </body> 
    </html>
    it appears this thread is related to your other thread.

    if so, imho there are other things you should do first before you even think about doing any html/php/javascript coding.

    I posted my in your other thread.

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,966
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is actually an interesting question, because I think DoubleDee is referring to dynamic output from top to bottom:
    Code Scheme:
    1  5   9
    2  6  10
    3  7  11
    4  8  12
    instead of the usual
    Code Scheme:
     
     1  2   3
     4  5   6
     7  8   9
    10 11  12

    @Kalon: I know how to create that in Coldfusion, but I was wondering if you know of any Javascript that can do that as well?

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would generate the html server side after the content has been retrieved from the database.

    once you know how many articles are to be displayed on the page and how many columns per page you can (and this is just one option) divide the number of articles by the number of columns and round it up to the next integer to get the number of articles per column. you then loop through the articles and when the article counter gets to the number of articles per column you reset it to 0 and start a new column div.

    on page load, the javascript would set all the column divs to the height of the tallest column div as per my earlier demo.

    on page load, you can then count how many columns were generated (which will depend on how many articles were required to be displayed) and give them an equal percentage width.

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,966
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds good. I nearly always can handle it with Coldfusion but there are those times when I need an escape route. I will have a look in to this. Thanks

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,021
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    ... since that "print look-and-feel" still rules over web-stuff.
    this is totally wrong, it does no such thing

    for text, the down-one-column-and-back-up-and-down-another-column layout is user-hostile

    just. say. no.

    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it might be for some but definitely not for all.

    there are plenty of 2,3 and I've seen some 4 column layouts as well.

    as long as it's fit for purpose then it's fine imho.

  9. #9
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,966
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ Agree. There are situations where such a layout suit very well, like online classifieds

  10. #10
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,021
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    re: "fit for purpose"

    i would like to see an example of a site which presents text in a multi-column layout that is easy to read

    the purpose, of course, being that you can actually read it comfortably, not that it looks nice
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  11. #11
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    How do you create a web page that has "Newspaper Columns"? (You know, like 2-3 columns across the page.)

    I remember seeing this somewhere online and would like to learn how to incorporate it into my website, since that "print look-and-feel" still rules over web-stuff.
    One thing to bear in mind is that while that kind of layout may look good, it's usually a pain in the wotsit to read - if you have to scroll down the first column, then back up to the top then down the second column, then maybe again for the third column, that's irritating. Articles online should continue in one direction only, so that people don't have to keep going backwards and forwards.

    Trying to emulate 'print look-and-feel' on the web is often going to lead to a poor user experience. On-screen reading is different from print reading, and your design should make the most of that, and play to the strengths of the online medium, rather than trying to slavishly reproduce a design strategy from the print medium that doesn't work as well online.

  12. #12
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,021
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    i wish i would have said it so eloquently

    thanks, stevie d
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  13. #13
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    re: "fit for purpose"

    i would like to see an example of a site which presents text in a multi-column layout that is easy to read

    the purpose, of course, being that you can actually read it comfortably, not that it looks nice
    what in your opinion is difficult to read might not be difficult to read for someone else.

    just like what you might see as a well layed out web page someone else might find irritating.

    at the end of the day all you can do as a web developer is advise a client on what you think is best and give your reasons, but if they insist on a particular layout I will give it to them.

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    what in your opinion is difficult to read might not be difficult to read for someone else.
    Luckily we have the awesomeness known as research and science to tell us the Ultimate Answer to Life, the Universe, and the Usability of Multiple Columns of Text, instead of random opinion birthed from whichever brand of amphetamines we've dumped in our coffee today! The endless arguments can now be put to rest! (*my brand today? TwinLabs)

    http://psychology.wichita.edu/surl/u...72/columns.asp

    But so then, when DOES opinion come in? Here: this is a Sign of the Upcoming Zombpocalypse! Raise your hand if that looked totally excellent and bodacious. If your Inner Designer is salivating at that, give it a good kick.

    Better be hording food and bullets people, the end times are near. As for me, all I want is a "Luddite tool bar" extension for my browser so I can keep CSS on but turn off the more annoying garbage people have been adding to web pages, like text-shadow, transitions & transforms, and making my browser download funky fonts (luckily NoScript seems to block @font-face).

  15. #15
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree in general but if a client insists on a particular layout contrary to my advice, then I will give them their desired layout every time.

    So the client's opinion matters to me - after all, at the end of the project I want them to pay my fee.

    Surely you're not suggesting that as a developer I or any one else must impose on our clients a layout we think is best even if it is not what the client wants?

    I can give you an unconditional 100% guaranatee that I won't ever impose anything on any of my clients.

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Luckily we work in a profession that doesn't have any standards, unlike plumbing, electrical wiring, law, or road building (and it doesn't. If there were standards, we'd have to be certified or licensed to practise). We can write the largest steaming piles of code ever and we can get rich doing it. 12 year olds with ancient copies of FrontPage can get rich doing it. So when I get clients like this I pass them on to someone's nephew who knows how to export some HTML tables from Photoshop. Everyone's happy.

  17. #17
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep , all we have are W3C "Recommendations"

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    ...and most of those are actually even still in DRAFT!

    Hell, recommendations are barely guidelines.

  19. #19
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,966
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by Stomme poes View Post
    unlike plumbing, electrical wiring, law, or road building
    Sometimes I wonder if some of these professions do have standards

  20. #20
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    I'm sure where you are in the world makes a big difference... and who's nephew it is doing the work!

  21. #21
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,966
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  22. #22
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Luckily we have the awesomeness known as research and science to tell us the Ultimate Answer to Life, the Universe, and the Usability of Multiple Columns of Text, instead of random opinion birthed from whichever brand of amphetamines we've dumped in our coffee today! The endless arguments can now be put to rest! (*my brand today? TwinLabs)

    http://psychology.wichita.edu/surl/u...72/columns.asp
    Unfortunately that study has very limited use for general web design. The reason for this is that it has only studied paginated text with short pages of fixed size and no scrolling, whereas a web page is much more likely to have longer passages of variable size that do require scrolling. And I'm willing to bet large sums of kudos that as soon as you introduce vertical scrolling into the mix, the reading time and comprehension for multi-column layouts will plummet compared with a single column.

    this is a Sign of the Upcoming Zombpocalypse! Raise your hand if that looked totally excellent and bodacious. If your Inner Designer is salivating at that, give it a good kick.
    My Inner Designer took one look at that page and jumped off a cliff...

    Seriously, how can one of the biggest and most well known news organisations in the whole entire world produce something that looks so utterly, utterly awful?

  23. #23
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Seriously, how can one of the biggest and most well known news organisations in the whole entire world produce something that looks so utterly, utterly awful?
    They asked a front-end professional to do it, and they were like, no way dudes, and so then they got a $nephew with a copy of {%WYSIWYG%} to do it for them. They got what they wanted. Everyone happy.

  24. #24
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have any problems or issues with NY Times website.

    For me, the layout is very similar to reading a paper newspaper. I don't mind scrolling down to read content, especially when I know it can't be avoided.

    But if I ever have to scroll sideways to see all the content, then that really cheeses me off

  25. #25
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    ...and most of those are actually even still in DRAFT!

    Hell, recommendations are barely guidelines.
    exactamondo

    and that is why we have such a wide variety of opinions on how things should be done and no-one having the authority to say "Right, this is how it will be done" - which partly explains the wide variety in the quality of layout and code in web pages floating around on the www.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •