1 reply [Last post]
MagentaDesigner
Offline
newbie
Toronto, Canada
Last seen: 18 years 9 weeks ago
Toronto, Canada
Joined: 2004-06-07
Posts: 8
Points: 0

Hi guys!

I've been working on this for the past 24 hours, and I could not seem to get it right! My problem is that I wanted a header, a picture, and then two columns underneath. While I successfully made the two columns align, my background is NOT showing through!

Basically, my container ID selector has a background with a drop shadowed image and built-in columns to give the illusion that my columns are of equal width as seen here (this is without the two columns:

http://www.magentadesign.net/blogtest/without.html

But this is what I have created so far. Notice how the background does not repeat to show the pseudo-columns:

http://www.magentadesign.net/blogtest/index.html

Here's my code:

div#container {
background-image: url(images/paper.gif);
background-repeat: repeat-y;
margin-top: 0px;
margin-left: auto;
margin-bottom: 0px;
margin-right: auto;
padding: 0px;
width: 720px;
text-align: left;}

div#topbar {
background-color: #ffffff;
border-top: #000000 solid;
border-bottom: 2px #828282 solid;
width: 697px;
height: 50px;
padding: 0px;
margin-top: 0px;
margin-left: 12px;
margin-bottom: 0px;
margin-right: 11px;}

div#picture {
width: 697px;
height: 151px;
background-image: url(images/mainpic.jpg);
background-repeat: no-repeat;
padding: 0px;
margin: 0px 11px 0px 12px;}

div#content {
margin-top: 0px;
margin-left: 12px;
margin-bottom: 0px;
margin-right: 11px;
padding: 0px;
width: 697px;
background-color: #ffffff;
}

div#entries {
margin-bottom: 50px;
padding-top: 20px;
width: 360px;
float: left;}

div#extras {
float: right;
width: 304px;
\width: 304px;
w\idth: 304px;
padding: 0px;
width: 304px;
margin-top: 0px;
}

div#invisiblefoot {
clear: both;}

feedback would be appreciated. Thanks.[/code]

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 18 years 1 week ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

2-column, centred table layout.

If you want a quick-fix, you could add
border-bottom:1px solid #000;
To your div#container selector.
-------------------------------------------------------------------------------------
As for your background not showing through, you've set the background of your div#content selector to white
background-color: #ffffff;
You must remove this, or change it to transparent, to let the background show through.