for mscir....others looking for help on desiging basic layout with css

Discussion in 'HTML' started by Richard, Apr 8, 2004.

  1. Richard

    Richard Guest

    www.1-large-world.com/samples/sample1.html

    This shows my concept of using a container box for your entire page, then
    including a sidebar, header, body, and footer.
    Which is the basic layout design of most simple sites.

    This approach does not break, and allows for flexibility.
    Need a 3 column layout? No problem.
    Add another division as your container for which ever divisions you want to
    seperate from the 3rd column.
    Use float:left in that container.
    Add your column.

    www.1-large-world.com/samples/sample2.html
     
    Richard, Apr 8, 2004
    #1
    1. Advertising

  2. Richard

    mscir Guest

    Re: for mscir....others looking for help on desiging basic layoutwith css

    Richard wrote:
    > www.1-large-world.com/samples/sample1.html
    >
    > This shows my concept of using a container box for your entire page, then
    > including a sidebar, header, body, and footer.
    > Which is the basic layout design of most simple sites.
    >
    > This approach does not break, and allows for flexibility.
    > Need a 3 column layout? No problem.
    > Add another division as your container for which ever divisions you want to
    > seperate from the 3rd column.
    > Use float:left in that container.
    > Add your column.
    >
    > www.1-large-world.com/samples/sample2.html


    Thanks Richard, interesting examples. I'm just now looking at tableless
    layouts, always used tables before. I played around with the values and
    was wondering if you could tell me why the column with the header,
    mymain and footer divs extends slightly farther down the page than the
    sidebar div (about the thickness of the border line or slightly more)?

    ..big1 {width: 100%; height: 2000px; border: none; background:gold;}
    ..sidebar {width: 20%; height: 2000px; border: solid black; float:left;}
    ..header {width: 100%; height: 80px; border: solid green;}
    ..mymain {width: 100%; height: 1900px; border: solid red;}
    ..footer {width: 100%; height: 20px; border: solid blue;}
     
    mscir, Apr 8, 2004
    #2
    1. Advertising

  3. Richard

    Richard Guest

    mscir wrote:

    > Richard wrote:
    >> www.1-large-world.com/samples/sample1.html
    >>
    >> This shows my concept of using a container box for your entire page,
    >> then including a sidebar, header, body, and footer. Which is the basic
    >>layout design of most simple sites. This approach does not break, and
    >>allows for flexibility. Need a 3 column layout? No problem. Add another
    >>division as your container for which ever divisions you want to seperate
    >>from the 3rd column. Use float:left in that container. Add your
    >>column. www.1-large-world.com/samples/sample2.html


    > Thanks Richard, interesting examples. I'm just now looking at tableless
    > layouts, always used tables before. I played around with the values and
    > was wondering if you could tell me why the column with the header,
    > mymain and footer divs extends slightly farther down the page than the
    > sidebar div (about the thickness of the border line or slightly more)?


    > .big1 {width: 100%; height: 2000px; border: none; background:gold;}
    > .sidebar {width: 20%; height: 2000px; border: solid black; float:left;}
    > .header {width: 100%; height: 80px; border: solid green;}
    > .mymain {width: 100%; height: 1900px; border: solid red;}
    > .footer {width: 100%; height: 20px; border: solid blue;}


    ..big1 should be the only one as a 100% width.
    All others should be slightly less.
    Same for the height if used.
    This allows for the borders which are always there but not visible unless
    you define a color other than the body of the division.
    So with your 3 totals, you probably have something like 2,006 pixels instead
    of 2,000.
    Instead of 1900, use say like 1890 or so.
    Then you'll have a little gap at the bottom instead of over run.
     
    Richard, Apr 8, 2004
    #3
  4. Richard

    kchayka Guest

    Re: for mscir....others looking for help on desiging basic layoutwith css

    mscir wrote:
    > Richard wrote:
    >> www.1-large-world.com/samples/sample1.html
    >> www.1-large-world.com/samples/sample2.html

    >
    > Thanks Richard, interesting examples.


    Please, don't even consider using any example Richard comes up with. He
    doesn't have a grasp of even basic CSS priciples, so resorts to kludges
    and hacks in a futile attempt to make something work. It's crap.

    > I'm just now looking at tableless
    > layouts, always used tables before.


    You would do well to study better examples. Here is a place to start:
    <URL:http://nemesis1.f2o.org/templates.php>

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Apr 8, 2004
    #4
  5. Richard

    Richard Guest

    Re: for mscir....others looking for help on desiging basic layout with css

    "kchayka" wrote:

    > mscir wrote:
    > > Richard wrote:
    > >> www.1-large-world.com/samples/sample1.html
    > >> www.1-large-world.com/samples/sample2.html

    > >
    > > Thanks Richard, interesting examples.

    >
    > Please, don't even consider using any example Richard comes up with. He
    > doesn't have a grasp of even basic CSS priciples, so resorts to kludges
    > and hacks in a futile attempt to make something work. It's crap.
    >


    The two items I show here are valid examples.
    They are based upon the same coding found at many of the online well known
    tutorials.
    What specifically does not agree with you?
     
    Richard, Apr 8, 2004
    #5
  6. Richard

    mscir Guest

    Re: for mscir....others looking for help on desiging basic layoutwith css

    kchayka wrote:
    > mscir wrote:
    >>Richard wrote:
    >>
    >>>www.1-large-world.com/samples/sample1.html
    >>>www.1-large-world.com/samples/sample2.html

    >>
    >>Thanks Richard, interesting examples.

    >
    > Please, don't even consider using any example Richard comes up with. He
    > doesn't have a grasp of even basic CSS priciples, so resorts to kludges
    > and hacks in a futile attempt to make something work. It's crap.
    >
    >>I'm just now looking at tableless
    >>layouts, always used tables before.

    >
    > You would do well to study better examples. Here is a place to start:
    > <URL:http://nemesis1.f2o.org/templates.php>


    Very impressive site!

    Thanks,
    Mike
     
    mscir, Apr 8, 2004
    #6
  7. Richard

    kchayka Guest

    Re: for mscir....others looking for help on desiging basic layoutwith css

    Richard wrote:

    > "kchayka" wrote:
    >> > Richard wrote:
    >> >> www.1-large-world.com/samples/sample1.html
    >> >> www.1-large-world.com/samples/sample2.html

    >>
    >> It's crap.

    >
    > The two items I show here are valid examples.


    Valid code doesn't mean it is _good_ code. I can't remember anything
    you've ever posted that was a _good_ example.

    > What specifically does not agree with you?


    Start at "height:3000px" and go from there.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Apr 8, 2004
    #7
  8. Richard

    informant Guest

    Re: for mscir....others looking for help on desiging basic layout with css

    "Richard" <Anonymous@127.001> wrote in message
    news:...
    >
    > "kchayka" wrote:
    >
    > > mscir wrote:
    > > > Richard wrote:
    > > >> www.1-large-world.com/samples/sample1.html
    > > >> www.1-large-world.com/samples/sample2.html
    > > >
    > > > Thanks Richard, interesting examples.

    > >
    > > Please, don't even consider using any example Richard comes up with. He
    > > doesn't have a grasp of even basic CSS priciples, so resorts to kludges
    > > and hacks in a futile attempt to make something work. It's crap.
    > >

    >
    > The two items I show here are valid examples.
    > They are based upon the same coding found at many of the online well known
    > tutorials.
    > What specifically does not agree with you?


    Have you ever understood when they told you, Bullis?


    Path:
    sn-us!sn-xit-05!sn-xit-09!supernews.com!news.maxwell.syr.edu!pln-e!spln!dex!
    extra.newsguy.com!newsp.newsguy.com!news4
    From: "Richard" <Anonymous@127.001>
    Newsgroups: alt.html
    Subject: Re: for mscir....others looking for help on desiging basic layout
    with css
    Date: Thu, 8 Apr 2004 10:18:28 -0500
    Organization: http://newsguy.com
    Lines: 21
    Message-ID: <>
    References: <>
    <>
    <c53p36$2os4eo$-berlin.de>
    NNTP-Posting-Host: p-451.newsdawg.com
    X-Priority: 3
    X-MSMail-Priority: Normal
    X-Newsreader: Microsoft Outlook Express 6.00.2800.1106
    X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106
    Xref: sn-us alt.html:456378
     
    informant, Apr 8, 2004
    #8
  9. Richard

    Richard Guest

    Re: for mscir....others looking for help on desiging basic layout with css

    kchayka wrote:

    > mscir wrote:
    >> Richard wrote:
    >>> www.1-large-world.com/samples/sample1.html
    >>> www.1-large-world.com/samples/sample2.html

    >>
    >> Thanks Richard, interesting examples.


    > Please, don't even consider using any example Richard comes up with. He
    > doesn't have a grasp of even basic CSS priciples, so resorts to kludges
    > and hacks in a futile attempt to make something work. It's crap.


    >> I'm just now looking at tableless
    >> layouts, always used tables before.


    > You would do well to study better examples. Here is a place to start:
    > <URL:http://nemesis1.f2o.org/templates.php>


    I checked out a few of the examples and every one broke down in IE when
    screen size was not at max.
    That is the purpose of the main container. So the the internal divisions do
    not break down.
    http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM_B.mhtml
    This one though, is the same basic layout I use and it does not break down.



    > --
    > Reply address is a bottomless spam bucket.
    > Please reply to the group so everyone can share.
     
    Richard, Apr 9, 2004
    #9
    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. Eric
    Replies:
    4
    Views:
    747
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,034
  3. Replies:
    1
    Views:
    603
    John Timney \(MVP\)
    Jun 19, 2006
  4. Replies:
    15
    Views:
    769
  5. Travis
    Replies:
    3
    Views:
    381
Loading...

Share This Page