Table-based layout to CSS layout

Discussion in 'HTML' started by Guybrush Threepwood, Jun 6, 2006.

  1. I'm practicing my CSS skills and tried to make a
    layout like http://www.openal.org/ without using tables. I can't seem
    to get it completely right. Any hints on how to tackle this problem?

    --
    "Don't worry about people stealing your ideas. If your ideas are any
    good, you'll have to ram them down people's throats."
    -- Howard Aiken
     
    Guybrush Threepwood, Jun 6, 2006
    #1
    1. Advertising

  2. Guybrush Threepwood

    dorayme Guest

    In article <>,
    Guybrush Threepwood <> wrote:

    > 'm practicing my CSS skills and tried to make a
    > layout like http://www.openal.org/ without using tables. I can't seem
    > to get it completely right. Any hints on how to tackle this problem?


    perhaps the url to the "not completely right" markup. Easier for
    others to correct some things sometimes than start from scratch...

    --
    dorayme
     
    dorayme, Jun 6, 2006
    #2
    1. Advertising

  3. Guybrush Threepwood

    oldwetdog Guest

    Guybrush Threepwood wrote:
    > I'm practicing my CSS skills and tried to make a
    > layout like http://www.openal.org/ without using tables. I can't seem
    > to get it completely right. Any hints on how to tackle this problem?
    >


    I thought I'd try to create something that looks like your sample --


    quick, down and dirty


    <body style="margin: 0;">
    <div>

    <div style="width: 100%; height: 186px; background: #FFFCCC;">

    <div style="float: left; width: 17%; height: 186px;
    background: #7F7F7F; padding: 1em;">
    <H1 style="color: #FFFCCC;">TOP<BR>RIGHT</H1>
    </div>

    <div style="width: 83%; background: #FFFcCC; float: right;
    clear: left; height: 186px;">
    <P STYLE="MARGIN: 2EM;">This is the content on the top right</P>
    </div>

    </div>

    <div style="width: 17%; height: 600px; background: #FFFCCC;
    float: left;">
    <H2 style="text-align: center; padding-top: 9em;">left
    <br>verticle</H2>
    </div>

    <div style="width: 83%; height: 600px; background: #B7B78c;
    float: right; clear: left;">
    <p style="margin: 18em;">This is the content on the bottom
    right</P>
    </div>

    </div>

    </body>
     
    oldwetdog, Jun 6, 2006
    #3
  4. Guybrush Threepwood

    dorayme Guest

    In article <>,
    oldwetdog <oldwetdog@googleD0Tnet> wrote:

    > Guybrush Threepwood wrote:
    > > I'm practicing my CSS skills and tried to make a
    > > layout like http://www.openal.org/ without using tables. I can't seem
    > > to get it completely right. Any hints on how to tackle this problem?
    > >

    >
    > I thought I'd try to create something that looks like your sample --
    >
    >
    > quick, down and dirty
    >
    >
    > <body style="margin: 0;">
    > <div>
    >
    > <div style="width: 100%; height: 186px; background: #FFFCCC;">
    >
    > <div style="float: left; width: 17%; height: 186px;
    > background: #7F7F7F; padding: 1em;">
    > <H1 style="color: #FFFCCC;">TOP<BR>RIGHT</H1>
    > </div>
    >
    > <div style="width: 83%; background: #FFFcCC; float: right;
    > clear: left; height: 186px;">
    > <P STYLE="MARGIN: 2EM;">This is the content on the top right</P>
    > </div>
    >
    > </div>
    >
    > <div style="width: 17%; height: 600px; background: #FFFCCC;
    > float: left;">
    > <H2 style="text-align: center; padding-top: 9em;">left
    > <br>verticle</H2>
    > </div>
    >
    > <div style="width: 83%; height: 600px; background: #B7B78c;
    > float: right; clear: left;">
    > <p style="margin: 18em;">This is the content on the bottom
    > right</P>
    > </div>
    >
    > </div>
    >
    > </body>


    Not the best in Safari...

    --
    dorayme
     
    dorayme, Jun 6, 2006
    #4
  5. Guybrush Threepwood

    oldwetdog Guest

    oldwetdog wrote:
    > Guybrush Threepwood wrote:
    >> I'm practicing my CSS skills and tried to make a
    >> layout like http://www.openal.org/ without using tables. I can't seem
    >> to get it completely right. Any hints on how to tackle this problem?
    >>

    >
    > I thought I'd try to create something that looks like your sample --
    >
    >
    > quick, down and dirty
    >
    >


    :)
    and don'tcha know if i'd taken another minute to read before I
    hit the send button, I mighta noticed the owies...

    <body style="margin: 0;">

    <div>
    <div style="width: 100%; height: 86px; background: #FFFCCC;">
    <div style="float: left; width: 15%; height: 86px;
    background: #7F7F7F; padding: 1em;">
    <H1 style="color: #FFFCCC;">TOP<BR>LEFT</H1>
    </div>
    <div style="width: 83%; background: #FFFcCC; float: right;
    clear: left; height: 86px;">
    <P STYLE="MARGIN: 2EM;">This is the content on the top
    right</P>
    </div>
    </div>

    <div style="width: 15%; height: 600px; background: #FFFCCC;
    float: left;">
    <H2 style="text-align: center; padding-top: 9em;">left
    <br>verticle</H2>
    </div>

    <div style="width: 85%; height: 600px; background: #B7B78c;
    float: right; clear: left;">
    <p style="margin: 18em;">This is the content on the bottom
    right</P>
    </div>
    </div>

    </body>


    Oh, well....
     
    oldwetdog, Jun 6, 2006
    #5
  6. Guybrush Threepwood

    oldwetdog Guest

    dorayme wrote:
    > In article <>,
    > oldwetdog <oldwetdog@googleD0Tnet> wrote:
    >
    >> Guybrush Threepwood wrote:
    >>> I'm practicing my CSS skills and tried to make a
    >>> layout like http://www.openal.org/ without using tables. I can't seem
    >>> to get it completely right. Any hints on how to tackle this problem?
    >>>

    >> I thought I'd try to create something that looks like your sample --
    >>
    >>
    >> quick, down and dirty
    >>
    >>
    >> <body style="margin: 0;">
    >> <div>
    >>
    >> <div style="width: 100%; height: 186px; background: #FFFCCC;">
    >>
    >> <div style="float: left; width: 17%; height: 186px;
    >> background: #7F7F7F; padding: 1em;">
    >> <H1 style="color: #FFFCCC;">TOP<BR>RIGHT</H1>
    >> </div>
    >>
    >> <div style="width: 83%; background: #FFFcCC; float: right;
    >> clear: left; height: 186px;">
    >> <P STYLE="MARGIN: 2EM;">This is the content on the top right</P>
    >> </div>
    >>
    >> </div>
    >>
    >> <div style="width: 17%; height: 600px; background: #FFFCCC;
    >> float: left;">
    >> <H2 style="text-align: center; padding-top: 9em;">left
    >> <br>verticle</H2>
    >> </div>
    >>
    >> <div style="width: 83%; height: 600px; background: #B7B78c;
    >> float: right; clear: left;">
    >> <p style="margin: 18em;">This is the content on the bottom
    >> right</P>
    >> </div>
    >>
    >> </div>
    >>
    >> </body>

    >
    > Not the best in Safari...
    >


    thanks, I didn't try it in anything but an imitation of IE ...
     
    oldwetdog, Jun 6, 2006
    #6
  7. Guybrush Threepwood

    Mark Parnell Guest

    Mark Parnell, Jun 6, 2006
    #7
  8. Guybrush Threepwood

    Mark Parnell Guest

    Mark Parnell, Jun 6, 2006
    #8
  9. Guybrush Threepwood

    dorayme Guest

    In article <>,
    Mark Parnell <> wrote:

    > Deciding to do something for the good of humanity, Guybrush Threepwood
    > <> declared in alt.html:
    >
    > > Any hints on how to tackle this problem?

    >
    > Something like this:
    > http://clarkecomputers.com.au/usenet/OpenAL.html


    nice work.

    --
    dorayme
     
    dorayme, Jun 6, 2006
    #9
  10. Guybrush Threepwood

    Mark Parnell Guest

    Deciding to do something for the good of humanity, dorayme
    <> declared in alt.html:

    > Easier for
    > others to correct some things sometimes than start from scratch...


    O ye of little faith...

    --
    Mark Parnell
    My Usenet is improved; yours could be too:
    http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Jun 6, 2006
    #10
  11. Guybrush Threepwood

    oldwetdog Guest

    Mark Parnell wrote:
    > Deciding to do something for the good of humanity, Guybrush Threepwood
    > <> declared in alt.html:
    >
    >> Any hints on how to tackle this problem?

    >
    > Something like this:
    > http://clarkecomputers.com.au/usenet/OpenAL.html
    >


    looks definitive to me... ;-)
     
    oldwetdog, Jun 6, 2006
    #11
  12. Guybrush Threepwood

    Mark Parnell Guest

    Deciding to do something for the good of humanity, dorayme
    <> declared in alt.html:

    > nice work.


    Thank you m'lady.

    --
    Mark Parnell
    My Usenet is improved; yours could be too:
    http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Jun 6, 2006
    #12
  13. Guybrush Threepwood wrote:
    > I'm practicing my CSS skills and tried to make a
    > layout like http://www.openal.org/ without using tables. I can't seem
    > to get it completely right. Any hints on how to tackle this problem?
    >

    Not that I believe you your make a design pixel constrained but here you go.

    STYLE:
    body {
    margin: 0; padding: 0;
    color: #000;
    background: #fff url(160pxWideRed.gif) repeat-y;
    }
    #logo {
    width: 160px;
    height: 86px;
    float: left;
    color: #800;
    background: #fff url(white.gif); clear: left;
    }
    #banner {
    height: 86px;
    color: #800;
    background-color: #fd0;
    }
    #links {
    width: 160px;
    color: #fd0;
    background-color:
    #800; float: left;
    }
    #content {
    color: #000;
    background-color: #fff;
    margin-left: 170px;
    margin-right: 1em;
    }

    HTML:

    <body>
    <div id="logo">Logo Image</div>
    <div id="banner">Banner Text</div>
    <div id="links">Links List</div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetuer ...
    </div>
    </body>


    Notes:

    Create a background image for your links DIV the width of your links
    DIV, but apply to BODY and repeat-y. This will extend the background for
    the entire page instead of just under the links DIV which will probably
    be shorter.

    Create a background image for the logo DIV, 1 pixel GIF will do to cover
    the one put on the BODY

    apply a left margin to content DIV to clear links DIV and maintain
    straight left margin...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 6, 2006
    #13
  14. Guybrush Threepwood

    dorayme Guest

    In article <1opmsxjure5l2$>,
    Mark Parnell <> wrote:

    > Deciding to do something for the good of humanity, dorayme
    > <> declared in alt.html:
    >
    > > Easier for
    > > others to correct some things sometimes than start from scratch...

    >
    > O ye of little faith...


    ....got a lot of time on your hands Mark old son, or are you just
    very very very good?

    --
    dorayme
     
    dorayme, Jun 6, 2006
    #14
  15. Guybrush Threepwood

    dorayme Guest

    In article <>,
    Mark Parnell <> wrote:

    > Thank you m'lady.


    Perhaps you are are meaning my cat?

    --
    dorayme
     
    dorayme, Jun 6, 2006
    #15
  16. Guybrush Threepwood

    Mark Parnell Guest

    Deciding to do something for the good of humanity, dorayme
    <> declared in alt.html:

    > ...got a lot of time on your hands Mark old son, or are you just
    > very very very good?


    I refuse to answer that question on the grounds that I may incriminate
    myself...

    --
    Mark Parnell
    My Usenet is improved; yours could be too:
    http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Jun 7, 2006
    #16
  17. Guybrush Threepwood

    dorayme Guest

    In article <>,
    Mark Parnell <> wrote:

    > Deciding to do something for the good of humanity, dorayme
    > <> declared in alt.html:
    >
    > > ...got a lot of time on your hands Mark old son, or are you just
    > > very very very good?

    >
    > I refuse to answer that question on the grounds that I may incriminate
    > myself...


    I turned down a bit of work recently that involved database stuff
    so that folks could get answers to questions about products, know
    about this sort of thing? I know bugger all about it, I might
    keep you in mind. We would work something out, you would work for
    what miserable slave rate so that I could get a nice fat
    commision?

    :)

    --
    dorayme
     
    dorayme, Jun 7, 2006
    #17
  18. Guybrush Threepwood

    Mark Parnell Guest

    Deciding to do something for the good of humanity, dorayme
    <> declared in alt.html:

    > I turned down a bit of work recently that involved database stuff
    > so that folks could get answers to questions about products,


    You turned it down so they could get answers?

    > know
    > about this sort of thing?


    I wouldn't call myself an expert, but I've got a pretty good handle on
    it, yes.

    > We would work something out, you would work for
    > what miserable slave rate so that I could get a nice fat
    > commision?


    Sounds like a plan. <g>

    --
    Mark Parnell
    My Usenet is improved; yours could be too:
    http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Jun 7, 2006
    #18
  19. Guybrush Threepwood

    dorayme Guest

    In article <lajhcapi272p$>,
    Mark Parnell <> wrote:

    > > I turned down a bit of work recently that involved database stuff
    > > so that folks could get answers to questions about products,

    >
    > You turned it down so they could get answers?


    I am not that public spirited. You know what I meant.

    --
    dorayme
     
    dorayme, Jun 7, 2006
    #19
  20. Guybrush Threepwood

    Mark Parnell Guest

    Deciding to do something for the good of humanity, dorayme
    <> declared in alt.html:

    > You know what I meant.


    I did have to read it a couple of times, but yes. :)

    --
    Mark Parnell
    My Usenet is improved; yours could be too:
    http://blinkynet.net/comp/uip5.html
     
    Mark Parnell, Jun 7, 2006
    #20
    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:
    796
    clintonG
    Dec 24, 2004
  2. John Dalberg
    Replies:
    11
    Views:
    14,483
    irishdreaming
    May 29, 2009
  3. Mark Parnell
    Replies:
    1
    Views:
    450
    John Dalberg
    Feb 4, 2005
  4. Replies:
    1
    Views:
    648
    John Timney \(MVP\)
    Jun 19, 2006
  5. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,060
    Wÿrm
    Jun 20, 2006
Loading...

Share This Page