Trying to lean how to leave tables in the dust.

Discussion in 'HTML' started by Richard, Feb 8, 2005.

  1. Richard

    Richard Guest

    On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:

    > Hi Guys,
    > I just built this page using my old method of using tables for lay
    > out. Here's the link
    > http://mywebpages.comcast.net/surge42/


    > Ultimatley I'd like to kill the need to use the centered nested table
    > for the text layout. I was hoping to use W3C CSS instead.


    > Can you help me by recreating the html so that CSS creates the layout?


    > I've tried with DW MX 04 but have had little luck pullin it off.




    Quite simple actually for that little design.

    <div id="greybox" style="as you like it">
    <div id="insidebox" style="your way"></div>
    <div id="shadow" style="this too">blah blah text</div>
    </div>

    "greybox" is the grey background you show. Style it as desired.
    "insidebox" is the text area. Here, you might want to learn how to center a
    division properly.
    Otherwise, you'd have to rely on something like position:relative.
    "shadow" is that little area below the text to give it the 3d look.

    Once you learn the basics of styling and positioning divisions, tables are
    history.
     
    Richard, Feb 8, 2005
    #1
    1. Advertisements

  2. On Tue, 08 Feb 2005 15:10:30 -0800, Scott_From_PA
    <> wrote:

    > http://mywebpages.comcast.net/surge42/
    >
    > Can you help me by recreating the html so that CSS creates the layout?


    Fully depends on what html or xhtml version you go for. Start with the common
    structure, use correct markup, meaningful and semantic where possible. Don't
    forget the <!DOCTYPE>.
    If done, it might look like:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>WRONG CSS</title>
    </head>
    <body>
    <h1>Primary Header</h1>

    <p>text text website text text text website text text text website text text
    text website text text text website text text text website text text text
    website text text text website text text text website text text text website
    text text text website text text text website text</p>

    <h2>Smaller Secondary Header</h2>

    <p>text text website text text text website text text text website text text
    text website text text text website text text text website text text text
    website text text text website text text text website text text text website
    text text text website text text text website text</p>

    <ul>
    <li>bullet point one</li>
    <li>bullet point two</li>
    <li>bullet point three</li>
    </ul>
    </body>
    </html>

    For CSS: use whatever is there. All the elements can be styled, even html and
    body. Perhaps you might want to insert one more div or so, to wrap up a certain
    section, but keep your markup as simple as possible.

    > I've tried with DW MX 04 but have had little luck pullin it off.
    >


    Then don't use that program. :) Try _understand_ what markup you need for the
    content you are about to publish. Try some text editor that gives you
    highlighting of the tags and start with that.

    And I saw this one post recently again (like yesterday)
    <http://groups.google.com/groups?selm=>,
    by Toby Inkster. Read it to understand it. It is sound and solid advise.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Feb 8, 2005
    #2
    1. Advertisements

  3. Richard

    Richard Guest

    On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:

    > Hi Guys,
    > I just built this page using my old method of using tables for lay
    > out. Here's the link
    > http://mywebpages.comcast.net/surge42/


    > Ultimatley I'd like to kill the need to use the centered nested table
    > for the text layout. I was hoping to use W3C CSS instead.


    > Can you help me by recreating the html so that CSS creates the layout?


    > I've tried with DW MX 04 but have had little luck pullin it off.




    I just tossed this little diddy together in a few minutes.
    Copy and paste to your editor.
    Look familiar?
    I threw in <center> only to make things easier. It really shouldn't be used
    though.
    There are ways of centering as you will learn.

    <body>
    <div style="width:90%; height:90%; background:#dee;">

    <center>
    <div style="width:60%; height:80%; background:#DFF; text-align:left;">
    <h2 style="background:#8bb">Primary header</h2>
    text text website text text text website text text text website text text
    text website text text text website text text text website text text text
    website text text text website text text text website text text text website
    text text text website text text text website text
    <h3 style="background:#FFF;">Secondary header</h3>
    text text website text text text website text text text website text text
    text website text text text website text text text website text text text
    website text text text website text text text website text text text website
    text text text website text text text website text.
    <p>
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </ul>
    </p>

    </div>
    <div style="width:59%; height:10%; background:#AFF;">
    </div>
    </center>


    </div>
    </body>
     
    Richard, Feb 8, 2005
    #3
  4. On Tue, 8 Feb 2005 15:50:30 -0600, Richard <Anonymous@127.001> wrote:

    > On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:
    >
    >> http://mywebpages.comcast.net/surge42/

    >
    >> Can you help me by recreating the html so that CSS creates the layout?

    >
    >
    > I just tossed this little diddy together in a few minutes.
    > Copy and paste to your editor.


    To OP, please don't! Don't take RtS serious for anything.

    > <p>
    > <ul>
    > <li>item 1</li>
    > <li>item 2</li>
    > <li>item 3</li>
    > </ul>
    > </p>


    If you know about the difference between block level elements and inline
    elements, you know that especially the above is a complete desaster. As soon as
    the <ul> tag is inserted in a paragraph element, starting at <p>, the paragraph
    element is closed. The </p> tag is therefore of no use. It is actually a mistake.

    > </div>
    > <div style="width:59%; height:10%; background:#AFF;">
    > </div>


    This is a beauty too. :-( And the use of <center> needs no encouragement. You
    can do without perfectly.

    Go to <http://home.wanadoo.nl/b.de.zoete/_test/scott_from_pa.html>. You'll find
    a page there that simulates much of the effects you want. Stylesheet in the page.
    Clean markup, valid HTML4.01 Strict, valid CSS2.1, just one class needed. Play
    around with it. Learn from it.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Feb 8, 2005
    #4
  5. On Tue, 8 Feb 2005 14:58:32 -0600, Richard <Anonymous@127.001> wrote:

    > On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:
    >
    >> http://mywebpages.comcast.net/surge42/

    >
    >> Can you help me by recreating the html so that CSS creates the layout?

    >
    > Quite simple actually for that little design.
    >
    > <div id="greybox" style="as you like it">
    > <div id="insidebox" style="your way"></div>
    > <div id="shadow" style="this too">blah blah text</div>
    > </div>
    >
    > "greybox" is the grey background you show. Style it as desired.
    > "insidebox" is the text area. Here, you might want to learn how to center a
    > division properly.
    > Otherwise, you'd have to rely on something like position:relative.
    > "shadow" is that little area below the text to give it the 3d look.
    >


    Damn, you're a fool. Nothing like this is needed at all. Why do you always make
    thing over complicated? Why, why, why! See what you have done? Now you've
    planted your sick ideas in some innocent mind.

    ========
    To all noobs out there: do not ever take RtS seriously. Don't listen to him.
    Better yet, just kf him now. Immediately.
    ========

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Feb 8, 2005
    #5
  6. Richard wrote:

    > I just tossed this little diddy together in a few minutes.


    No you didn't, liar. You fscking stole it from Barbara, and then
    ruined it.

    Holy crap. If you persist in stealing other people's work, couldn't
    you at least steal it from *someplace other than the same thread*?


    Oh, and: http://dictionary.reference.com/search?q=diddy

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 8, 2005
    #6
  7. Hi Guys,
    I just built this page using my old method of using tables for lay
    out. Here's the link
    http://mywebpages.comcast.net/surge42/

    Ultimatley I'd like to kill the need to use the centered nested table
    for the text layout. I was hoping to use W3C CSS instead.

    Can you help me by recreating the html so that CSS creates the layout?

    I've tried with DW MX 04 but have had little luck pullin it off.
     
    Scott_From_PA, Feb 8, 2005
    #7
  8. Scott_From_PA wrote:

    > please stay on message
    > Thanks


    You must be new, and don't know Richard. Do not believe any of his
    advice. It's always wrong.

    He's alternately known as RtS for Richard the Stupid. Google if you
    don't believe this.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 8, 2005
    #8
  9. On Tue, 08 Feb 2005 18:04:00 -0500, Beauregard T. Shagnasty
    <> wrote:

    > Richard wrote:
    >
    >> I just tossed this little diddy together in a few minutes.

    >
    > No you didn't, liar. You fscking stole it from Barbara, and then ruined it.
    >
    > Holy crap. If you persist in stealing other people's work, couldn't you at
    > least steal it from *someplace other than the same thread*?
    >


    ROFL



    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Feb 8, 2005
    #9
  10. Richard,
    Your the man!
    Thanks for the help

    S

    On Tue, 8 Feb 2005 15:50:30 -0600, "Richard" <Anonymous@127.001>
    wrote:

    >On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:
    >
    >> Hi Guys,
    >> I just built this page using my old method of using tables for lay
    >> out. Here's the link
    >> http://mywebpages.comcast.net/surge42/

    >
    >> Ultimatley I'd like to kill the need to use the centered nested table
    >> for the text layout. I was hoping to use W3C CSS instead.

    >
    >> Can you help me by recreating the html so that CSS creates the layout?

    >
    >> I've tried with DW MX 04 but have had little luck pullin it off.

    >
    >
    >
    >I just tossed this little diddy together in a few minutes.
    >Copy and paste to your editor.
    >Look familiar?
    >I threw in <center> only to make things easier. It really shouldn't be used
    >though.
    >There are ways of centering as you will learn.
    >
    ><body>
    ><div style="width:90%; height:90%; background:#dee;">
    >
    > <center>
    > <div style="width:60%; height:80%; background:#DFF; text-align:left;">
    > <h2 style="background:#8bb">Primary header</h2>
    > text text website text text text website text text text website text text
    >text website text text text website text text text website text text text
    >website text text text website text text text website text text text website
    >text text text website text text text website text
    > <h3 style="background:#FFF;">Secondary header</h3>
    >text text website text text text website text text text website text text
    >text website text text text website text text text website text text text
    >website text text text website text text text website text text text website
    >text text text website text text text website text.
    > <p>
    > <ul>
    > <li>item 1</li>
    > <li>item 2</li>
    > <li>item 3</li>
    > </ul>
    > </p>
    >
    > </div>
    ><div style="width:59%; height:10%; background:#AFF;">
    > </div>
    > </center>
    >
    >
    ></div>
    ></body>
    >
    >
     
    Scott_From_PA, Feb 9, 2005
    #10
  11. Rich,
    See my post on the site. Here's the URL

    http://mywebpages.comcast.net/surge42/














    On Tue, 8 Feb 2005 15:50:30 -0600, "Richard" <Anonymous@127.001>
    wrote:

    >On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:
    >
    >> Hi Guys,
    >> I just built this page using my old method of using tables for lay
    >> out. Here's the link
    >> http://mywebpages.comcast.net/surge42/

    >
    >> Ultimatley I'd like to kill the need to use the centered nested table
    >> for the text layout. I was hoping to use W3C CSS instead.

    >
    >> Can you help me by recreating the html so that CSS creates the layout?

    >
    >> I've tried with DW MX 04 but have had little luck pullin it off.

    >
    >
    >
    >I just tossed this little diddy together in a few minutes.
    >Copy and paste to your editor.
    >Look familiar?
    >I threw in <center> only to make things easier. It really shouldn't be used
    >though.
    >There are ways of centering as you will learn.
    >
    ><body>
    ><div style="width:90%; height:90%; background:#dee;">
    >
    > <center>
    > <div style="width:60%; height:80%; background:#DFF; text-align:left;">
    > <h2 style="background:#8bb">Primary header</h2>
    > text text website text text text website text text text website text text
    >text website text text text website text text text website text text text
    >website text text text website text text text website text text text website
    >text text text website text text text website text
    > <h3 style="background:#FFF;">Secondary header</h3>
    >text text website text text text website text text text website text text
    >text website text text text website text text text website text text text
    >website text text text website text text text website text text text website
    >text text text website text text text website text.
    > <p>
    > <ul>
    > <li>item 1</li>
    > <li>item 2</li>
    > <li>item 3</li>
    > </ul>
    > </p>
    >
    > </div>
    ><div style="width:59%; height:10%; background:#AFF;">
    > </div>
    > </center>
    >
    >
    ></div>
    ></body>
    >
    >
     
    Scott_From_PA, Feb 9, 2005
    #11
  12. On Tue, 08 Feb 2005 23:43:28 +0100, "Barbara de Zoete"
    <> wrote:

    >Go to <http://home.wanadoo.nl/b.de.zoete/_test/scott_from_pa.html>. You'll find
    >a page there that simulates much of the effects you want. Stylesheet in the page.
    >Clean markup, valid HTML4.01 Strict, valid CSS2.1, just one class needed. Play
    >around with it. Learn from it.



    Thanks bud! I'm on it
    S
     
    Scott_From_PA, Feb 9, 2005
    #12
  13. please stay on message
    Thanks





    On Tue, 08 Feb 2005 18:04:00 -0500, "Beauregard T. Shagnasty"
    <> wrote:

    >Richard wrote:
    >
    >> I just tossed this little diddy together in a few minutes.

    >
    >No you didn't, liar. You fscking stole it from Barbara, and then
    >ruined it.
    >
    >Holy crap. If you persist in stealing other people's work, couldn't
    >you at least steal it from *someplace other than the same thread*?
    >
    >
    >Oh, and: http://dictionary.reference.com/search?q=diddy
     
    Scott_From_PA, Feb 9, 2005
    #13
  14. Richard

    Richard Guest

    On Tue, 08 Feb 2005 18:11:45 -0800 Scott_From_PA wrote:

    > please stay on message
    > Thanks


    Then kindly learn how to properly communicate your desires.
    I was following what you had shown on the linked page.
    I also stated clearly that use of <center> should be avoided.
    Learn CSS and do it yourself.
     
    Richard, Feb 9, 2005
    #14
  15. Richard

    Richard Guest

    On Tue, 08 Feb 2005 17:46:07 -0800 Scott_From_PA wrote:

    > Rich,
    > See my post on the site. Here's the URL


    > http://mywebpages.comcast.net/surge42/


    Don't credit me. I'm just applying CSS the way it should be.













    > On Tue, 8 Feb 2005 15:50:30 -0600, "Richard" <Anonymous@127.001>
    > wrote:


    >>On Tue, 08 Feb 2005 15:10:30 -0800 Scott_From_PA wrote:


    >>> Hi Guys,
    >>> I just built this page using my old method of using tables for lay
    >>> out. Here's the link
    >>> http://mywebpages.comcast.net/surge42/


    >>> Ultimatley I'd like to kill the need to use the centered nested table
    >>> for the text layout. I was hoping to use W3C CSS instead.


    >>> Can you help me by recreating the html so that CSS creates the
    >>> layout?


    >>> I've tried with DW MX 04 but have had little luck pullin it off.




    >>I just tossed this little diddy together in a few minutes.
    >>Copy and paste to your editor.
    >>Look familiar?
    >>I threw in <center> only to make things easier. It really shouldn't be
    >>used
    >>though.
    >>There are ways of centering as you will learn.


    >><body>
    >><div style="width:90%; height:90%; background:#dee;">


    >> <center>
    >> <div style="width:60%; height:80%; background:#DFF;
    >> text-align:left;">
    >> <h2 style="background:#8bb">Primary header</h2>
    >> text text website text text text website text text text website text
    >> text
    >>text website text text text website text text text website text text
    >>text
    >>website text text text website text text text website text text text
    >>website
    >>text text text website text text text website text
    >> <h3 style="background:#FFF;">Secondary header</h3>
    >>text text website text text text website text text text website text
    >>text
    >>text website text text text website text text text website text text
    >>text
    >>website text text text website text text text website text text text
    >>website
    >>text text text website text text text website text.
    >> <p>
    >> <ul>
    >> <li>item 1</li>
    >> <li>item 2</li>
    >> <li>item 3</li>
    >> </ul>
    >> </p>


    >> </div>
    >><div style="width:59%; height:10%; background:#AFF;">
    >> </div>
    >> </center>



    >></div>
    >></body>
     
    Richard, Feb 9, 2005
    #15
  16. Richard

    Richard Guest

    On Tue, 08 Feb 2005 18:04:00 -0500 Beauregard T. Shagnasty wrote:

    > Richard wrote:


    >> I just tossed this little diddy together in a few minutes.


    > No you didn't, liar. You fscking stole it from Barbara, and then
    > ruined it.


    I have no idea where she has posted anything similar.
    It's not stealing simply because two people use the same code.
    That's why it's called "public domain".


    > Holy crap. If you persist in stealing other people's work, couldn't
    > you at least steal it from *someplace other than the same thread*?



    > Oh, and: http://dictionary.reference.com/search?q=diddy


    > --
    > -bts
    > -This space intentionally left blank.
     
    Richard, Feb 9, 2005
    #16
  17. Richard wrote:

    > On Tue, 08 Feb 2005 18:04:00 -0500 Beauregard T. Shagnasty wrote:
    >
    >> Richard wrote:

    >
    >>> I just tossed this little diddy together in a few minutes.

    >
    >> No you didn't, liar. You fscking stole it from Barbara, and then
    >> ruined it.

    >
    > I have no idea where she has posted anything similar.


    Similar?

    text text website text text text website text text text website
    etc ...

    There can be no *possible coincidence* that she posted this sample
    content, and 45 minutes later you posted the *exact* same content,
    even the *exact* number of 48 words!

    > It's not stealing simply because two people use the same code.
    > That's why it's called "public domain".


    No, but it is stealing when you copy the content. Word for word.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Feb 9, 2005
    #17
  18. Richard

    Mr Bean Guest

    Scott_From_PA wrote:
    > Hi Guys,
    > I just built this page using my old method of using tables for lay
    > out. Here's the link
    > http://mywebpages.comcast.net/surge42/
    >
    > Ultimatley I'd like to kill the need to use the centered nested table
    > for the text layout. I was hoping to use W3C CSS instead.
    >
    > Can you help me by recreating the html so that CSS creates the layout?
    >
    > I've tried with DW MX 04 but have had little luck pullin it off.
    >




    On your page you wrote...

    " Barbara from alt.html told me about a very interesting websie that
    takes your online tabled layout and convert it into compliant HTML4.01
    Strict, with valid CSS2.1"

    Can you supply a link?


    TIA
     
    Mr Bean, Feb 10, 2005
    #18
  19. Richard

    kchayka Guest

    Richard wrote:
    >
    > I'm just applying CSS the way it should be.


    ROTFLMAO

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Feb 10, 2005
    #19
  20. Richard

    JDS Guest

    JDS, Feb 10, 2005
    #20
    1. Advertisements

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. Replies:
    3
    Views:
    683
    Thomas Dickey
    Jun 7, 2006
  2. spudnik
    Replies:
    0
    Views:
    290
    spudnik
    Jul 22, 2010
  3. Roedy Green

    Jesign.com bites the dust

    Roedy Green, Dec 6, 2010, in forum: Java
    Replies:
    0
    Views:
    304
    Roedy Green
    Dec 6, 2010
  4. Jonathan Loescher

    Books to lean Python 3 Web Programming?

    Jonathan Loescher, Oct 22, 2011, in forum: Python
    Replies:
    2
    Views:
    319
    moijes12
    Oct 24, 2011
  5. James Harris

    Which lean C compiler for 32-bit OS development

    James Harris, Nov 12, 2011, in forum: C Programming
    Replies:
    92
    Views:
    2,250
    James Harris
    Dec 17, 2011
Loading...

Share This Page