Table-based layout to CSS layout

  • Thread starter Guybrush Threepwood
  • Start date
G

Guybrush Threepwood

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

dorayme

Guybrush Threepwood said:
'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?
Click to expand...

perhaps the url to the "not completely right" markup. Easier for
others to correct some things sometimes than start from scratch...
 
O

oldwetdog

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

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

dorayme

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

Not the best in Safari...
 
O

oldwetdog

oldwetdog said:
I thought I'd try to create something that looks like your sample --


quick, down and dirty
Click to expand...

:)
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....
 
M

Mark Parnell

Deciding to do something for the good of humanity, dorayme
Easier for
others to correct some things sometimes than start from scratch...
Click to expand...

O ye of little faith...
 
J

Jonathan N. Little

Guybrush said:
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?
Click to expand...
Not that I believe you your make a design pixel constrained but here you go.

STYLE:
body {
margin: 0; padding: 0;
color: #000;
background: #fff url(160pxWideRed.gif) repeat-y;
}
#logo {
width: 160px;
height: 86px;
float: left;
color: #800;
background: #fff url(white.gif); clear: left;
}
#banner {
height: 86px;
color: #800;
background-color: #fd0;
}
#links {
width: 160px;
color: #fd0;
background-color:
#800; float: left;
}
#content {
color: #000;
background-color: #fff;
margin-left: 170px;
margin-right: 1em;
}

HTML:

<body>
<div id="logo">Logo Image</div>
<div id="banner">Banner Text</div>
<div id="links">Links List</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer ...
</div>
</body>


Notes:

Create a background image for your links DIV the width of your links
DIV, but apply to BODY and repeat-y. This will extend the background for
the entire page instead of just under the links DIV which will probably
be shorter.

Create a background image for the logo DIV, 1 pixel GIF will do to cover
the one put on the BODY

apply a left margin to content DIV to clear links DIV and maintain
straight left margin...
 
D

dorayme

Mark Parnell said:
Deciding to do something for the good of humanity, dorayme


O ye of little faith...
Click to expand...

....got a lot of time on your hands Mark old son, or are you just
very very very good?
 
M

Mark Parnell

Deciding to do something for the good of humanity, dorayme
...got a lot of time on your hands Mark old son, or are you just
very very very good?
Click to expand...

I refuse to answer that question on the grounds that I may incriminate
myself...
 
D

dorayme

Mark Parnell said:
Deciding to do something for the good of humanity, dorayme


I refuse to answer that question on the grounds that I may incriminate
myself...
Click to expand...

I turned down a bit of work recently that involved database stuff
so that folks could get answers to questions about products, know
about this sort of thing? I know bugger all about it, I might
keep you in mind. We would work something out, you would work for
what miserable slave rate so that I could get a nice fat
commision?

:)
 
M

Mark Parnell

Deciding to do something for the good of humanity, dorayme
I turned down a bit of work recently that involved database stuff
so that folks could get answers to questions about products,
Click to expand...

You turned it down so they could get answers?
know
about this sort of thing?
Click to expand...

I wouldn't call myself an expert, but I've got a pretty good handle on
it, yes.
We would work something out, you would work for
what miserable slave rate so that I could get a nice fat
commision?
Click to expand...

Sounds like a plan. <g>
 
D

dorayme

I turned down a bit of work recently that involved database stuff
so that folks could get answers to questions about products,
Click to expand...

You turned it down so they could get answers?[/QUOTE]

I am not that public spirited. You know what I meant.
 

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

CSS: a simple layout won't work in CSS 29
Tableless layout 6
Css-Layout vs Table-Layout 15
Positioning CSS components 1
Interfering CSS 1
CSS Layout Problem 10
HTML Table Issue 1
Multi-column layout with CSS 19

Members online

Total: 75 (members: 2, guests: 73)
Robots: 463

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top