...

View Full Version : Positioning Problem



flackend
10-18-2009, 06:12 PM
Hi,
I'm having trouble with my footer's positioning. If I leave my wrapper div's position with the default value its background doesn't repeat.

But If I make the wrapper's position absolute the background works, but the footer doesn't clear.

Update: Solved!

Excavator
10-18-2009, 06:55 PM
Hello flackend,
try making a few changes to your CSS, like this:
body {
font-family: Helvetica, Arial, sans-serif;
background-repeat: repeat;
background-image: url(images/background.jpg);
}
* {
padding: 0px;
margin: 0px;
}
#header {
padding: 16px 60px 0 0;
line-height: 30px;
font-size: 22px;
font-weight: bold;
text-align: right;
background-image: url(images/header.png);
background-repeat: no-repeat;
margin: 30px 0 10px 0;
width: 780px;
}

#wrapper {
background-image: url(images/column.png);
background-repeat: repeat-y;
width: 840px;
overflow: auto;
}

#sidebar {
float: left;
width: 140px;
padding: 10px;
}

#content_wrapper {
padding: 10px 60px;
margin-left: 160px;
width: 560px;
}

#content {
float: right;
margin-top: -180px;
}

#footer {
clear: both;
background-color: #cccccc;
background-repeat: repeat;
width: 100%;
}

#content_btm {
background-repeat: no-repeat;
background-image: url(images/content_btm.png);
margin: 0 0 0 190px;
height: 10px;
width: 620px;
}

/* style */

a:link.nav, a:visited.nav {
color: black;
text-decoration: none;
}

a:hover.nav {
background-color: black;
color: white;
}

a:active.nav {
background-color: white;
color: black;
}

/* entry style */

h1 {
color: #333333;
font-size: 20px;
margin: 0px;
font-weight: bold;
padding: 0px;
}

.date {
color: #333333;
font-style: normal;
font-weight: normal;
line-height: 30px;
font-size: 14px;
}

.tags {
color: #999999;
word-spacing: 10px;
margin-left: 10px;
line-height: 30px;
font-size: 10px;
font-style: normal;
font-weight: normal;
}

p {
color: #333333;
line-height: 20px;
font-size: 16px;
padding: 0px 0px 20px 0px;
margin: 0px;
}

flackend
10-18-2009, 07:29 PM
Hello flackend,
try making a few changes to your CSS, like this:...

The * {padding: 0; margin: 0;} is cool, I've never used that.

With new CSS:

http://farm4.static.flickr.com/3531/4022477509_5fabfaf07d.jpg

Not quite there :(

Excavator
10-18-2009, 07:33 PM
Not quite there :(

Could you be more specific?

Excavator
10-18-2009, 07:35 PM
Maybe this?


#footer {
clear: both;
background: #cccccc;
margin: 10px 0 0;
}

flackend
10-18-2009, 07:41 PM
Maybe this?

I just updated the first post (http://www.codingforums.com/showpost.php?p=877912&postcount=1) with more info appended to the bottom of the post.

flackend
10-18-2009, 07:50 PM
Maybe this?

Do you see how the header image actually extends to where the footer is? The sidebar and content divs have negative top-margins so that they are on top of the header div's background-image.

See the difference in the image in post 3 (http://www.codingforums.com/showpost.php?p=877944&postcount=3).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum