Trying to lean how to leave tables in the dust.

R

Richard

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/
Click to expand...
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.
Click to expand...
Can you help me by recreating the html so that CSS creates the layout?
Click to expand...
I've tried with DW MX 04 but have had little luck pullin it off.
Click to expand...



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

Barbara de Zoete

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

Can you help me by recreating the html so that CSS creates the layout?
Click to expand...

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.
Click to expand...

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

Richard

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/
Click to expand...
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.
Click to expand...
Can you help me by recreating the html so that CSS creates the layout?
Click to expand...
I've tried with DW MX 04 but have had little luck pullin it off.
Click to expand...



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

Barbara de Zoete

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

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>
Click to expand...

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 paragraph said:
</div>
<div style="width:59%; height:10%; background:#AFF;">
</div>
Click to expand...

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

Barbara de Zoete

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.
Click to expand...

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

Scott_From_PA

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

Beauregard T. Shagnasty

Scott_From_PA said:
please stay on message
Thanks
Click to expand...

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

Barbara de Zoete

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*?
Click to expand...

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

Scott_From_PA

Richard,
Your the man!
Thanks for the help

S

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>
Click to expand...
 
R

Richard

please stay on message
Thanks
Click to expand...

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

Richard

Richard wrote:
Click to expand...
No you didn't, liar. You fscking stole it from Barbara, and then
ruined it.
Click to expand...

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
Click to expand...
 
B

Beauregard T. Shagnasty

Richard said:
I have no idea where she has posted anything similar.
Click to expand...

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".
Click to expand...

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

Mr Bean

Scott_From_PA said:
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.
Click to expand...



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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
I am trying to detect Which image id="" was clicked ? 22
I am trying to make an audio player, how do I get the selected file to be playable? 5
How to display input options only after selecting an option from the 'select class' tag JS? 6
How to create 2 sections side by side in header section? 0
JavaScript: how to keep track of the circle in canvas on specific path? 0
Image shifts to the right when export the page to pdf 4
Help with my responsive home page 2

Members online

No members online now.
Total: 42 (members: 0, guests: 42)
Robots: 128

Forum statistics

Threads
473,754
Messages
2,569,528
Members
45,000
Latest member
MurrayKeync

Latest Threads

Top