Need help to design my homepage with div's

Discussion in 'HTML' started by Manny, Jun 19, 2005.

  1. Manny

    Manny Guest

    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...
     
    Manny, Jun 19, 2005
    #1
    1. Advertising

  2. 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/buy-opera.html?AID=882173
     
    Lauri Raittila, Jun 19, 2005
    #2
    1. Advertising

  3. Manny

    Manny Guest

    "Lauri Raittila" <> a écrit dans le message de
    news:...
    > 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/buy-opera.html?AID=882173
     
    Manny, Jun 20, 2005
    #3
  4. 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/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]


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Support me, buy Opera:
    https://secure.bmtmicro.com/opera/buy-opera.html?AID=882173
     
    Lauri Raittila, Jun 20, 2005
    #4
  5. Manny

    dorayme Guest

    > From: Lauri Raittila <>

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

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

    dorayme
     
    dorayme, Jun 21, 2005
    #5
  6. Manny

    Els Guest

    dorayme wrote:

    >> From: Lauri Raittila <>

    >
    >> [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 vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 21, 2005
    #6
  7. Manny

    dorayme Guest

    > From: Els <>
    > dorayme wrote:
    >
    >>> From: Lauri Raittila <>

    >>
    >>> [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
     
    dorayme, Jun 21, 2005
    #7
  8. Manny

    Els Guest

    dorayme wrote:

    >> From: Els <>
    >> dorayme wrote:
    >>
    >>>> From: Lauri Raittila <>
    >>>
    >>>> [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 vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 21, 2005
    #8
  9. Manny

    dorayme Guest

    > From: Els <>

    > 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, Jun 22, 2005
    #9
  10. Manny

    dorayme Guest

    >> From: Els <>
    >> dorayme wrote:
    >>
    >>>> From: Lauri Raittila <>


    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
     
    dorayme, Jun 22, 2005
    #10
  11. Manny

    Els Guest

    dorayme wrote:

    >> From: Els <>

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


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

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


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

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 22, 2005
    #11
  12. Manny

    dorayme Guest

    > From: Els <>

    > dorayme wrote:
    >
    >>> From: Els <>


    > ... 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
     
    dorayme, Jun 22, 2005
    #12
  13. Manny

    Els Guest

    dorayme wrote:
    > From: Els <>
    >
    >> ... 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 ...


    LOL :)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jun 22, 2005
    #13
  14. Manny

    Manny Guest

    "Manny" <> a écrit dans le message de
    news:42b5c84e$0$32546$...
    > 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...
    >

    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 . )
     
    Manny, Jun 25, 2005
    #14
  15. Manny

    wayne Guest

    Manny wrote:
    > "Manny" <> a écrit dans le message de
    > news:42b5c84e$0$32546$...
    >
    >>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...
    >>

    >
    > 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
     
    wayne, Jun 25, 2005
    #15
  16. Manny

    Manny Guest

    "wayne" <> a écrit dans le message de
    news:Ekive.9429$...
    > 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).
     
    Manny, Jun 26, 2005
    #16
  17. Manny

    Steve Pugh Guest

    "Manny" <> wrote:
    >"wayne" <> a écrit dans le message de
    >news:Ekive.9429$...
    >>
    >> 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).


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

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jun 26, 2005
    #17
  18. Manny

    Manny Guest

    >
    > 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 ?
     
    Manny, Jun 26, 2005
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jacqui or (maybe) Pete

    Re: Anti-SARS Homepage Design Competition

    Jacqui or (maybe) Pete, Jul 22, 2003, in forum: HTML
    Replies:
    2
    Views:
    426
    Jacqui or (maybe) Pete
    Jul 22, 2003
  2. Matt Probert
    Replies:
    0
    Views:
    432
    Matt Probert
    Jul 22, 2003
  3. Kathy
    Replies:
    0
    Views:
    638
    Kathy
    Jul 22, 2003
  4. Uncle Noah
    Replies:
    0
    Views:
    493
    Uncle Noah
    Sep 26, 2007
  5. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    756
Loading...

Share This Page