HTC U12 Plus review: Hands-on
I want to create a web page that looks like a newspaper article (in columns) with images ideally crossing over columns. It has to be in HTML (i.e. not PDF etc.) and not looking like gibberish word created HTML etc.
I have thought about using CSS columns, but I wondered if there was a way to make content flow between the different columns automatically...
Any help most welcome...
CSS column controlled text can all go horribly wrong very, very quickly if you aren't extremely careful about how you code it.
I did a columned layout for a client a few months ago (at their insistence and against my general advice) and although the end result is visually pleasing, controlling the layout is a pain and the text does not automatically flow from one to another columnn. I came up against several serious issues when attempting this:
1. Variables in different browsers prevented a 100% reliable text overlow from column to column.
3. Attempting a fluid text layout where the page content will automatically scoot from one to another column invariably makes the page break as far as validating your code for accessibility goes.
4. If your page has a fluid layout (which it should) this overcomplicates controlling your text over multiple columns since the coloumns will in turn also be fluid, depending on the screen resolution of your site visitor. Different resolutions mean different page dimensions which affect the available size of the page that the text columns can occupy....
I could go on (and probably would if it wasn't so late an hour) but not one of the solutions I tried or have seen has been entirely satisfactory unless the page is pretty much fixed or you don't mind sacrificing cross-browser and/or accessibility support.
Thanks guys for your help, seems I have a hard task on my hands.
I think I might have to persuade my client that doing it in PDF is the only real option, unless they want it written more like normal web pages.
forum member - the reason i need to do this, is because my client wants to imatate a real newsarticle that appeared in a newspaper, regardless of how much can fit downwards on a webpage.
Anyway, thanks for your help,
If it is a required or desired layout then it is possible to achieve but the most practical way is not to chase after an automatic text overflow. All that does is unnecessarily overcomplicate things and mess up what is otherwise a relatively simple concept.
You can either use specified CSS columns and carefully insert the appropriate amounts of text per column or use a table solution. It takes a bit of jiggery pokery to get it all set out properly but the overall layout is certainly possible - it's just the automated text overflow that you'll be chasing your tail on.
Try these links to get some ideas:
Also keep in mind that only the very latest screenreader software can cope with side-by-side columns of text held in place by CSS. Older versions will not cope at all and so you could end up with a single block of gobbledygook.
For the sake of a safe and predictable result I'd settle on hand tweaking a table layout unless you are very comfortable with CSS coding and have the time to test your creations in all common browsers. A simple table example is as follows:
<TABLE WIDTH="301" CELLPADDING="0" CELLSPACING="5" BORDER="0">
<TD>A newspaper(ish) kind of layout for text columns. Add as many columns as you like, but too many tie your eyes in knots...</TD>
<TD WIDTH="1" BGCOLOR="#000000"></TD>
<TD>Design your page with a simple table and use the centre column to hold a spacer image...</TD>
Paste that into the body of your page and preview it to see a very simple two column layout with a black vertical line dividing the columns.
The concept is simple enough. Adjusting the column content over many pages becomes irritating if the site is large and will require regular updates, but the layout itself is easy enough to achieve. My apologies if I gave the impression in my previous reply that the layout itself was difficult in any way. Obviously, it isn't.
thanks, yeah i know how to put it into table format, i was just wondering if their was another way of making it look even more like a newspaper article, but it doesn;t look like there is. Thanks again for your help :)
thanks fourm member, yes I believe they have permission, i will check... :)
and cells in dreamweaver? I think i did this once.
I have now managed to do what I wanted to, although doesn't look exactly like a newspaper it will do :)
This thread is now locked and can not be replied to.