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;
}
答案 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>