CSS problems

Discussion in 'HTML' started by Nik Coughin, Feb 19, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    Hi

    I am trying to create what initially seemed to be a fairly simple layout
    using CSS.

    This is what I am trying to do:

    http://homepages.ihug.co.nz/~nrkn/explain/req.png

    I have made a prototype of the page using tables to show you how the page
    should look and work when the browser window is resized. Please ignore the
    shabby html, I threw this together in Frontpage. It works in both IE and
    Mozilla well enough to explain what I am trying to do (although is a bit odd
    in Mozilla):

    http://homepages.ihug.co.nz/~nrkn/explain/table.html

    Here is my attempt using CSS:

    http://homepages.ihug.co.nz/~nrkn/explain/css.html

    I got this far and am completely unsure of how to proceed. Any pointers
    would be greatly appreciated.

    TIA,

    Nik Coughlin
    Nik Coughin, Feb 19, 2004
    #1
    1. Advertising

  2. Nik Coughin

    rf Guest

    "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    news:MKWYb.48968$...
    > Hi
    >
    > I am trying to create what initially seemed to be a fairly simple layout
    > using CSS.
    >
    > This is what I am trying to do:
    >
    > http://homepages.ihug.co.nz/~nrkn/explain/req.png


    There is your first problem. You are still thinking tables. CSS is not
    tables. When you draw a back of the envelope sketch for your page don't draw
    in tables. Draw what the whole page should look like.

    With tables one is used to chopping up images to fit in the various cells.
    Most of the stuff on your sketch is fixed anyway so why chop it up. Just
    make one great huge gif for the page background. It wont be big, 6K or so.

    Then plonk in the other stuff. A logo to the left, some houses inside a span
    that is floated to the right and a title.

    Then we can have an ul containing the nav bar (positioned absolutely at the
    required position) and a div containing the content (positioned absolutely
    at the required position).

    5 elements on the page. Simple.

    Here is a working draft:
    http://users.bigpond.net.au/rf/test/x/index.html

    Flavour to suit but keep in mind the KISS principle :)

    Cheers
    Richard.
    rf, Feb 19, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Nik Coughin Guest

    You're right.

    Thanks a million.

    rf wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    > news:MKWYb.48968$...
    >> Hi
    >>
    >> I am trying to create what initially seemed to be a fairly simple
    >> layout using CSS.
    >>
    >> This is what I am trying to do:
    >>
    >> http://homepages.ihug.co.nz/~nrkn/explain/req.png

    >
    > There is your first problem. You are still thinking tables. CSS is not
    > tables. When you draw a back of the envelope sketch for your page
    > don't draw in tables. Draw what the whole page should look like.
    >
    > With tables one is used to chopping up images to fit in the various
    > cells. Most of the stuff on your sketch is fixed anyway so why chop
    > it up. Just make one great huge gif for the page background. It wont
    > be big, 6K or so.
    >
    > Then plonk in the other stuff. A logo to the left, some houses inside
    > a span that is floated to the right and a title.
    >
    > Then we can have an ul containing the nav bar (positioned absolutely
    > at the required position) and a div containing the content
    > (positioned absolutely at the required position).
    >
    > 5 elements on the page. Simple.
    >
    > Here is a working draft:
    > http://users.bigpond.net.au/rf/test/x/index.html
    >
    > Flavour to suit but keep in mind the KISS principle :)
    >
    > Cheers
    > Richard.
    Nik Coughin, Feb 19, 2004
    #3
  4. Nik Coughin

    Nik Coughin Guest

    Not thinking in terms of tables (I hadn't even realised that I was doing so)
    is such a paradigm shift.

    I can think of another couple of ways that I could do this now too, although
    I am going to go with your big background image method.

    Thanks again.

    rf wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    > news:MKWYb.48968$...
    >> Hi
    >>
    >> I am trying to create what initially seemed to be a fairly simple
    >> layout using CSS.
    >>
    >> This is what I am trying to do:
    >>
    >> http://homepages.ihug.co.nz/~nrkn/explain/req.png

    >
    > There is your first problem. You are still thinking tables. CSS is not
    > tables. When you draw a back of the envelope sketch for your page
    > don't draw in tables. Draw what the whole page should look like.
    >
    > With tables one is used to chopping up images to fit in the various
    > cells. Most of the stuff on your sketch is fixed anyway so why chop
    > it up. Just make one great huge gif for the page background. It wont
    > be big, 6K or so.
    >
    > Then plonk in the other stuff. A logo to the left, some houses inside
    > a span that is floated to the right and a title.
    >
    > Then we can have an ul containing the nav bar (positioned absolutely
    > at the required position) and a div containing the content
    > (positioned absolutely at the required position).
    >
    > 5 elements on the page. Simple.
    >
    > Here is a working draft:
    > http://users.bigpond.net.au/rf/test/x/index.html
    >
    > Flavour to suit but keep in mind the KISS principle :)
    >
    > Cheers
    > Richard.
    Nik Coughin, Feb 19, 2004
    #4
    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:
    699
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    452
    Jukka K. Korpela
    Sep 9, 2003
  3. Joshua Beall
    Replies:
    1
    Views:
    414
    Bertilo Wennergren
    Dec 10, 2003
  4. Noozer
    Replies:
    10
    Views:
    2,038
    Mitja
    Oct 13, 2004
  5. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    641
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
Loading...

Share This Page