Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Need help to design my homepage with div's

Reply
Thread Tools

Need help to design my homepage with div's

 
 
Manny
Guest
Posts: n/a
 
      06-19-2005
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...


 
Reply With Quote
 
 
 
 
Lauri Raittila
Guest
Posts: n/a
 
      06-19-2005
in alt.html, Manny wrote:
> 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.



--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173
 
Reply With Quote
 
 
 
 
Manny
Guest
Posts: n/a
 
      06-20-2005

"Lauri Raittila" <(E-Mail Removed)> a crit dans le message de
news:(E-Mail Removed) t...
> in alt.html, Manny wrote:
> > 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.


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.

> > 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 :


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 |
+-----------------------------------------+

> > <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 -->


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.
>
> > <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.


what do you mean by "real markup" ?


> --
> Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
> Utrecht, NL.
> Support me, buy Opera:
> https://secure.bmtmicro.com/opera/bu...tml?AID=882173



 
Reply With Quote
 
Lauri Raittila
Guest
Posts: n/a
 
      06-20-2005
in alt.html, Manny wrote:
>


> > 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.


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...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]


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-20-2005
> From: Lauri Raittila <(E-Mail Removed)>

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

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

dorayme

 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      06-21-2005
dorayme wrote:

>> From: Lauri Raittila <(E-Mail Removed)>

>
>> [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)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-21-2005
> From: Els <(E-Mail Removed)>
> dorayme wrote:
>
>>> From: Lauri Raittila <(E-Mail Removed)>

>>
>>> [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

 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      06-21-2005
dorayme wrote:

>> From: Els <(E-Mail Removed)>
>> dorayme wrote:
>>
>>>> From: Lauri Raittila <(E-Mail Removed)>
>>>
>>>> [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.




--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-21-2005
> From: Els <(E-Mail Removed)>

> 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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-21-2005
>> From: Els <(E-Mail Removed)>
>> dorayme wrote:
>>
>>>> From: Lauri Raittila <(E-Mail Removed)>


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



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE6 Homepage aaaaaaaaaaaaaaaaaaaaaaaaaagh! Help, help, HELP! Tony Bowring Computer Support 8 11-10-2003 07:22 PM
IE6 Homepage aaaaaaaaaaaaaaaaaaaaaaaaaagh! Help, help, HELP! Tony Bowring Computer Support 0 11-10-2003 05:43 PM
Re: Anti-SARS Homepage Design Competition Kathy HTML 0 07-22-2003 09:46 PM
Re: Anti-SARS Homepage Design Competition Jacqui or (maybe) Pete HTML 2 07-22-2003 09:16 PM
Re: Anti-SARS Homepage Design Competition Matt Probert HTML 0 07-22-2003 07:08 PM



Advertisments