Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Daniel Horn 319 posts 344 karma points
    Dec 02, 2010 @ 12:58
    Daniel Horn
    0

    How to adminstrate two column in back-end, and front-end

    We are working on a project with two column text layout. Hence the way we use the web versus the way we read books, the columns are read from left to right, like the way we read comics. This is to avoid people to scroll, up and down. The layout has a lot of spacing above and below the columns to indicate that you should read it like this.
    Our markup is at this point build like this:
    <div id="content" class="twoCols">
        <div>Text column #1</div>
        <div>Text column #2</div>
    </div>
    Wether the content is a one (no class), two or three column-designed page, we then add class:
    div.twoCols div {width:50%}
    div.threeCols div {width:33%}
    We would really love to hear from you guys, if any of you have ideas how to do this the most efficient and smart way, or have any ideas how to.
    Thank you in advance.
  • Stuart Burrows 61 posts 110 karma points
    Dec 02, 2010 @ 13:06
    Stuart Burrows
    0

    This can be done with CSS3: http://www.css3.info/preview/multi-column-layout/ really very nice and simple one container that allows the text to flow gracefully. The real issue with columns in my opinion is getting the flow looking nice and logical.

    For browsers without CSS3 support I would then use some javascript such as: http://www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column. Finally for those few people who have neither CSS3 nor javascript the text would appear as one column which is a pretty good compromise in my eyes.

    That's how I would do it anyway - keeping the markup as simple and logical as possible and using CSS and javascript to affect the layout.

    Hope that helps!

  • Daniel Horn 319 posts 344 karma points
    Dec 02, 2010 @ 14:41
    Daniel Horn
    0

    Thanks Stuart, but the question is how to make it easy for the user to see it in the backend how its setup in the frontend.

    Is it possible to set the backend up so that it looks like the frontend?

  • Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib
    Dec 02, 2010 @ 14:55
    Jeroen Breuer
    0

    You could try to use Canvas editing for this: http://videochatisnotmagical.umbraco.org/documentation/books/introduction-to-canvas. This way the user can see what he's editing.

    Jeroen

  • Daniel Horn 319 posts 344 karma points
    Dec 02, 2010 @ 15:39
    Daniel Horn
    0

    Hi Jeroen,

    Were thinking about that, but there is so many issues with it so it's not OK yet.. 

    And I can't get it to work with umb4.5.2 and .NET4?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Dec 02, 2010 @ 23:25
    Jan Skovgaard
    0

    Hi Daniel

    I think Canvas requires all of your content inside the <body></body> is wrapped inside a <form runat="server"></form>...

    So your HTML would look like this

    <body>

    <form runat="server"><!-- rest of your HTML goes here--></form>

    </body>

    Is this helping?

    A comment on the suggestion from Stuart...dependent on your target audience you could use the multi-column-layout (I would go for it) and the use the modernizr script to make an alternate view for those using browsers that don't support multi-column-layout.

    /Jan

  • Daniel Horn 319 posts 344 karma points
    Dec 02, 2010 @ 23:53
    Daniel Horn
    0

    Hi Jan,

    Thanks for your reply

    I've got it working, it need first of all <form id="form1" runat="server">html</form>

    Then also it doesnt work on recursive fields so a bit tweaking there also, but its actually running okay now.

    We are still thinking about the best way, will look into your suggestion

    /Daniel

Please Sign in or register to post replies

Write your reply to:

Draft