Forum Moderators: not2easy

Message Too Old, No Replies

Background images

Getting overlapping issues, and non display

         

bigonroad

2:46 pm on Oct 31, 2010 (gmt 0)

10+ Year Member



Hey, I'm editing this page - [namesnotnumbers.info ]

I have two issues. a) why is the background on contentmain not visible.
b) when it is visible, how do i get rid of the overlap in backgrounds between contentmain and contenttop & contentbottom?


My CSS is:
/*content*/
#content {
width:989px;
margin: 0 auto;
}
#contentmain{
background-image:url(images/contentbgmain.png);
background-repeat:repeat-y;
margin:0;
}
#contenttop{
background:url(images/contentbgtop.png) no-repeat top;
height:91px;
margin:0;
}
#contentbot{
background:url(images/contentbgbot.png) no-repeat bottom;
height:114px;
clear:both;
}
#contenttext {
padding:0 40px 0 40px;
margin-top:-60px;
margin-bottom:-70px;
width:900px;
}
#contenttextmain {
width:570px;
float:left;
}
#contenttextside {
width: 315px;
float:right;
}


And my HTML is
<div id="content">
<div id="contenttop"></div>
<div id="contentmain">
<div id="contenttext">
<div id="contenttextmain">
main text here
</div>
<div id="contenttextside">
sidebar text here
</div>
</div>
</div>
<div id="contentbottom"></div>
</div>


Thanks!

Major_Payne

9:29 pm on Oct 31, 2010 (gmt 0)



Always set a width and height for the divs you are using bachground images on:


#contentmain{
width: XXpx;
height: YYpx;
background: #fff url(images/contentbgmain.png) repeat-y scroll;
margin: 0;
}


Set the margin between divs to what you want. The one above shows all margins are set to zero. You can use margin-top: XXpx; and/or margin-bottom: XXpx;

or, even:

margin: XXpx 0 XXpx 0;

caffinated

5:05 am on Nov 12, 2010 (gmt 0)

10+ Year Member



Strictly, that's not quite true. If the container with the background contains floated elements, clearing the float underneath the content with an appropriate margin will also stretch the container naturally without specifying a fixed height.

Demaestro

4:39 pm on Nov 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



caffinated

I am trying to do what you are talking about but can't get it to work.

Don't want to hijack this thread but don't want to post a new one seeing as you are talking about the same thing.

Why can't I get my bgimage/bgcolor on my divs to expand with the content when it contains floated elements?

I did as you suggested (I think?) and cleared the container elements but with no success.


#container {
position:relative;
margin:0 auto;
padding-top:20px;
width:790px;
background-color:ffff;
clear:both;
}

#main_section {
padding:0px;
margin:0px;
width:760px;
background-image:url('/images/bg_bottom.png');
clear:both;
}

#content_area_new {
padding-top:0px;
margin:0 auto;
padding-bottom:20px;
width:703px;
background-color:#e6e1e1;
clear:both;
}

#left_content {
padding-left:15px;
padding-right:7px;
padding-top:15px;
width:320px;
float:left;
}

#right_content{
padding-right:15px;
padding-left:7px;
padding-top:15px;
width:320px;
float:right;
}


<div id="container">
..<div id="main_section">
....<div id="content_area_new">
.......<div id="right_content">
.........CONTENT
.......</div>
.......<div id="left_content">
.........CONTENT
.......</div>
....</div>
..</div>
</div>

I would like the bgcolor and bgimage from main_content and content_area_new to be pushed down with the content from right_content and left_content.

Any ideas?

Demaestro

5:37 pm on Nov 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ok I figured mine out... hopefully this will help others.

To get your container element to expand with floated content you simply add a empty div before you close the container that clears:both

It simply forces the new non floated div past the floated content and clears it which opens the container up.

.clearboth {
clear: both;
width: 0px;
height: 0px;
margin: 0px;
}

<div id="container">
..<div id="main_section">
....<div id="content_area_new">
.......<div id="right_content">
.........CONTENT
.......</div>
.......<div id="left_content">
.........CONTENT
.......</div>
....<div class="clearboth">&nbsp;</div>
....</div>
..</div>
</div>

SuzyUK

5:51 pm on Nov 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



#content_area_new {
padding-top:0px;
margin:0 auto;
padding-bottom:20px;
width:703px;
background-color:#e6e1e1;
clear:both;
}


Demaestro don't add the extra element, that's the old fashioned way! ;) - either float the above container or add overflow: hidden to it, it should then contain the floated children

Demaestro

6:11 pm on Nov 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Suzy

Thanks!

Because there were a couple container elements to deal with I added the overflow tag as it seemed easiest in my case and it works great.

Thanks for suggesting newer/better practice. The solution I posted is most certainly a hack. This solution seems more elegant.