2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 5 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Given the following code :

<section id="ourteam">
    <div class="container">
        <div class="margin-top-50"></div>
            <div class="row">
                    <div class="col-md-12 text-center">
                            <h1 class="banner h-ourteam">Meet Our Team</h1>
                    </div>
            </div> <!-- end of row -->
    </div> <!-- end container -->        
            <div class="margin-bottom-50"></div>
                 <div class="container">
   <div class="well">
            <div class="margin-top-50"></div>
    <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <img src="img/team/Lata.jpg" class="pull-left me img-responsive img-circle img-shadow">
                <h1> Lorium Ipsum</h1>
                <small> Lorium Ipsum</small>
                <p>Lata is a very knowledgeable teacher and she gives a lot of freedom to the teachers to experiment with teaching methods. She is approachable to the teachers whenever they need advice from her. A very simple, down to earth, sincere, hardworking and focused person. A good mentor who always motivates others to reach their potential and guides you when you need help.</p>        
            </div>
    </div>
 
    <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <img src="img/team/ Lorium Ipsum.jpg" class="pull-right me img-responsive img-circle img-shadow">
                <h1>  Lorium Ipsum Trikannad </h1>
                <small> Lorium Ipsum</small>
                <p> Lorium Ipsum is teacher who has lots of patience with the kids. She is a very meticulous person and does her work diligently is a very charming, charismatic, patient and composed person. Someone you can count on and rely on for the right kind of advice.</p>        
            </div>
    </div>
 
    <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <img src="img/team/Kusuma.jpg" class="pull-left me img-responsive img-circle img-shadow">
                <h1> Lorium Ipsum</h1>
                <small>  Lorium Ipsum</small>
                <p> Lorium Ipsum is a very Sweet, Affectionate person. She is very patient and sincere. Very efficient in her work and is definitely a pillar of strength at Phoenix Kids. Somebody you can bank on.</p>        
            </div>
    </div>
 
     <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <img src="img/team/Joshna.jpg" class="pull-right me img-responsive img-circle img-shadow">
                <h1>Sudeshna </h1>
                <small> Lorium Ipsum</small>
                <p>is completely dedicated and full of life! Joshna has lots of energy and she is a very sincere, hardworking and a dedicated teacher. She is very creative as well.</p>        
            </div>
    </div>
 
    <div class="margin-top-50"></div>
 
    <div class="row text-center">
            <div class="col-md-12">
                <a class="back-button" href="team.html">
                    <span >Meet Our team</span>
                </a>
            </div>
    </div> <!-- end of row -->
 
    <div class="margin-bottom-50"></div>
 
    </div> <!-- end of well -->
        <div class="margin-bottom-50"></div>
 </div> <!-- end of container -->
 
 
</section>

why does the following css rule apply :

#ourteam .img-shadow{
    -webkit-box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5);
    box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5);
    padding: 5px 0;
    margin: 0 25px;
}

but this does't :

#ourteam > .img-shadow{
    -webkit-box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5);
    box-shadow: inset 0 -1px 5px 1px hsla(0, 0%, 0%, 0.5);
    padding: 5px 0;
    margin: 0 25px;
}

????

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 33 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not a child element

I saw no instance where .img-shadow was a child of #ourteam. The child is a specific case of descendent.

I also saw no instance of sanity in the choice of class tokens. This appears to be an example taken from some grid based system. Don't go there; it is stupidity in action. Seriously.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 5 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

gary LOL

but thanks !