PDA

View Full Version : Vicious overlap problem



CasoDip
Mar 22nd, 2009, 05:43 PM
I am fairly new to css - a little late in the game, sure, but I hadn't been designing sites for a while and decided I needed to step forward a bit now. I've come a ways considering I only started learning yesterday afternoon, but I've come across my first problem I can't seem to fix. I have a layout that has a header by itself and a footer off by itself. Between them is the main content area and I have two columns, one to put main stuff in and the other to put links and such in. Eventually I plan on making it a Wordpress theme but need to get it right first. Anyway the problem is that once there's content strange things start happening.

If you look at this link (http://www.onewildtribe.com/corkboard) you'll see that the sections of main content overlap the footer, even though they're separated in the code (as far as I know). Once I figure this out I can run a lot faster, so can someone look at the code and tell me what I've got amiss that causes this mess?

Thanks

mikemacx
Mar 22nd, 2009, 06:41 PM
Well......

I'm looking at your CSS and images( posttop, postmid,postbottom). The heights you specify for each make the total height what I'm seeing in the page. It has no choice but to cover up the footer. The postmmid is given 622px, and so without a specific height, it's showing at 163px.

Are you able to widen the mainback.jpg or shorten the post images?

CasoDip
Mar 22nd, 2009, 06:54 PM
If I shorten the post images it would change my design which would defeat my purpose. I'm not sure why widening mainback.jpg would help anything? I'm guessing there should be some way to keep the basic design but make the middle section stretch with the content without covering the footer. Like I said, I'm new to this.

Excavator
Mar 22nd, 2009, 07:33 PM
Hello CasoDip,
A little restructuring fixes your .posted. Try rearranging some divs like this -
<!--START PAGE//-->
<div class="posted">
<div class="postbg">
<div class="posttop">
<div class="posttitle">Post Name</div>
<div class="posttime">Posted Date by Author</div>
<div class="postmid">
<div class="postreg">ldkflskdjf ldksjf lskdj lskjdf lskdjf lskdjflsdjkf lskdjfl ksdjfl skdjf lskdjf lskdjf lksdjfl skdjfls kjdfl skdjfl skdjf lskdjf lskdjf lskdjflskdjf lskdjflsdkjfoiesjfklsdflkjdslkfj sldkjf lskdjf lksdjf lksdjf lskdjf lskdjf lksdjf lskdjf lskdjf lksdjfl ksdjf lkdsjflk jsdlfk jsdl
</div>
</div>
</div>
</div>
<div class="postbot"></div>
</div>


<br><br>
And your CSS like this -
body {background-color: #000000;
background-image: url(pageback.jpg);
background-repeat: repeat-y left;
background-attachment: fixed;}

* {margin:0;padding:0;border:none;}
.header {
background: url(header.jpg);
width: 900px;
height: 179px;
position:relative;
margin: 0 auto;
}
.lemenu {
width: 900px;
height: 30px;
background: url(menuback1.jpg);
text-align:center;
margin: 0 auto;
}
.lemenuB {
width: 900px;
height: 50px;
background: url(menuback2.jpg);
text-align:center;
margin: 0 auto;
}
.pagewrapper {
width: 900px;
background: url(mainback.jpg) repeat-y;
position:relative;
margin: 0 auto;
}
.sidebar {
width: 278px;
float:right;
}
.posted {
width:622px;
float-left;
}
.postbg {
width: 622px;
background: url(postmid.png) repeat-y;
text-align:left;
}
.posttop {
width: 622px;
background: url(posttop.png) no-repeat top;
text-align:left;
}
.postmid {
width: 622px;
background: url(postmid.png) repeat-y;
text-align:left;
}
.postbot {
width: 622px;
height:61px;
background: url(postbottom.png);
text-align:left;
border-top: 1px solid #f00;
}
.foot {
width: 900px;
height: 128px;
background: url(bottom.jpg);
margin: 0 auto;
}

CasoDip
Mar 22nd, 2009, 08:55 PM
Once I took out the red border it worked a treat, thanks! Now I just have to digest and study what I just did. :)

CasoDip
Mar 22nd, 2009, 09:25 PM
Oops, almost done. Link to page (http://onewildtribe.com/corkboard). It fixed the main overlap issue bu when I add stuff to the sidebar so it's longer than the main post, the sidebar overlaps again.

Excavator
Mar 22nd, 2009, 09:58 PM
Oops, almost done. Link to page (http://onewildtribe.com/corkboard). It fixed the main overlap issue bu when I add stuff to the sidebar so it's longer than the main post, the sidebar overlaps again.

It's the same thing your .posted was doing. The footer of that element is in the wrong place in the markup, some other divs are not closed in the right place... this fixes your .sidebar -
You'll need to pay close attention to closing tags. I've removed on the end and added in the middle, along with moving the .sidebarbot
markup -
</ul></div>
<div class="pagewrapper">

<div class="sidebar">
<div class="sidebartop">
<div class="sidebartoptext">Sidebar Section</div>
</div>
<div class="sidebarmid">

<div class="sidetext"><a href="" class="sidebarlink">Link One</a><br><a href="" class="sidebarlink">Link One</a><br><a href="" class="sidebarlink">Link One</a><br><a href="" class="sidebarlink">Link One</a><br><a href="" class="sidebarlink">Link One</a><br><a href="" class="sidebarlink">Link One</a><br><br>And text you might want here. Replace this text, make it one long link list or put banners and affiliate links here. And text you might want here. Replace this text, make it one long link list or put banners and affiliate links here. And text you might want here. Replace this text, make it one long link list or put banners and affiliate links here. And text you might want here. Replace this text, make it one long link list or put banners and affiliate links here. And text you might want here. Replace this text, make it one long link list or put banners and affiliate links here.<br>
</div>
</div>
<div class="sidebarbot">&nbsp;</div>
</div>


<!--START PAGE//-->
<div class="posted">
<div class="postbg">
<div class="posttop">
<div class="posttitle">Name of page</div>
<div class="posttime">Subtitle - if none simply delete this sentence.</div>
CSS

.sidebarbot {
background: url(sidebarbottom.png);
width: 278px;
height:38px;
}


That makes the body of your document show how your floats are not cleared... (http://www.quirksmode.org/css/clearing.html)this clears your floats -

.pagewrapper {
width: 900px;
background: url(mainback.jpg) repeat-y;
position:relative;
margin: 0 auto;
overflow: auto;
}

And that shows how your box model is off somehow. (http://www.google.com/search?hl=en&q=box+model).

Typically, for a 2 column layout, which is what you have... this is pretty bulletproof - http://nopeople.com/CSS/equal_length_columns/index.html

TinyScript
Mar 22nd, 2009, 11:00 PM
CasoDip

you should make the background scroll. It ruins your look to have a quarter inch outside of the corkboard moving and the background fixed.

plus, as it happens, I just made a cool clear tape script today and a push pin script too. You can add them to any picture.
http://h1.ripway.com/tinyscript/corners/ClearTape.html
have a look. You should save this file. it works well with your theme.
if you want the push pin script send me a PM

CasoDip
Mar 23rd, 2009, 01:24 AM
Thanks, I'm so close. Using the last fix, in Firefox on my Mac at least, it adds a horizontal scrollbar just above the footer. I've attached a screenshot. And I made the background scroll to fix that issue I hadn't even noticed yet. Thanks again!

Excavator
Mar 23rd, 2009, 06:43 PM
Thanks, I'm so close. Using the last fix, in Firefox on my Mac at least, it adds a horizontal scrollbar just above the footer. I've attached a screenshot. And I made the background scroll to fix that issue I hadn't even noticed yet. Thanks again!

Play with this width in red -

.sidebarmid {background: url(sidebarmid.png);
background-position: left;
width: 278px;
margin-top:0px;
text-align:left;
padding-top:10px;
padding-left:40px;
padding-bottom:10px;
background-repeat: repeat-y;
}

And have another look at that box model page to explain why that happened - http://www.w3.org/TR/CSS2/box.html (hint: padding-left:40px;)