Using the *?

HTML & CSS
1

I have a box class and im trying to apply this rule to this div


        <div class="box contact">
        <p class="heading">Contact us</p>
        <a href="#contactForm" class="btn"><span>Request A Quote</span></a>    
        </div>

and heres the css
.box {
float:left;
position:relative;
width:275px;
height:207px;
border:1px solid #442;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 4px 4px #000;
-webkit-box-shadow:0 0 4px 4px #000;
box-shadow:0 0 4px 4px #000;
background-image:url(/images/box_bg.png);
background-repeat:repeat-x;
background-position:bottom;
background-color:#FFFFFF;
margin-right:84px;
margin-bottom:25px;
}
.box * {
background-repeat:no-repeat;
background-position:right;
}
#main .box .contact{
background:url(/images/community.jpg)
}

am I right in my thinking here because I want the .box to have a background, but because it has the class contact, it has another background on top of the other background?

2

I dont understand why the background is repeated in the footer of\
http://fixmysite.us/index.php

3

That’s because the footer doesn’t have a background, what you see is the background of the body.

About your first question: “#main .box .contact” idoesn’t target anything. “.contact” is not a descendant of “.box”, so the second backgroundimage doesn’t show up. If you want to show the second image, target “.contact”.

4

my thinking is this.
I have 3 divs inside the footer (all should have a white background with that gradient image at the bottom.
Each of the three boxes should have an additional background in it thats different from the others.
Heres my basic code


<div id="footer">
    <div class="box community">
    <p>...<p>
    </div>
    <div class="box blog">
    <p>...<p>
    </div>
    <div class="box contact">
    <p>...<p>
    </div>
</div>

And here’s my css code (ER what I think)
.box {
float:left;
position:relative;
width:275px;
height:207px;
border:1px solid #442;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 4px 4px #000;
-webkit-box-shadow:0 0 4px 4px #000;
box-shadow:0 0 4px 4px #000;
background-image:url(/images/box_bg.png);
background-repeat:repeat-x;
background-position:bottom;
background-color:#FFFFFF;
margin-right:84px;
margin-bottom:25px;
}
which makes all three boxes look nice
but how do I target each 1 separately (community, blog, and contact) and give it a background which will appear underneath anything inside a <p>?
I think its best if I absolutely position the background so I can best position it, is that ok?
Thanks

5

If I understand you right then you want each <p> to have a different background?

.community p {background: url(/images/community_bg.png); }
.blog p {background: url(/images/blog_bg.png); }
.contact p {background: url(/images/contact_bg.png); }

No need for absolute positioning at all :slight_smile: