Table-based layout to CSS layout - Page 2

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Re: Table-based layout to CSS layout

Guybrush Threepwood wrote:
Quoted text here. Click to load it
Not that I believe you your make a design pixel constrained but here you go.

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;
   #800; float: left;
#content {
   color: #000;
   background-color: #fff;
   margin-left: 170px;
   margin-right: 1em;


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


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

Take care,

Site Timeline