Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Trying to lean how to leave tables in the dust.

Reply
Thread Tools

Trying to lean how to leave tables in the dust.

 
 
Richard
Guest
Posts: n/a
 
      02-08-2005
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.



 
Reply With Quote
 
 
 
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-08-2005
On Tue, 08 Feb 2005 15:10:30 -0800, Scott_From_PA
<(E-Mail Removed)> 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 |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      02-08-2005
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>



 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-08-2005
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 |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-08-2005
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 |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-08-2005
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.
 
Reply With Quote
 
Scott_From_PA
Guest
Posts: n/a
 
      02-08-2005
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.

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-08-2005
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.
 
Reply With Quote
 
Barbara de Zoete
Guest
Posts: n/a
 
      02-08-2005
On Tue, 08 Feb 2005 18:04:00 -0500, Beauregard T. Shagnasty
<(E-Mail Removed)> 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 |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
Scott_From_PA
Guest
Posts: n/a
 
      02-09-2005
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>
>
>


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Lean, Mean, Fighting Machine Dudley Hanks Digital Photography 5 08-07-2008 04:24 AM
Optical disc makers lean towards HD DVD not Blu-ray. Allan DVD Video 1 08-17-2005 04:33 PM
Por favor antes de eliminar este mensaje, lean primero Uberto Computer Support 0 04-05-2005 08:49 PM
Why do they lean? Chuck Lorentzson Digital Photography 26 03-05-2005 04:06 PM
Question re David Lean movies release Mary DVD Video 1 09-13-2004 03:53 PM



Advertisments