Re: A couple of easy, but not for me, questions.
by "Ryan Fischer" <fischer(at)email.unc.edu>
|
| Date: |
Sat, 27 Jun 1998 18:54:42 -0400 |
| To: |
"B. Szyszka" <bart(at)bgrafyx.com>,
"Frank Boumphrey" <bckman(at)ix.netcom.com>,
"Peter Williams" <peter.williams(at)hendersons.com.au>,
<Mistarr(at)ix.netcom.com>,
<hwg-theory(at)hwg.org> |
| |
todo: View
Thread,
Original
|
|
Bart wrote:
>I don't believe there is anything adequate provided by CSS1 that allows a
web site to be laid out in terms of rows and columns.
Sure there is. Absolute positioning serves this purpose quite well. Copy
the following HTML into an HTML file, view it in a "regular" browser, then
view it in IE4 and you'll see what I mean:
Note: I used JavaScript to write the CSS to the page because absolute
positioning only works "right" in IE4.
<!-- Start copying here -->
<HEAD>
<SCRIPT TYPE="text/javascript">
<!--
var ie4=document.all;
if(ie4) document.write('<STYLE TYPE="text/css"><!--BODY {margin: 10px}.sub
{color: #EEE; font-weight: 0; text-align: center; z-index: -1}.menu, .body,
.title, .sub {position: absolute}.menu {left: 10px; top: 60px; width:
200px}.body, .sub {left: 220px; top: 60px} /* left = 200 + 10 + 10 */.body
{line-height: 1.8em; text-align: justify}.title {left: 0px; top: 0px;
height: 40px; text-align: center}--></STYLE>');
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1 CLASS="title">CSS Positioning Example</H1>
<DIV CLASS="menu">
<MENU>
<LI>First item goes here!
<LI>And of course, the second item goes here!
</MENU>
</DIV>
<DIV CLASS="body">
<P>The rain in Spain falls mainly on the plain. (You are getting sleepy.)
The quick brown fox jumped over the lazy dog. The wheel is spinning, but
the hamster is dead. There is no confusion like the confusion of a simple
mind. I am Tiger Woods. (You are getting very sleepy!) You know, that
lights are on, but no one's home. The Internet is a great way to get on the
Web. (Or... is that the other way around?)
Supercalafragilisticexpialadocious! (sp?!)</P>
</DIV>
<SCRIPT TYPE="text/javascript">
<!--
if(ie4) document.write('<DIV CLASS="sub"><BR> <BR>Subliminal messages.
Subliminal messages begin here: (For lack of creativity: <!--#message
type="subliminal.txt"--> Subliminal messages end here.
</DIV>'.fontcolor('white'));
//-->
</SCRIPT>
</BODY>
<!-- Stop copying here -->
As you can seen, through absolute positioning you can create the same effect
as TABLEs produces, without all the mess an loading time, AND the page has
the capability of displaying fine in other browsers besides IE4. Pretty
neat huh? If anyone would like to learn more about absolute positioning
(especially in complex situations), let me know and I'll try to help in any
way I can. Any questions?
>A good web site is the balance of content and design, not just content and
not just design.
This is very true.
>The design aids the user with navigating the content, readability, flow,
etc.
>One column is not very user friendly, or very efficient. Two or more are.
This is not. CSS is quite capable of producing multi-column text as well.
Unfortunately, no browser (save possibly IE5) supports this block-level
attribute yet. IMO, multi-column text just makes things more difficult for
the user. Pages with three and sometimes four columns layout-wise may look
nice but usually always end up confusing more then helping matters
(especially where navigation, and even readability, is concerned).
>Any thoughts/comments/suggestions? I suggest that responses to this
>message be sent to the -Theory list, rather than -Techniques, since it's
>more appropriate for these types of "phylosophical" discussions. : )
Alright, I'll send this to the -theory list. Again, any questions? HTH!
;-)
-Ryan Fischer
ICQ UIN - 595003
fischer(at)email.unc.edu
HWG hwg-theory mailing list archives,
maintained by Webmasters @ IWA