8 Replies Latest reply on Sep 20, 2016 11:50 AM by erikj7@me.com

    I have a selector that seems to control 2 images

    erikj7@me.com Level 1

      Hi,

       

           I am almost finished with the layout of my home page.  I wanted to rotate the article image by 15 degrees via CSS.  However when I do this, it rotates the image in the div(within that article) as well.  I would have thought the image in the div would be unaffected by the other, because it's in its own div.   Is there any way to unlink these 2 selectors?  What am I doing wrong?

       

          Thank you.

       

      -Erik

       

      Here's the html:

      <!doctype html>

      <html>

      <head>

      <meta charset="UTF-8">

       

      <title>Long Lasting Brush Company</title>

      <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

      <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alexa-std:n4:default;aladin:n4:default;advent-pro:n4:default;droi d-sans-mono:n4:default.js" type="text/javascript"></script>

      <link href="styles.css" rel="stylesheet" type="text/css">

      </head>

       

       

      <body>

       

       

      <header>

      <nav>

      <p><a href="index.html" class="navHome">Home</a>  <a href="features.html" class="navFeatures">Features</a>  

      <a href="benefits.html" class="navBenefits">Benefits</a>  

      <a href="Testimonials.html" class="navTestimonials">Testimonials</a>  

      <a href="about.html" class="navAbout">About</a>  

      <a href="contact.html" class="navContact">Contact</a></p>

      </nav>

      </header>

       

       

      <article>

        <h1><strong>The Brush Capsule</strong>&trade;</h1>

        <img src="images/index/brush_open_sleeve.png" width="170" height="727" alt="Patented Air Tight Paint Brush Cover"/>

      <section><p>is a patented Air Tight paint brush cover that is made to keep your brush wet in between uses.*  Saving time, money, brushes and the enironment.</p>

       

       

      <div><h2>PROMOTION</h2><p>Act now and receive a free brush with the purchase of a <strong>Brush Capsule

      </strong>&trade; <img src="images/index/2 brushes in packing.png" width="184" height="240" alt=""/>

      <br>

      <span>Buy Now</span></p></div></section>

      </article>

       

       

      <h3><section class="sectionLeft"><a href="saves_time_money_environment.html" title="SavesTimeMoneyandEnvironment" target="_self">Saves Time Money and the Environment</a></section>

       

       

      <section class="sectionMiddle"><a href="questions.html" title="Questions" target="_self">Ask Yourself these Questions</a></section>

       

       

      <section class="sectionRight"><a href="how_to_use.html" title="How to Use" target="_self">How to Use</a> </section></h3>

       

       

      <footer class="Footer">

      <ul style="list-style-type:none">

      <a href="features.html" title="Features" target="_self"><li class="liFeatures">Features</li></a>

      <a href="savestime.html" title="SavesTime" target="_self"><li class="liSavesTime">Saves Time</li></a>

      <a href="savesenvironment.html" title="SavesEnvironment" target="_self"><li class="SavesEnviroment">Saves Environment</li></a>

      <a href="testimonials.html" title="Testimonials" target="_self"><li class="liTestimonials">Testimonials</li></a>

      <a href="contact.html" title="Contact" target="_self"><li class="liContact">Contact</li></a>

      <a href="sizess.html" title="Sizes" target="_self"><li class="liSizes">Sizes</li></a>

      <a href="purchase.html" title="Purchase" target="_self"><li class="liPurchase">Purchase</li></a>

      </ul>

      <br>

      <br>

      <br>

      <p class="pFooterARR">Long Lasting Brush Company, LLC - All rights reserved.</p>

      <p class="footerPcreatedby">website created by:</p>

      <div>

      <a href="www.pdp-3d.com/" target="_self"><img src="images/footer/PDPwhite.svg" alt="www.pdp-3d.com" class="footerPdplogo"></a></div>

      <div><p>Save Time Money and the Environment.  Don't Hassel... get the Brush Capsule!</p></div>

      </footer>

       

       

      </body>

      </html>

      Here is the CSS:

      @charset "UTF-8";

      body {

        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

        font-style: normal;

        font-weight: 400;

        padding-top: 0px;

        display: block;

        padding-left: 0px;

        padding-right: 0px;

        padding-bottom: 0px;

        margin-top: 0px;

        margin-right: 0px;

        margin-left: 0px;

        margin-bottom: 0px;

        position: relative;

        top: -50px;

        bottom: auto;

        background-image: url(images/index/wood_table_bg_1.jpg);

        background-repeat: no-repeat;

        background-size: cover;

        background-attachment: fixed;

      }

      header {

        padding-top: 15%;

        font-family: alexa-std;

        font-style: normal;

        font-weight: 400;

        background-repeat: no-repeat;

        background-position: 0 53px;

        background-size: 37% auto;

        margin-top: 0px;

        display: block;

        clear: none;

        margin-left: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

        padding-left: 0px;

        padding-right: 0px;

        padding-bottom: 0px;

        height: 15%;

        background-image: url(images/header/LLBC%20Header_nobg.png);

      }

      nav {

        background-color: #020202;

        color: #F8F8F8;

        text-align: center;

        margin-top: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

        margin-left: 0px;

        padding-left: 0px;

        padding-top: 0px;

        padding-right: 0px;

        padding-bottom: 0px;

        font-weight: 800;

        font-variant: normal;

        font-size: 2em;

        display: block;

      }

      .navHome {

        padding-top: 100px;

        padding-right: 2%

        background-image: url(image/nav/envlp.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-position: 0% 85px;

        -webkit-transition: all .5s ease 0s;

        -o-transition: all .5s ease 0s;

        transition: all .5s ease 0s;

        background-image: url(images/nav/home.svg);

      }

      .navHome:hover {

        background-position: 0px 70px;

        color: #F80004;

      }

      .navFeatures {

        padding-top: 100px;

        padding-right: 2%

        background-image: url(image/nav/envlp.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-position: 0% 74px;

        -webkit-transition: all .5s ease 0s;

        -o-transition: all .5s ease 0s;

        transition: all .5s ease 0s;

        background-image: url(images/nav/services.svg);

      }

      .navFeatures:hover {

        background-position: 0px 30px;

        color: #F80004;

       

       

      }

      .navBenefits {

        padding-top: 100px;

        padding-right: 2%

        background-image: url(image/nav/envlp.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-position: 0% 60px;

        -webkit-transition: all .5s ease 0s;

        -o-transition: all .5s ease 0s;

        transition: all .5s ease 0s;

        background-image: url(images/nav/tme.svg);

       

      }

      .navBenefits:hover {

        background-position: 0px 40px;

        color: #F80004;

      }

      .navTestimonials {

        padding-top: 100px;

        padding-right: 2%

        background-image: url(image/nav/envlp.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-position: 0% 74px;

        -webkit-transition: all .5s ease 0s;

        -o-transition: all .5s ease 0s;

        transition: all .5s ease 0s;

        background-image: url(images/nav/wow.svg);

      }

      .navTestimonials:hover {

        background-position: 0px 10px;

        color: #F80004;

      }

      .navAbout {

        padding-top: 100px;

        padding-right: 2%

        background-image: url(image/nav/envlp.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-position: 0% 74px;

        -webkit-transition: all .5s ease 0s;

        -o-transition: all .5s ease 0s;

        transition: all .5s ease 0s;

        background-image: url(images/nav/us_puzzle.svg);

      }

      .navAbout:hover {

        background-position: 0px 50px;

        color: #F80004;

      }

      .navContact {

        padding-top: 100px;

        padding-right: 2%

        background-image: url(image/nav/envlp.svg);

        background-size: contain;

        background-repeat: no-repeat;

        background-position: 0% 74px;

        -webkit-transition: all .5s ease 0s;

        -o-transition: all .5s ease 0s;

        transition: all .5s ease 0s;

        background-image: url(images/nav/envlp.svg);

      }

      .navContact:hover {

        background-position: 0px 50px;

        color: #F80004;

      }

      article {

        background-color: rgba(255,255,255,1.00);

        margin-left: 15%;

        margin-right: 25%;

        padding-bottom: 1px;

      }

      h2 {

        margin-left: 0px;

        margin-top: 5px;

        padding-top: 5px;

        padding-left: 1%;

        -webkit-text-stroke: 1px red;

        font-size: 2.5em;

        text-align: center;

        float: left;

        position: relative;

        right: 0%;

        margin-bottom: 0em;

        padding-right: 1%;

      }

      h3 {

        font-family: alexa-std;

        font-style: normal;

        font-weight: 400;

        color: rgba(255,254,254,1.00);

        font-size: 1.5em;

        padding-bottom: 0em;

      }

      body article section {

        background-color: rgba(0,73,255,0.20);

        padding-left: 5%;

        margin-left: 0px;

        margin-right: 51%;

        padding-bottom: 8%;

        padding-right: 5%;

        margin-bottom: 5%;

        margin-top: 0px;

        padding-top: 1%;

      }

      body article img {

        float: right;

        margin-right: 20%;

        position: relative;

        margin-bottom: 0px;

        display: inline-block;

        clear: left;

      }

      article section div {

        background-color: rgba(0,0,0,1.00);

        padding-left: 0%;

        padding-right: 0%;

        color: rgba(255,255,255,1.00);

        padding-top: 0px;

        padding-bottom: 155%;

      }

      section div p {

        float: left;

        clear: left;

        margin-left: 1%;

      }

      div p img {

      }

      section div span {

        color: rgba(255,0,4,1.00);

        font-size: 2em;

        clear: both;

        float: left;

        padding-left: 15%;

        padding-right: 15%;

      }

      .sectionLeft {

        width: 20%;

        height: 250px;

        /* [disabled]margin-left: 15%; */

        background-color: rgba(153,150,151,1.00);

        /* [disabled]margin-top: 0px; */

        background-repeat: no-repeat;

        display: block;

        clear: both;

        position: relative;

        float: left;

        left: 15%;

        background-image: url(images/side_left/tme.svg);

        background-position: 0% 40%;

        background-size: contain;

      }

      .sectionMiddle {

        width: 20%;

        height: 250px;

        background-color: rgba(0,73,255,1.00);

        margin-left: 0px;

        margin-top: 0px;

        display: block;

        float: right;

        position: relative;

        left: -45%;

        clear: right;

        background-size: contain;

        background-repeat: no-repeat;

        background-image: url(images/side_middle/questions.svg);

        background-position: 14% 60%

      %;

        background-position: 0% 121%;

      }

      .sectionRight {

        width: 20%;

        height: 250px;

        background-color: rgba(0,0,0,1.00);

        margin-left: 0px;

        margin-top: 0px;

        display: block;

        position: relative;

        float: right;

        left: -5%;

        margin-bottom: 50px;

        background-image: url(images/side_right/youtube_pic.png);

        background-repeat: no-repeat;

        background-position: 0% 68%;

        background-size: contain;

      }

      .Footer {

        background-color: rgba(0,73,255,1.00);

        text-align: center;

        color: rgba(251,248,248,1.00);

        font-family: alexa-std;

        font-style: normal;

        font-weight: 400;

        padding-top: 3px;

        padding-bottom: 110px;

        font-size: 1.2em;

        margin-top: 100px;

        padding-left: 0px;

        display: block;

        position: relative;

        bottom: 30px;

        left: auto;

        clear: both;

      }

      .Footer ul {

      }

      a {

        color: rgba(255,255,255,1.00);

        text-decoration: none;

      }

      div a .footerPdplogo {

        background-image: url(images/footer/PDPwhite.svg);

      }

      .Footer ul a {

      }

      ul a .liFeatures {

        border-right: 0.1em solid rgba(255,255,255,1.00);

        float: left;

        clear: right;

        padding-right: 7px;

        padding-top: 5px;

        padding-left: 10px;

        padding-bottom: 5px;

      }

      ul a .liSavesTime {

        padding-left: 10px;

        padding-bottom: 5px;

        padding-top: 5px;

        padding-right: 7px;

        border-right: 0.1em solid rgba(255,255,255,1.00);

        display: inline;

        float: left;

      }

      ul a .SavesEnviroment {

        float: left;

        border-right: 0.1em solid rgba(255,255,255,1.00);

        padding-left: 10px;

        padding-right: 7px;

        padding-top: 5px;

        padding-bottom: 5px;

      }

      ul a .liTestimonials {

        padding-left: 10px;

        padding-right: 7px;

        padding-top: 5px;

        padding-bottom: 5px;

        float: left;

        border-right: 0.1em solid rgba(255,255,255,1.00);

      }

      ul a .liContact {

        border-right: 0.1em solid rgba(255,255,255,1.00);

        float: left;

        padding-top: 5px;

        padding-right: 7px;

        padding-left: 10px;

        padding-bottom: 5px;

      }

      ul a .liSizes {

        border-right: 0.1em solid rgba(255,255,255,1.00);

        float: left;

        padding-top: 5px;

        padding-right: 7px;

        padding-left: 10px;

        padding-bottom: 5px;

      }

      ul a .liPurchase {

        border-right: 0.1em solid rgba(255,255,255,1.00);

        float: left;

        padding-top: 5px;

        padding-right: 7px;

        padding-left: 10px;

        padding-bottom: 5px;

      }

      .Footer .pFooterARR {

        text-align: left;

        display: inline;

        clear: left;

        float: left;

        position: relative;

        bottom: 20px;

        margin-left: 7%;

      }

      .Footer .footerPcreatedby {

        display: inline;

        float: left;

        margin-left: 20%;

        position: relative;

        bottom: 20px;

      }

      .Footer div {

       

       

      }

       

       

      div a .footerPdplogo {

        width: 10%;

        display: inline-block;

        text-align: left;

        position: relative;

        float: left;

        bottom: 20px;

      }

      .Footer div p {

        display: inline;

        clear: left;

        float: left;

        position: relative;

        bottom: 30px;

        margin-left: 18%;

        font-size: 1.5em;

        }