html layout question

[Jim]

I am trying to layout a new html page.

The 20% of the page on the far left side of the page will be a solid color,
with nothing ever written on it.

The 20% of the page on the far right side of the page will be a solid color,
with nothing ever written on it.

The 60% that remains, the middle of the page, will be white, and all of the
text, in black, will be written on it, aligned with the left side of the
middle of the page.

Could you please tell me how to write that out in html, so that I can begin
to make the page? I've looked all over for a tutorial that has this, but I
can't find one.

I know that this is very basic and very simple for you, and millions of
pages are laid out this way. But, no matter how I try, I can't figure out
how to do it.

All help appreciated with thanks in advance. Jim

 

[Jim]

Thank you for your help....I appreciate it.

I am using:


<div style="width:100%;background:#99CC66;color:inherit;"><div
style="margin:auto;width:60%;background:white;color:inherit;">
<font face="Times New Roman" color=#000000 size="2" align="left">


Everything is ok, except that I can't get the text to align on the left side
of the white area in the middle. It keeps on centering itself.

I've tried several different ways to write it out, but it still ends up
"centered" instead of aligned to the left side of the white area in the
middle.

I almost have this worked out. Your assistance would be appreciated. Thank
You, Jim

 

[dorayme]

Oops, I meant <div style="border-left:20% solid red;border-right:20% solid
red;">stuff</div>

Yes.

Also, btw, this simple thing is not a bad way of introducing an idea for
columning using borders as columns 'within which' but really 'on top of
which' is the content (eg. text). The idea is applied by floating
material over the borders using negative margins.

 

[dorayme]

It doesn't work at all with percentages.
Percentages: N/A
The border's thickness has an explicit value.
But it does work with ems, i.e.:
<div style="border-left:20em solid red;
border-right:20em solid red;">stuff</div>

Yes. Thanks Gus. I should have said:

"No.

But..."

This leaves the OP without a proper answer and my swim and beach time is
coming up now that the sun has finally decided to appear! More later.

 

[dorayme]

I am trying to layout a new html page.

The 20% of the page on the far left side of the page will be a solid color,
with nothing ever written on it.

The 20% of the page on the far right side of the page will be a solid color,
with nothing ever written on it.

The 60% that remains, the middle of the page, will be white, and all of the
text, in black, will be written on it, aligned with the left side of the
middle of the page.

Could you please tell me how to write that out in html, so that I can begin
to make the page? I've looked all over for a tutorial that has this, but I
can't find one.

I know that this is very basic and very simple for you, and millions of
pages are laid out this way. But, no matter how I try, I can't figure out
how to do it.

Actually yes, it is reasonably simple if you use a three col table and
do it something like this:

<http://netweaver.com.au/cols/twentyPercentSides_table.html>

Seems to work in most browsers. It probably even works in IE 6!

Here is a go without tables:

<http://netweaver.com.au/cols/twentyPercentSides.html>

Perhaps this works in IE6?

 

[dorayme]

Actually yes, it is reasonably simple if you use a three col table and
do it something like this:

<http://netweaver.com.au/cols/twentyPercentSides_table.html>

Seems to work in most browsers. It probably even works in IE 6!

Here is a go without tables:

<http://netweaver.com.au/cols/twentyPercentSides.html>

Perhaps this works in IE6?

The truth is that it is not basic or simple at all to do it without
tables. The last url, you will discover, is a bit of an illusion. (I
thought maybe OP would up and scream about it and we could take it from
there <g>. Soon as a fair bit of content is put in, the problems begin
to emerge. A road that leads perhaps inevitably to Mr Ruthersarian! And
his diabolical set of stylesheets and htmls. <g>

<http://netweaver.com.au/cols/twentyPercentSides2.html>

Scroll down!

We can fix the break out of the content under the sides by classing the
content div and margining left and right.

<http://netweaver.com.au/cols/twentyPercentSides3.html>

But, hello, the sides don't go down all the way! They just decide to
stop somewhere as if they have run out of puff! Maybe some browsers give
some of the sides more glucose than other browsers. But my, how those
columns look good when abstracted away from the colours and borders!

We need another approach. But I stop now.

 

[dorayme]

'Tis tricky, indeed. However, check out:

http://www.neredbojias.net/_dems/zzhdem2.html

I believe that suffices. There may be more efficient ways, though.

The most efficient way is to use a table and be done/damned. Does it
work in IE6?

It is slightly similar to something I once played with:

<http://netweaver.com.au/cols/twentyPercentSides4.html> which is a
variation on a three col table layout I was playing with once.

All roads lead to Mr Ruthersarian in the end, at least this is a working
hypothesis... <g>

 

[Chaddy2222]

'Tis tricky, indeed. However, check out:

http://www.neredbojias.net/_dems/zzhdem2.html

I believe that suffices. There may be more efficient ways, though.

I cam up with the following.
http://freewebdesignonline.org/test/test.html
I reduced the width of the content area to 40% so that the padding and
the like would all fit in. I think it looks ok.

 

[Bergamot]

I am trying to layout a new html page.

The 20% of the page on the far left side of the page will be a solid color,
with nothing ever written on it.

The 20% of the page on the far right side of the page will be a solid color,
with nothing ever written on it.

Will it be the same color as the left side?

The 60% that remains, the middle of the page, will be white, and all of the
text, in black, will be written on it, aligned with the left side of the
middle of the page.

If the 20% sides are the same color, set a background-color for body,
and make the content area black on white with width:60%; margin:auto

If they are different colors, it's easy to fake using background images
that repeat on the y-axis. Put one on the html element and another on
the body element and style the content area the same as above.

Make the bg images very wide, like 2000px, and color the end 20% (give
or take a few pixels) whatever you like with the remainder transparent.
The image doesn't need to be very high. I often use about 20px for such
things.

html {
background: #fff url(bg-left.png) 20% 0 repeat-y;
color:#000
}
body {
background-image: url(bg-right.png);
background-position: 80% 0;
background-repeat: repeat-y;
}
..content {
width: 60%;
margin: auto;
background: #fff;
color: #000;
}

Works for me. YMMV of course

 

[Roy A.]

I am trying to layout a new html page.

If you want your site to be accessibel, don't use tables. And
don't use CSS and Div-elements to emulate tables. Make it plane.
Nested
divs isn't better than one single table. Then you can mark your pages
as AAA. (Just install a recent screen reader and "see" for your self).

If you don't want to do that, use the same html structure, and give
the users different stylesheets.

The 20% of the page on the far left side of the page will be a solid color,
with nothing ever written on it.

The 20% of the page on the far right side of the page will be a solid color,
with nothing ever written on it.

If you want the same colors on both sides. It should be easy:

.sides { background-color: ??? }
.content { backgroun-color: #fff; margin: auto 20% }
<div class="sides"><div class="content">content</div></div>

Maybe someone else have given you a better code.

The 60% that remains, the middle of the page, will be white, and all of the
text, in black, will be written on it, aligned with the left side of the
middle of the page.

If you want all columns to be of the same heigts. That would be a
problem.
What you can do is to use tables (no problem for cellurar phones, PDAs
and screen
readers). Just make the height of your html, body and table element
100%. If you
don't think screen readers can understand that, tell those that the
elements
really is block elements (display: block). Every, or most screen
reader
would understand that. I can't think of no that doesn't do that. Even
those
based on IE 6.

Could you please tell me how to write that out in html, so that I can begin
to make the page?  I've looked all over for a tutorial that has this, but I
can't find one.

I suggest that you find a simple tutorial that use one simple table.
And I really
think that would be better for everyone that try to read your site.
Than any
constructon with nested divs.

I know that this is very basic and very simple for you, and millions of
pages are laid out this way. But, no matter how I try,  I can't figure out
how to do it.

Millions of pages is laid out with div-elements, even more millions is
laid out
with tables. Smart people in mozilla, or whatever, have found a way to
render these,
even for disable people. That dosen't mean it can't be don better, but
that's not
the worst accessible problem.

All help appreciated with thanks in advance.          Jim

I don't know if this is of any help. But in case anyone forget. In
this group
htmldog.com is considered best practice. Maybe you will find any help
there.
It's anyway good reading.

 

[Roy A.]

  Search for "3 column layout css".

You mean "3 colomn layout css with equal height css".

In that case, it's better to use a simple table insted.

 

[dorayme]

Heck, that looks almost the same as mine (-well, quite similar, anyway,)
though the content is more complex. Great minds think alike, eh?

Here is an idea for where the content is at least enough to fill most
screen heights. The CSS is simple enough, no images:

html {
background: #cfc;
color: #000
}

body {
margin-left: 20%;
background:#ccf;
color: #000;
}

#content {
margin-right: 25%;
background: #fff;
color: #000;
}

And the HTML is just a div with content. I think I have my maths right?
It should even work in IE6. Here is a demo:

<http://netweaver.com.au/cols/twentyPercentSidesLongContent.html>

 

[Chaddy2222]

Looks pretty good but I think the fixed-height floats are a drawback (-and
give me an unnecessary v. scrollbar.)

I have fixxed that problem.

 

[dorayme]

Whoaaa, it took me a while to figure-out just what you were doing there,
esp. the ref to maths. But yes, it's quite simple and seems to work good,
too. But but, I still like my idea with the 2 divs (-option 2 to OP) if
for no other reason than I can understand it better...

<g>

 

[Jukka K. Korpela]

Scripsit Jim:

I am trying to layout a new html page.

You should probably learn HTML first, and I mean learning, which
includes exercises where you build simple HTML pages without trying any
special "layout". Mentally, design a page so that it can be listened to
smoothly. Later, start considering visual rendering as well.

The 20% of the page on the far left side of the page will be a solid
color, with nothing ever written on it.

The 20% of the page on the far right side of the page will be a solid
color, with nothing ever written on it.

The 60% that remains, the middle of the page, will be white, and all
of the text, in black, will be written on it, aligned with the left
side of the middle of the page.

Could you please tell me how to write that out in html,

Well, you are _asking_ for an HTML solution but you have got CSS-based
suggestions. That's normal on Usenet, and elsewhere. Sometimes the CSS
approach is actually better, but not here. Contrary to popular
propaganda, _simple_ table-based design is not a serious accessibility
problem as compared with doing the same thing in CSS.

So this would answer your question as asked, using green as the solid
color for definiteness:

<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0"
text="black">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" bgcolor="green">&nbsp;</td>
<td width="60%" bgcolor="white"> content goes here</td>
<td width="20%" bgcolor="green">&nbsp;</td>
</tr>
</table></body>

But this would be rather pointless. The content width would be 60% of
window width, so it would be far too wide in a very wide window (say
2000 pixels) and far too narrow in a narrow window (say 400 pixels).
Moreover, doing this in HTML is not wise, since you can achieve this
very simply in CSS:

<style type="text/css">
html { background: green; }
body { margin: 0; padding: 0; }
..body { margin: 0 20%;
background: white;
color: black; }
</style>
<body><div class="body">content goes here</div>
</body>

(The <div> element is really needed just to handle old browsers.)

But a much better approach is to set the content width, or its maximum
width, in em units, letting the margins occupy the rest. You need to
learn the elements of CSS to do this.

so that I can
begin to make the page?

You should being making a page by first considering the purpose ("why,
oh why?") and the intended audience, then designing the logical
structure and writing the content using simple HTML markup. Time
permitting, you can then consider how to style it.

 

[Jim]

This is exactly what I was trying to do.

All that I need to do now is to change the colors of the margins.

I am not used to 3-number/letter colors....all I know are the old ones, like
#FFFFFF.

Where can I find a chart of your 3-number/letter colors? I am looking for a
dark green....think of a golf course or forest.

The margins are perfect....fantastic. Thank you and thanks to all who
contributed to the thread. I truly appreciate it.

Jim

 

[dorayme]

This is exactly what I was trying to do.

All that I need to do now is to change the colors of the margins.

I am not used to 3-number/letter colors....all I know are the old ones, like
#FFFFFF.

Three numbers are just a shorthand notation that browsers accept for
some types of sequences. Thus if each consecutive pair in a 6 digit
color hexadecimal number consist of the same number, then you can just
drop reference to one of them in each pair. Thus #CCC is simply short
for #CCCCCC. Another example, #996633 can be shortened to #963.

These days, there is little need to stick to a short palette of what are
called websafe colours but I often use them anyway because they are easy
to remember. the websafe palette I know consists of all hexadecimal
pairs: 33, 66, 99, CC and FF.

One notation for colours is a six digit hexadecimal number (preceded by
a hash sign). The first two digits represent the amount of red, the
middle two represent green while the last two represent blue.
Hexadecimal digits run from 0 to F, the decimal equivalents being 0 to
15. Thus each digit can be one of 16. Each pair of digits, therefore,
represents 256 possible numbers. Though it is more compact to write FF
than 255, the usual basis for this notation has more to do with the easy
transformations between hexadecimal and binary format, the latter being
the ultimate language of computers.

In this numbering scheme, each pair of hexadecimal digits can represent
one of 256 possible amounts of red, blue or green. The possible number
of colours in this scheme are 256 by 256 by 256. This is close to 17
million colours.

A set of Websafe colours is a subset of 216 colours altogether, set down
as a certain standard supported by almost all browsers, new and old.
These 216 colours are made up of hexadecimal OO, 33, 66, 99, CC and FF.
That is, in decimal, 0, 51, 102, 153, 204, and 255. This is an even
spacing of 20% through 256 possible values of each of red, green or
blue. Thus, the so called web safe colours are a palette made up of 6
possible values of each of red, green and blue (6 by 6 by 6 giving 216).
The 216 colours in this set are made up of 0, 20, 40, 60, 80, or 100% of
red, 0, 20, 40, 60, 80, or 100% of green, 0, 20, 40, 60, 80, or 100% of
blue.

I think this is roughly accurate but it is getting late and I will not
check these words in my usual incredibly thorough manner.

Where can I find a chart of your 3-number/letter colors? I am looking for a
dark green....think of a golf course or forest.

Dark green? How about #006600;?

 

[Lars Eighner]

I am not used to 3-number/letter colors....all I know are the old ones,
#like FFFFFF.

Where can I find a chart of your 3-number/letter colors? I am looking for
a dark green....think of a golf course or forest.

If you have a chart of the six hexadecimal digit colors (they are not really
letters, you know), then you have a chart of the three digit codes. (See
the CSS2 spec, section 4.3.6., or where color values are defined in whatever
spec you are using.)

The three digit forms are simply shorthand for the six digit forms: get the
six digit form by doubling each digit:

#80f = #8800ff
#cff = #ccffff,
and so forth. You can make the conversion and look up the colors on your
six-digit chart.

Although we are way past the days of "web-safe" colors, you still will not
get color match (fidelity) much finer than that which can be expressed in
the three digits. In other words, you cannot expect the difference between
#00ff00 and #00fe00 to be reliably rendered by browsers, so it might as well
be #0f0. Try finding something that reliably renders as bright orange
whether you use six digits or three! There is no reason you cannot use six
digits if you are comfortable with them (or decimal numbers or percentages).

 

[Beauregard T. Shagnasty]

Where can I find a chart of your 3-number/letter colors? I am looking
for a dark green....think of a golf course or forest.

http://www.somacon.com/p142.php

"darkgreen" #006400
"forestgreen" #228B22

 

[dorayme]

Lars Eighner <http://larseighner.com/> (e-mail address removed)
Countdown: 232 days to go.

Don't do it Lars. I will try hard to cheer you up in the next couple of
hundred days to make you see that life is really worthwhile. And I urge
everyone else here to do the same. We have a crisis on our hands and we
must all put away our differences away to help.