Newspaper style web page

  james9 21:19 06 Sep 04
Locked

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

Thanks :)

  Pesala 21:59 06 Sep 04

It is very easy to do with Page Plus, but it converts the results to graphics - click here - which is probably not what you want. Certainly makes layout much more flexible and quick thoough.

  Taran 03:00 07 Sep 04

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.

2. A CSS only solution was ultimately impractical and the necessary JavaScript I wrote to attempt a similar control worked nicely, most of the time. Refer to point one for the reasons why it doesn't work ALL of the time.

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.

Keep in mind that producing a site is half of the battle. The real challenge comes in updating it. Try updating a lot of pages where a fluid design controls the page layout and CSS/JavaScript attempts to shoehorn the text copy into multiple columns. It gave me a real headache until I gave it up as a bad job and resorted to tables but the site remains very inconvenient when performing large updates to the content.

For the record, the best results I did get, visually and for cross browser/accessibility, were entirely valid XHTML and CSS with no JavaScript in site, but the text columns were fixed and so you had to manually divide the page content into suitable amounts to fit into the column <div> tags.

  james9 08:49 07 Sep 04

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,

James :)

  Taran 10:33 07 Sep 04

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:

click here

click here

click here

click here

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">
<TR>
<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>
</TR>
</TABLE>

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.

  james9 10:38 07 Sep 04

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 :)

  james9 12:16 07 Sep 04

thanks fourm member, yes I believe they have permission, i will check... :)

  Mr A! 10:51 27 Sep 04

and cells in dreamweaver? I think i did this once.

  james9 12:08 27 Sep 04

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.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

These are the Best Christmas Ads and Studio Projects of 2016

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…