HTML - Trying to lean how to leave tables in the dust.

02-08-2005, 08:58 PM

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

02-08-2005, 09:05 PM

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=pan.2003.10.19.16.05.38.354002@goddamn .co.uk>,
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 |
`-------------------------------------------------- --<--@ ------------'

02-08-2005, 09:50 PM

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>

02-08-2005, 10:43 PM

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 |
`-------------------------------------------------- --<--@ ------------'

02-08-2005, 10:47 PM

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 |
`-------------------------------------------------- --<--@ ------------'

02-08-2005, 11:04 PM

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.

02-08-2005, 11:10 PM

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.

02-08-2005, 11:15 PM

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.

02-08-2005, 11:21 PM

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 |
`-------------------------------------------------- --<--@ ------------'

02-09-2005, 01:35 AM

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

02-08-2005, 09:05 PM	#2
Barbara de Zoete Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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=pan.2003.10.19.16.05.38.354002@goddamn .co.uk>, 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 \| `-------------------------------------------------- --<--@ ------------'

02-08-2005, 09:50 PM	#3
Richard Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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>

02-08-2005, 10:43 PM	#4
Barbara de Zoete Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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 \| `-------------------------------------------------- --<--@ ------------'

02-08-2005, 10:47 PM	#5
Barbara de Zoete Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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 \| `-------------------------------------------------- --<--@ ------------'

02-08-2005, 11:04 PM	#6
Beauregard T. Shagnasty Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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.

02-08-2005, 08:58 PM	#1
	Re: Trying to lean how to leave tables in the dust. 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

02-08-2005, 11:10 PM	#7
Scott_From_PA Posts: n/a	Trying to lean how to leave tables in the dust. 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.

02-08-2005, 11:15 PM	#8
Beauregard T. Shagnasty Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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.

02-08-2005, 11:21 PM	#9
Barbara de Zoete Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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 \| `-------------------------------------------------- --<--@ ------------'

02-09-2005, 01:35 AM	#10
Scott_From_PA Posts: n/a	Re: Trying to lean how to leave tables in the dust. 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> > >

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search