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.
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.
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.
How to adminstrate two column in back-end, and front-end
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!
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?
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
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?
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
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
is working on a reply...