Table-based layout to CSS layout

#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

#2

In article <pan.2006.06.06.01.43.48.887870 (AT) hotmail (DOT) com>,
Guybrush Threepwood <spambak (AT) hotmail (DOT) com> wrote:

Quote:

'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

#3

Guybrush Threepwood wrote:

Quote:

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>

#4

In article <128a0ivk4n26mfa (AT) corp (DOT) supernews.com>,
oldwetdog <oldwetdog@googleD0Tnet> wrote:

Quote:

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

#5

oldwetdog wrote:

Quote:

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

#6

dorayme wrote:

Quote:

In article <128a0ivk4n26mfa (AT) corp (DOT) supernews.com>,
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 ...

#7

Deciding to do something for the good of humanity, Guybrush Threepwood
<spambak (AT) hotmail (DOT) com> declared in alt.html:

Quote:

Any hints on how to tackle this problem?

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

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

#8

Deciding to do something for the good of humanity, Mark Parnell
<webmaster (AT) clarkecomputers (DOT) com.au> declared in alt.html:

Quote:

http://clarkecomputers.com.au/usenet/OpenAL.html

Forgot to mention - tested and works in FF 1.5, IE 6 and Opera 8.5.

No doubt dorayme will test it in Safari for me. :-)

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

#9

In article <29sxcmeerc1r.dlg (AT) markparnell (DOT) com.au>,
Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:

Quote:

Deciding to do something for the good of humanity, Guybrush Threepwood
spambak (AT) hotmail (DOT) com> 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