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?

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?

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>

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

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

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

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

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

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,

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

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?

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,

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
CSS Layout Problem 10
HTML Table Issue 1
Multi-column layout with CSS 19
Layout 0

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top