|
|
Posted by Jonathan N. Little on 10/13/19 11:50
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?
>
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...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|