473,326 Members | 1,972 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Newspaper layout, floating boxes?

Hello,

Several of the newer, more professional web sites are using a newspaper
columnar layout, with text and links discretely contained in rectangular
boxes (square or rounded), frequently with colored 'Title' tabs at the
top.

How are these boxes generated, are they using 'floating boxes'
juxtapositioned to create the layout effect?

Thanks
Jul 14 '08 #1
5 6733
On 14 Jul, 12:47, Adam Smith <adamsm...@econ.comwrote:
Hello,
Several of the newer, more professional web sites are using a newspaper
columnar layout, with text and links discretely contained in rectangular
boxes (square or rounded), frequently with colored 'Title' tabs at the
top.
Example URL?

"Newspaper" columns have a specific meaning, as side-by-side columns
where the text is flowed first down one, then the others. You can't do
this with CSS, and there are usability reasons why it's not
appropriate to do so on the web anyway (newspapers need to remain
broadly squareish, web pages scroll better if they only need to do it
in one direction,. no matter how long). It's doable for print with
XSL:FO.

What you're describing here sounds like fairly simple use of "float"
on a <div(quite probably invisible) that contains the whole
malarkey. Images, captions and borders can be applied inside this, as
separate elements. You should probably also require all of these to be
placed inside an overall "content" <div>. You can now place a class on
each in the HTML and use a CSS selector on the two class names, such
as:

..content .figure {
float: left;
clear: none;
margin: 0 20px 3em 0px;
width: auto;
}

If you want the figure box to flip to the other side, add a second
class name to it (both names in the same HTML class attribute) and CSS
like this:

..content .figure.float-right {
float: right;
margin: 0 0px 3em 20px;
}
Text alongside these boxes can just go into a <p>, as normal. You
shouldn't need to style these specially, but just make sure the float
& clear aren't otherwise in effect, with:

..content p {
float: none;
clear: none;
}

You'll also need to "clean up after" the floated elements by placing
an _extra_ element such as <hrafter them and setting CSS float:
none; clear : both; on it. Do this before the end of <div
class="content" >

..content hr {
clear: both;
float: none;
height: 0;
border: none;
visibility: hidden;
}
http://brainjar.com/css/positioning/ is about the best and most
readable introduction to CSS positioning, particularly float.

In simple cases, one <divcan hold each <imgand also handle the
floating. If you need more precise control over caption position etc.
though, don't be afraid to place extra elements inside this. It's
easier to do simple things to more elements than it is to try and do
everything on one element alone.
Jul 14 '08 #2
Andy Dingley wrote:
On 14 Jul, 12:47, Adam Smith <adamsm...@econ.comwrote:
>Hello,
>Several of the newer, more professional web sites are using a newspaper
columnar layout, with text and links discretely contained in rectangular
boxes (square or rounded), frequently with colored 'Title' tabs at the
top.

Example URL?
>
http://brainjar.com/css/positioning/ is about the best and most
readable introduction to CSS positioning, particularly float.

In simple cases, one <divcan hold each <imgand also handle the
floating. If you need more precise control over caption position etc.
though, don't be afraid to place extra elements inside this. It's
easier to do simple things to more elements than it is to try and do
everything on one element alone.
Hi Andy,
Thanks ! you answered my question admirably

The example I should have included was
http://www.msn.com/
A typical an good example where it is used extensibly.

Thanks again
Jul 14 '08 #3
On Mon, 14 Jul 2008 13:22:48 -0700, Adam Smith <ad*******@econ.com>
wrote:
>The example I should have included was
http://www.msn.com/
You might also find this helpful
http://codesmiths.com/dingbat/lj/usenet/pullquote/
Jul 15 '08 #4
Andy Dingley wrote:
On Mon, 14 Jul 2008 13:22:48 -0700, Adam Smith <ad*******@econ.com>
wrote:
>The example I should have included was
http://www.msn.com/

You might also find this helpful
http://codesmiths.com/dingbat/lj/usenet/pullquote/
Was this link the intended target ? it showed
ref Usenet alt.html

The latter, by far the most radical, would, for example, prevent Cara
Black from defending her women's doubles title at Wimbledon.

But the Prime Minister's spokesman said on Tuesday that No 10 had been
"surprised" by the report suggesting that Gordon Brown was considering a
ban. ...

Jul 15 '08 #5
On 15 Jul, 04:02, Adam Smith <adamsm...@econ.comwrote:
Andy Dingley wrote:
On Mon, 14 Jul 2008 13:22:48 -0700, Adam Smith <adamsm...@econ.com>
wrote:
The example I should have included was
http://www.msn.com/
You might also find this helpful
http://codesmiths.com/dingbat/lj/usenet/pullquote/

Was this link the intended target ? it showed
ref Usenet alt.html
Yes. Obviously (this being a Usenet geek group) I meant "read the
source code", not "read the visible lorem ipsum text"!
Jul 15 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Brandons of mass destruction | last post by:
Ok, I work for a small newspaper thats looking to translate our content to the web. XML sounds like a good way to do this, but i'm a little confused. Is it possible to have <b> and <i> tags in...
14
by: Adam Smith | last post by:
Hello, I've been trying to figure out how the columnar newspaper page layout is achieved in web pages, say at http://home.netscape.com/ or http://home.netscape.com/ . With the solid vertical &...
21
by: Amy | last post by:
Hello all, Well, I've decided to take the plunge and go for this no table theory... so far I'm not impressed - the whole thing is driving me mad!!!! I'm sure once I finally get it working...
8
by: Peter Maas | last post by:
given 3 boxes, where box1 contains box2 and box3, box1.width = box2.width + box3.width and box1.height = max(box2.height, box3.height): +-------------+ |+----++-----+| || || || || ...
11
by: :o) | last post by:
Does anyone know a (better) way to automatically adjust "newspape style" columns to window-resize? See old discussion o stylesheets-forum:...
9
by: WeshaTheLeopard | last post by:
Hi all, I have to admit that I'm completely at loss trying to implement the following layout: +-----------document---------+ | | | +--box1---+ +--box2---+ |...
9
by: Xavier van Unen | last post by:
Hi guys and gals, I'm working on a 2 column CSS layout (for an ordering system) in which it isn't a priori known which of the two columns will be the longest, that depends on the (script...
27
by: FuzzyLogik | last post by:
http://phazm.net/csstest/index2.html I'm trying to make the thumbnails fit to the width of the page, so there are 3-4 in each row, but when you resize, I want it to basically flow with the page,...
4
by: Ivor Somerset | last post by:
Dear CSS community, The code below shows my problem. I have a containing DIV box into which I place floating boxes. As the background-color shows, the size of the containing box is not extended...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.