SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: using the *?

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    using the *?

    I have a box class and im trying to apply this rule to this div
    HTML Code:
            <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?
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I dont understand why the background is repeated in the footer of\
    http://fixmysite.us/index.php
    "Oh, and Jenkins--apparently your mother died this morning."

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,658
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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
    HTML 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
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand you right then you want each <p> to have a different background?

    Code:
    .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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •