I have had a little free time lately to revisit a problem I have with the 3
column layout plus a header and footer.
See this example: http://glish.com/css/7.asp
There is a header and 3 columns. Pretend there's a footer at the bottom, too.
:)
Here are the issues I have been unable to solve without tables _somewhere_
(even if it's just one containing table):
1. Increase the font size twice. You'll see that the text now overflows the
layers and looks like hell.
2. Make the window smaller. The layers eventually overlap each other instead
of the browser displaying a scroll bar.
3. Take that example and in any of the columns, put something that doesn't
fit. A wide table, large image, a bunch of letters with no spaces, or
something unsplittable like that. It overflows the div instead of stretching
as a table would.
The "solutions" I have found to these issues have broken other things. For
example, if you make one or two of the divs float, when the window is too
small for all 3 to be next to each other, they wrap to the bottom. Ick.
This gets even worse when you start nesting things inside. If you force a
font size, that prevents users from being able to read the page if they are
visually impaired. And so on.
Has anyone found/wrote CSS that will behave as nicely as tables do for layout
in situations like this? I assume it would be rather ugly and complicated
with several nested layers, but I have yet to figure out a design (cross-
browser 3 column plus header/footer) that doesn't eventually break from
something, whether it be putting something too large inside, changing the
window size, or increasing the font size.
Keep in mind that I don't want scroll bars inside the divs. They should
stretch like table cells do. Resizing, content, and other such things should
not break it.
--
--
~kaeli~
A boiled egg in the morning is hard to beat. http://www.ipwebdesign.net/wildAtHeart http://www.ipwebdesign.net/kaelisSpace 8 3068
In our last episode,
<MP************************@nntp.lucent.com>, the lovely and
talented kaeli broadcast on
comp.infosystems. www.authoring.stylesheets: Has anyone found/wrote CSS that will behave as nicely as tables do for layout in situations like this? I assume it would be rather ugly and complicated with several nested layers, but I have yet to figure out a design (cross- browser 3 column plus header/footer) that doesn't eventually break from something, whether it be putting something too large inside, changing the window size, or increasing the font size.
I think it has been shown to be impossible by someone. And
after all, everything will break if you open in Netscape 4.x
and resize your window to 253x489.
I really like skidoo_too, although it takes lots of hacks (of
which I seem to have broken many). The main thing is, it puts
the middle column first, so a page reads right (content first)
if you turn off styles or use a text browser. That allows you
to make the HTML document unbroken. The business of having to
munge your sound HTML document to make it fit some style is
clearly backwards - and degrading gracefully to text mode is
worth something.
It seems to me the theory of skidoo_too is right: basically
it swells the left and right *borders* of the main, and puts
the sidebars on the borders. And that really is what 3col
with header and footer is - the sidebars, header, and footer
really are borders of the main.
Keep in mind that I don't want scroll bars inside the divs. They should stretch like table cells do. Resizing, content, and other such things should not break it.
I don't think that is really possible in the extreme. Extreme
shrinking will, after, break even 1col docs.
--
Lars Eighner ei*****@io.com http://www.larseighner.com/
War on Terrorism: Bad News from the Sanity Front
"Tactical nuclear capabilities should be used against the bin Laden
camps in the desert of Afghanistan." -Thomas Woodrow,_Washington Times_
kaeli wrote: Has anyone found/wrote CSS that will behave as nicely as tables do for layout in situations like this?
Sure.
Scroll down and pick the "Three Columns with Footer".
<http://webhost.bridgew.edu/etribou/layouts/index.html>
This layout puts the two sidebars linearly ahead of the content, which
I would rather avoid.
Toby Inkster's 3-col puts the content first in the HTML, but a footer
must be within the content column. Not too bad, actually.
<http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html>
With a footer:
<http://home.rochester.rr.com/bshagnasty/test/stale.html>
I assume it would be rather ugly and complicated with several nested layers,
Certainly less complicated and ugly than a bunch of nested tables.
but I have yet to figure out a design (cross- browser 3 column plus header/footer) that doesn't eventually break from something, whether it be putting something too large inside, changing the window size, or increasing the font size.
There is probably no solution that won't break in some fashion. Even
tables break when you try to, for example, view on some mobile phones
or PDAs. These CSS layouts should solve that problem.
--
-bts
-This space intentionally left blank.
In article <3a*************@individual.net>, a.*********@example.invalid
enlightened us with... Scroll down and pick the "Three Columns with Footer". <http://webhost.bridgew.edu/etribou/layouts/index.html> This layout puts the two sidebars linearly ahead of the content, which I would rather avoid.
I would, too.
Content-wise, it should be
-header
-left
-content
-right
-footer
(I often put navigation on the left, so it should display first)
Toby Inkster's 3-col puts the content first in the HTML, but a footer must be within the content column.
That's the problem.
It should not be. It's a footer and the actual html content should be last in
case CSS is turned off.
<http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html> With a footer: <http://home.rochester.rr.com/bshagnasty/test/stale.html>
That's not overly nice.
A footer should be just like the header. Except at the bottom. I assume it would be rather ugly and complicated with several nested layers, Certainly less complicated and ugly than a bunch of nested tables.
That's debatable. I can do the tables in 5 minutes. ;) There is probably no solution that won't break in some fashion. Even tables break when you try to, for example, view on some mobile phones or PDAs. These CSS layouts should solve that problem.
That would be one of the reasons I want to move to CSS. The other is because
of text to speech browsers that can't handle table layouts. I know everything
can break, but I'd prefer it not be so easy to do as common actions like
resizing.
--
--
~kaeli~
Is it possible to be totally partial? http://www.ipwebdesign.net/wildAtHeart http://www.ipwebdesign.net/kaelisSpace
In article <sl*********************@goodwill.io.com>, ei*****@io.com
enlightened us with... I don't think that is really possible in the extreme. Extreme shrinking will, after, break even 1col docs.
I'm not talking extremes.
I'm talking normal user action (and those still stuck with 600x400) and
allowing the user to customize their browser (such as having the sidebar
open, extra plugins or toolbars that take up browser window space, or
whatnot) without my page suffering from it.
If some guy needs the font-size on the largest setting it goes to in order to
read the screen, I don't want it killing my layout.
You know?
I'm not looking for perfection any more than I already have with tables.
--
--
~kaeli~
Murphy's Law #2030: If at first you don't succeed, destroy
all evidence that you tried. http://www.ipwebdesign.net/wildAtHeart http://www.ipwebdesign.net/kaelisSpace
kaeli wrote: In article <3a*************@individual.net>, a.*********@example.invalid enlightened us with...
Scroll down and pick the "Three Columns with Footer". <http://webhost.bridgew.edu/etribou/layouts/index.html> This layout puts the two sidebars linearly ahead of the content, which I would rather avoid. I would, too. Content-wise, it should be -header -left
Except for visitors using readers, who probably don't want to listen
to the navigation over and over again. I like content first.
-content -right -footer (I often put navigation on the left, so it should display first)
Display yes, but not to be read aloud. Toby Inkster's 3-col puts the content first in the HTML, but a footer must be within the content column.
That's the problem. It should not be. It's a footer and the actual html content should be last in case CSS is turned off.
I agree, and we were trying to figure out how to get the footer below,
in Toby's layout. Not successful, so far. <http://home.rochester.rr.com/bshagnasty/test/3colcssbytoby.html> With a footer: <http://home.rochester.rr.com/bshagnasty/test/stale.html>
That's not overly nice. A footer should be just like the header. Except at the bottom.
I assume it would be rather ugly and complicated with several nested layers,
Certainly less complicated and ugly than a bunch of nested tables.
That's debatable. I can do the tables in 5 minutes. ;)
I can do 3-col CSS in .. two minutes. <lol> There is probably no solution that won't break in some fashion. Even tables break when you try to, for example, view on some mobile phones or PDAs. These CSS layouts should solve that problem.
That would be one of the reasons I want to move to CSS. The other is because of text to speech browsers that can't handle table layouts. I know everything can break, but I'd prefer it not be so easy to do as common actions like resizing.
Resizing doesn't break either of the samples above ... they both seem
to work rather well down to about 550-600 px wide, or with text
resized to 130% or so. There are practical limits, of course.
--
-bts
-This space intentionally left blank.
In article <3a*************@individual.net>, a.*********@example.invalid
enlightened us with... Except for visitors using readers, who probably don't want to listen to the navigation over and over again. I like content first.
I don't suppose you can recommend a good reader I can install so I can
experience sites that way to see what's it's like?
I'm doing this all on a what-I-like notion, and everyone is a little
different. Doubly-so when using a whole 'nother UA.
I don't like navigation last (i.e. on the bottom) when I'm browsing, but I
suppose if I heard it over and over I'd get tired of it pretty quick. That's the problem. It should not be. It's a footer and the actual html content should be last in case CSS is turned off.
I agree, and we were trying to figure out how to get the footer below, in Toby's layout. Not successful, so far.
Other than that, I liked the layout and it didn't break with "normal" usage
like resizing text and stuff.
It's pretty simple to do a header/content/footer layout with CSS that works
well. Even header/2 column/footer I got working nicely. It's just the 3
column one I can't seem to get. I'm glad other people haven't gotten it yet
if only because that means I'm not as dumb as I was thinking.
Don't say it. :p
--
--
~kaeli~
A lot of money is tainted - It taint yours and it taint mine. http://www.ipwebdesign.net/wildAtHeart http://www.ipwebdesign.net/kaelisSpace
> Here are the issues I have been unable to solve without tables _somewhere_ (even if it's just one containing table):
There is another problem with IE (5.5 and 6, but not 5.0) that is not
obvious in your example. If the 3-column layout is placed inside another
div with "position:relative", IE places the first column inside the second
column's left border instead of the containing div's left border.
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
kaeli wrote: In article <3a*************@individual.net>, a.*********@example.invalid enlightened us with...
Except for visitors using readers, who probably don't want to listen to the navigation over and over again. I like content first. I don't suppose you can recommend a good reader I can install so I can experience sites that way to see what's it's like? I'm doing this all on a what-I-like notion, and everyone is a little different. Doubly-so when using a whole 'nother UA.
Don't have any aural browsers installed myself; I tend to rely on what
a text-only browser will display. The Lynx viewer will give you a good
approximation of what a reader will read (and what the Googlebot will
index): http://www.delorie.com/web/lynxview.html
...or Opera, which has several non-graphical display modes.
I don't like navigation last (i.e. on the bottom) when I'm browsing, but I suppose if I heard it over and over I'd get tired of it pretty quick.
In a graphical display, it doesn't matter where in the linear order of
the HTML the nav links appear, so long as you display them in the
visual browser where you like them, usually on the left. That's the problem. It should not be. It's a footer and the actual html content should be last in case CSS is turned off.
I agree, and we were trying to figure out how to get the footer below, in Toby's layout. Not successful, so far.
Other than that, I liked the layout and it didn't break with "normal" usage like resizing text and stuff.
It's pretty simple to do a header/content/footer layout with CSS that works well. Even header/2 column/footer I got working nicely. It's just the 3 column one I can't seem to get. I'm glad other people haven't gotten it yet if only because that means I'm not as dumb as I was thinking. Don't say it. :p
For some reason, the 3-col has an elusive solution. 2-col is simple to
put header/content/nav/footer in linear order.
--
-bts
-This space intentionally left blank. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Peter Diedrich |
last post by:
The site design is pretty simple:
============================================
| Head |
============================================
| | ...
|
by: Zak McGregor |
last post by:
Hi all
I have a simple 3 column css layout here:
http://www.carfolio.com/newlook.dhtml
However, when the centre column is wider than the screen (yes, it does
happen on some pages on the site...
|
by: Tammy |
last post by:
What would be a good alternative to using frames? I need something
that will section my webpage into two halves and can change both
frames on a single click.
Thanks in Advance,
Tammy
|
by: Jean Pion |
last post by:
Dear readers,
Can anyone explain how to set column width of a table in ccs.
I use the following style in an external stylesheet:
table.tbl { table-layout:fixed; border-top: 5px solid #333;...
|
by: Ed |
last post by:
The page I'm working on is at http://www.coldpizzasoftware.com/temp/layout.html
I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the...
|
by: Tamblyne |
last post by:
This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post...
|
by: Aaron Smith |
last post by:
Ok. I have a dataset that has multiple tables in it. In one of the child
tables, I have a column that I added to the DataSet (Not in the
DataSource). This column does not need to be stored in the...
|
by: sethp |
last post by:
I have a question about table layout in IE. I have a table with two
columns. The left column has two rows and the right column has 1 row
that has a column span of 2. In the left column I have...
|
by: Yofnik |
last post by:
Hello All,
If this is not the appropriate group for this post, please point me in
the right direction.
I am trying to create a layout that has three main columns. The
primary content is the...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
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...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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....
|
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...
| |