div element starting to act as anchor tag elements

时间:2015-11-12 11:09:06

标签: html css

there are 3 div tags as shown below..first div i.e "marketer" acts according to the style written..but the next two div's i.e "coder" and "designer" acting like anchor tag elements?

HTML:

<div class="our_team_members">

   <div class="marketer">
      <img src="images/marketer.png" alt="marketer"/>
     <h4>Kimberly Thompson</h4>
        <p>Marketer</p>
         <ul>
           <li><a href="#" target="_blank"><img src="images/white-twiitter.png"/> </li>
           <li><a href="#" target="_blank"><img src="images/white-fb.png"/> </li>
           <li><a href="#" target="_blank"><img src="images/white-pinterest.png"/> </li>
        </ul>
    </div>

    <div class="coder">
      <img src="images/coder.png" alt="coder"/>
      <h4>Rico Massimo</h4>
      <p>Coder</p>
        <ul>
           <li><a href="#" target="_blank"><img src="images/white-twitter.png"/> </li>
           <li><a href="#" target="_blank"><img src="images/white-fb.png"/> </li>
           <li><a href="#" target="_blank"><img src="images/white-google-plus.png"/> </li>
        </ul>
    </div>

    <div class="designer">
      <img src="images/designer.png" alt="coder"/>
      <h4>Uku Mason</h4>
      <p>Graphic Designer</p>
        <ul>

           <li><a href="#" target="_blank"><img src="images/white-fb.png"/> </li>
           <li><a href="#" target="_blank"><img src="images/white-pinterest.png"/> </li>
        </ul>
    </div>

  </div>

CSS:

  .our_team_members {
      width:100%;
      float:left;
      margin: 58px 0 90px;
      border:1px solid red;
  }
  .marketer, .coder, .designer {
      width:250px;
      border:1px solid black;
      text- align:center;
      float:left;
  }
  .marketer img, .coder img, .designer img {
      max-width:100%;
  }
  .marketer h4, .coder h4, .designer h4 {
      font-size:20px;
  }
  .marketer p, .coder p, .designer p {
      font-size:16px;
      color:#777777;
  }
  .marketer ul, .coder ul {
      width:150px;
      margin:8px auto;
      float:none;
      border:1px solid red;
  }
  .designer ul {
      width:100px;
      margin:8px auto;
      float:none;
      border:1px solid red;
  }
  .marketer ul li, .coder ul li, .designer ul li {
      list-style:none;
      float:left;
      text-align:center;
      margin: 0 4px;
  }

2 个答案:

答案 0 :(得分:0)

You aren't closing your anchor tags

<li><a href="#" target="_blank"><img src="images/white-twiitter.png"/> </li>

See? I assume it should be like this?

<li><a href="#" target="_blank"><img src="images/white-twiitter.png"/></a></li>

答案 1 :(得分:0)

you can try this one:

<div class="our_team_members">

   <div class="marketer">
      <img src="images/marketer.png" alt="marketer"/>
     <h4>Kimberly Thompson</h4>
        <p>Marketer</p>
         <ul>
           <li><a href="#" target="_blank"><img src="images/white-twiitter.png"/></a> </li>
           <li><a href="#" target="_blank"><img src="images/white-fb.png"/></a> </li>
           <li><a href="#" target="_blank"><img src="images/white-pinterest.png"/> </a></li>
        </ul>
    </div>

    <div class="coder">
      <img src="images/coder.png" alt="coder"/>
      <h4>Rico Massimo</h4>
      <p>Coder</p>
        <ul>
            <li><a href="#" target="_blank"><img src="images/white-twitter.png"/> </a></li>
           <li><a href="#" target="_blank"><img src="images/white-fb.png"/> </a></li>
           <li><a href="#" target="_blank"><img src="images/white-google-plus.png"/></a> </li>
        </ul>
    </div>

    <div class="designer">
      <img src="images/designer.png" alt="designer"/>
      <h4>Uku Mason</h4>
      <p>Graphic Designer</p>
        <ul>

           <li><a href="#" target="_blank"><img src="images/white-fb.png"/></a> </li>
           <li><a href="#" target="_blank"><img src="images/white-pinterest.png"/> </a></li>
        </ul>
    </div>

  </div>

DEMO HERE