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 3092
In our last episode,
<MP************ ************@nn tp.lucent.com>, the lovely and
talented kaeli broadcast on
comp.infosystem s. 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,_Washin gton 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.h tml>
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.ne t>, a.*********@exa mple.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.h tml> 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************ *********@goodw ill.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.ne t>, a.*********@exa mple.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.h tml> 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.ne t>, a.*********@exa mple.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:relat ive", 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.ne t>, a.*********@exa mple.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 |
============================================
| | | |
| | | |
| left | center | right |
| | | |
| | | |
|
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 and no it can't happen differently) then
the 3rd column overlays itself over the middle column's content. Is there
a css-based 3 column layout without ugly hacks that will give me a 3rd
column as far to the right as need be? Can anyone suggest a...
|
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; border-collapse:
collapse; background: #fff; width: 95%}
table.tbl td { border-bottom: 1px dashed #33ccff; padding: 2px 5px;
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
|
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 blue header and footer. Does
anyone know how to do?
I know I can add float: left; to the content div and it sort of works,
but it doesn't seem right either. In this case the content div and the
side bar div will no longer stay in their...
| |
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 on-point, but no one
responded to it.)
I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus...
|
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 data on the
datasource. It simply gets the first name and last name of an instructor
and displays it in the grid. I have two major problems.... One, it
doesn't display in the column until the row is saved, (Even after
calling a refresh on 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 given the top
row a height of 20 pixels. In firefox, that row always stays 20 pixels
high. The bottom row in the left column and the right column expand if
you add more text to either the bottom left row or the right column.
This does not work in...
|
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 left most column. The width of this should be
variable depending on the size of the browser window. The middle and
right columns should have a fixed width of 200 pixels. I can get the
middle and right columns working as expected. I can't figure out...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |