Need help to design my homepage with div's

[Manny]

Hi,

I am new to dhtml (html+css). I would like to redesign my site using <div>
tags and styles.
I know how to do it with frames or tables but I did not succed with div's.
In addition, I would like that the site would work for all major browsers
and platforms, even if javascript is not activated.
Would someone be so kind to suggest me how to do it ? Here is, with tables,
the design I need :

<table width="760px" align="center">
<tr><td colspan="2" height="100px">my menu goes here</td></tr>
<!-- if this top part could be fixed at top of the screen when scrolling, it
would be nice -->
<tr><td width="25%" height="100%>several small information text here</td>
<td width="75%" height="100%>main text here</td></tr>
<tr><td colspan="2" height="40px">my navigation goes here (bottom of
page)</td></tr>
</table>

TIA for your help...

 

[Lauri Raittila]

Hi,

I am new to dhtml (html+css). I would like to redesign my site using <div>
tags and styles.

I can see. It would be best to learn some very basics of HTML first. Then
some basics of CSS. Anyway, you should first make your site to have good
HTML, and then apply some CSS to make it look like you want.

I know how to do it with frames or tables but I did not succed with div's.

Obviously, you learned couble hard ways to do layout. You don't need to,
and it is very hard to think layout before you have any content, when you
make it in proper way.

In addition, I would like that the site would work for all major browsers
and platforms, even if javascript is not activated.
Would someone be so kind to suggest me how to do it ? Here is, with tables,
the design I need :

<table width="760px" align="center">

Well, that is in CSS terms

body {display:table;margin:auto}

It is good design choise to not specify width. You archieve it in strange
way though. (using wrong value for width)

<tr><td colspan="2" height="100px">my menu goes here</td></tr>
<!-- if this top part could be fixed at top of the screen when scrolling, it
would be nice -->

If you were using table layout, you shouldn't be using it like this...
position:fixed would do fixing thing, but it would only be good in IE, as
it doesn't support it

Good thing you are not doing fixed height design. Nothing this far to be
done.

<tr><td width="25%" height="100%>several small information text here</td>

What information? Anyway, you need a div, and then you need to float it
left. If you were doing table layout correctly, you would use align=left.

div#left {width:25%;float:left;display;table;}

Dislay:table is there as you don't want your content to get clipped.

<td width="75%" height="100%>main text here</td></tr>

Nothing need to be done.

<tr><td colspan="2" height="40px">my navigation goes here (bottom of
page)</td></tr>

Ok, add clear:left in CSS on element which contains your navigation.

That should be all you need, exept of course the real markup, which you
doesn't seem to have. Make a test page, and come back if it doesn't work.

 

[Manny]

I can see. It would be best to learn some very basics of HTML first. Then
some basics of CSS. Anyway, you should first make your site to have good
HTML, and then apply some CSS to make it look like you want.
div's.

Obviously, you learned couble hard ways to do layout. You don't need to,
and it is very hard to think layout before you have any content, when you
make it in proper way.

Ok, maybe my english was not very good. I already designed and created my
site 6 years ago with tables, fonts and frames tags. Now, I want to learn
the new techniques of element placement with divs and css.

This example with table was just to give an idea of the design I try to
realize (i.e. fixed width of 760, even if window is larger or narower; top
of page with fixed height to display title of site and menu; left column 25%
of the width -190px-; right column 75% of the width -570px-; bottom of page
to display navigation links and copyright). In fact, I want to get rid off
tables and fonts and frames and keep only divs and css styles for the new
design :

X is scrollbar. Display of the browser window and the design inside :
_______________________________________________
| +-----------------------------------------+ |X|
| | title and menu here |
|X|
| +-----------------------------------------+ |X|
| | | |
|X|
| | short | main text display here |
|X|
| | info | |
|X|
| | text | |
|X|
| | | |
|X|
| | | |
|X|
| | | |
|X|
| | | |
|X|
______________________________________________|X|
| | |
| | |
| | |
| | |
+-----------------------------------------+
| navigation links |
+-----------------------------------------+

Well, that is in CSS terms
body {display:table;margin:auto}

It is good design choise to not specify width. You archieve it in strange
way though. (using wrong value for width)

I do not want to use tables anymore.

If you were using table layout, you shouldn't be using it like this...
position:fixed would do fixing thing, but it would only be good in IE, as
it doesn't support it

Good thing you are not doing fixed height design. Nothing this far to be
done.

What information? Anyway, you need a div, and then you need to float it
left. If you were doing table layout correctly, you would use align=left.

div#left {width:25%;float:left;display;table;}

Dislay:table is there as you don't want your content to get clipped.


Nothing need to be done.


Ok, add clear:left in CSS on element which contains your navigation.

That should be all you need, exept of course the real markup, which you
doesn't seem to have. Make a test page, and come back if it doesn't work.

what do you mean by "real markup" ?

 

[Lauri Raittila]

Ok, maybe my english was not very good. I already designed and created my
site 6 years ago with tables, fonts and frames tags. Now, I want to learn
the new techniques of element placement with divs and css.

I got it. You were doing bad table layouts for 6 years, and now want to
change. That is good. I did the same for about 5 years. Then I did 1 year
of good table layout. As you never did table layout right, you propably
ever used much real structural markup in your HTML. To do CSS layout,
that is essential, you shouldn't do it without.

Make some scetch using hX elements, p elements, ul and ol, a and img.
Then start thinking about layout. You wanted very simple layout, there is
basically not much to do on it. Well, maybe example helps:
http://www.student.oulu.fi/~laurirai/www/css/examples/float2col.html
(that is bit too complicated)

This example with table was just to give an idea of the design I try to
realize (i.e. fixed width of 760, even if window is larger or narower; top
of page with fixed height to display title of site and menu; left column 25%
of the width -190px-; right column 75% of the width -570px-; bottom of page
to display navigation links and copyright). In fact, I want to get rid off
tables and fonts and frames and keep only divs and css styles for the new
design :

What you don't get is that I already gave you all information you would
need. As you don't have any structured HTML to tag it, you don't of
course see it.

X is scrollbar. Display of the browser window and the design inside :

[snipped useless ascii drawing done in non-fixed width font]
[snipped my reply fullquoted and uncommented - obviouly you didn't even read it. ]
[please use shorter, about 72 char line width in posting in future]

 

[dorayme]

[please use shorter, about 72 char line width in posting in future]

Is there some setting in Outlook Express to do this automatically?

dorayme

 

[Els]

From: Lauri Raittila <[email protected]>

[please use shorter, about 72 char line width in posting in future]

Is there some setting in Outlook Express to do this automatically?

Yes, there is. Go look under options.
I have the Dutch version, so translation may be different, but it's
the fourth menu item from the left, then the bottom one of that
dropdown, then the fourth tab on the second row, then the third of 5
larger buttons ;-)
(all this based on OE under WinXP)

 

[dorayme]

From: Lauri Raittila <[email protected]>

[please use shorter, about 72 char line width in posting in future]

Is there some setting in Outlook Express to do this automatically?

Yes, there is. Go look under options.
I have the Dutch version, so translation may be different, but it's
the fourth menu item from the left, then the bottom one of that
dropdown, then the fourth tab on the second row, then the third of 5
larger buttons ;-)
(all this based on OE under WinXP)

Thanks for this. It seems that my Mac OE 5.02 does not have these options?
Tried a fancier newsreader but it played up and OE seems easier. I might
have to investigate this issue further. I have been concerned that text gets
wrapped properly... I know that when I am quoted back, it is sometimes not
right in respect to wrapping and would like to ensure that it is not fixable
at my end.

I will keep your advice for a windows PC that I occasionally use.

dorayme

 

[Els]

From: Lauri Raittila <[email protected]>

[please use shorter, about 72 char line width in posting in future]

Is there some setting in Outlook Express to do this automatically?

Yes, there is. Go look under options.
I have the Dutch version, so translation may be different, but it's
the fourth menu item from the left, then the bottom one of that
dropdown, then the fourth tab on the second row, then the third of 5
larger buttons ;-)
(all this based on OE under WinXP)

Thanks for this. It seems that my Mac OE 5.02 does not have these options?

No idea really - never even seen a Mac OE version. Last time I
actually saw a Mac and was allowed to touch it, was in 1988, and all I
remember is Filemaker and that we used the 'printer is occupied'
network messages to IM from one room to another

Can't believe Mac OE wouldn't have such a setting though. If it helps,
the below instructions lead to the 'text only' settings for 'e-mail',
under the tab that deals with 'composing' messages.

Tried a fancier newsreader but it played up and OE seems easier. I might
have to investigate this issue further. I have been concerned that text gets
wrapped properly... I know that when I am quoted back, it is sometimes not
right in respect to wrapping and would like to ensure that it is not fixable
at my end.

That in itself isn't fixable on your end, you can help making it
happen less often though. If your lines are too long, a proper
newsreader will rewrap them when someone hits reply. When they're
short enough, even the not so proper newsreaders will show them
correctly, cause they don't need to be rewrapped. That is, until a
couple of people have replied and not snipped your message yet.

I will keep your advice for a windows PC that I occasionally use.

 

[dorayme]

No idea really - never even seen a Mac OE version. Last time I
actually saw a Mac and was allowed to touch it, was in 1988, ...

Yes, well I am sure people would let you come a bit closer now and even (if
supervised) touch their Macs. Now that you are better known! We don't allow
just anyone to handle these Rolls Royce machines...

Can't believe Mac OE wouldn't have such a setting though. If it helps,
the below instructions lead to the 'text only' settings for 'e-mail',
under the tab that deals with 'composing' messages.

Yes, I did also look under "compose" and "text" options (they are in a
different place on the Mac version) but saw nothing about setting char line
width.

dorayme

 

[dorayme]

Here is what a message looks like in the context of the OE window with
sidebar on a 15" portrait monitor:
http://dorayme.150m.com/pics/messageInFrame.jpg

And here when the message is opened in its own window, sans sidebar"
http://dorayme.150m.com/pics/justMessage.jpg

"width" jumps to the next line for no good reason that I can see in the
former situation.

Which is the sort of thing that makes me keen to address or understand the
situation at my end better. But I can live with some uncertainty. There are
deeper questions that proccupy me...

dorayme

 

[Els]

Yes, well I am sure people would let you come a bit closer now and even (if
supervised) touch their Macs. Now that you are better known! We don't allow
just anyone to handle these Rolls Royce machines...

<g>
Well, it's not that anyone told me not to touch them, but rather that
I haven't been near any except for in the train when a fellow
passenger uses an iMac

Yes, I did also look under "compose" and "text" options (they are in a
different place on the Mac version) but saw nothing about setting char line
width.

I found this page about it:
http://archive.mac-mgrs.org/archive/2003/20030930160315.txt

 

[dorayme]

... I haven't been near any except for in the train when a fellow
passenger uses an iMac

I found this page about it:
http://archive.mac-mgrs.org/archive/2003/20030930160315.txt

Thanks for this, I am downloading some of the suggested software and will
fiddle with it. Appreciate it. I have sent out a world-wide notice to let
all Mac users allow you unfettered access to their machines. If the guy with
the iMac on your train invites you, don't be alarmed, he is only honouring
instructions from our secret exclusive society ...

dorayme

 

[Els]

Thanks for this, I am downloading some of the suggested software and will
fiddle with it. Appreciate it. I have sent out a world-wide notice to let
all Mac users allow you unfettered access to their machines. If the guy with
the iMac on your train invites you, don't be alarmed, he is only honouring
instructions from our secret exclusive society ...

LOL

 

[Manny]

Hi,

I am new to dhtml (html+css). I would like to redesign my site using

tags and styles.
I know how to do it with frames or tables but I did not succed with div's.
In addition, I would like that the site would work for all major browsers
and platforms, even if javascript is not activated.
Would someone be so kind to suggest me how to do it ? Here is, with tables,
the design I need :

<table width="760px" align="center">
<tr><td colspan="2" height="100px">my menu goes here</td></tr>
<!-- if this top part could be fixed at top of the screen when scrolling, it
would be nice -->
<tr><td width="25%" height="100%>several small information text

<td width="75%" height="100%>main text here</td></tr>
<tr><td colspan="2" height="40px">my navigation goes here (bottom of
page)</td></tr>
</table>

TIA for your help...

OK, I found some answers on the web.
Not everithing is finish, but here is how I obtained the desired layout:

<body style="text-align:center; padding:0px; margin: 0px;" ><div
id="container" class="container" style="z-index: 2; position: relative;
width: 760px; margin-left: auto; margin-right: auto; padding: 0px;">
<div id="top" class="top" style="z-index:6;">
my menu goes here
</div>
<div id="lft" class="lft" style="z-index:5; float:left;
position:relative; padding:5px; width:170px; text-align:left;">
several small information text here
</div>
<div class="txt" style="z-index:4; float: right; position:relative;
padding:5px; width:570px; text-align: justify;">
main text here
</div>
<div id="bot" class="bot" style="z-index:3; clear:both; padding: 5px;
text-align:center;">
my navigation goes here (bottom of page)
</div>
</div>
</body>

Code works on IE6 and FF. Don't know if it works on NS or other
browsers.
Demo available here: http:||arthur-opendns-be|MariaValtorta|testdiv.htm
(replace | by / and - by . )

 

[wayne]

scrolling, it




OK, I found some answers on the web.
Not everithing is finish, but here is how I obtained the desired layout:

<body style="text-align:center; padding:0px; margin: 0px;" ><div
id="container" class="container" style="z-index: 2; position: relative;
width: 760px; margin-left: auto; margin-right: auto; padding: 0px;">
<div id="top" class="top" style="z-index:6;">
my menu goes here
</div>
<div id="lft" class="lft" style="z-index:5; float:left;
position:relative; padding:5px; width:170px; text-align:left;">
several small information text here
</div>
<div class="txt" style="z-index:4; float: right; position:relative;
padding:5px; width:570px; text-align: justify;">
main text here
</div>
<div id="bot" class="bot" style="z-index:3; clear:both; padding: 5px;
text-align:center;">
my navigation goes here (bottom of page)
</div>
</div>
</body>

Code works on IE6 and FF. Don't know if it works on NS or other
browsers.
Demo available here: http:||arthur-opendns-be|MariaValtorta|testdiv.htm
(replace | by / and - by . )

Check your doctype, it says frameset. Perhaps you meant to use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
instead.

Wayne

 

[Manny]

Manny wrote:

Check your doctype, it says frameset. Perhaps you meant to use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
instead.

I put frameset in the doctype because I want to include tooltips
developped with iframes (to include a html file inside the tooltip).

 

[Steve Pugh]

I put frameset in the doctype because I want to include tooltips
developped with iframes (to include a html file inside the tooltip).

If you use iframes then you need to use a Transitional doctype.
Frameset is just for frameset pages, nothing else.

Steve

 

[Manny]

If you use iframes then you need to use a Transitional doctype.
Frameset is just for frameset pages, nothing else.

Steve

OK, I think I will change my Iframes tags to Objects tags that are
supported in Strict doctype.
BTW, do you know which browsers support object tags ?