Css'den pek anlamam ama genede yardımcı olmaya çalışmak istedim.
Yada şöylede deneyebilirsiniz.
Yazılar için div yerine span kullanın.
Yani böyle deneyiniz :
Not :
Kod:
<div id="container" class="mov">
<div class="mhead"><b>Latest Section</b></div>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<div class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</div>
</a>
</li>
</div>
Yazılar için div yerine span kullanın.
Yani böyle deneyiniz :
Kod:
<div id="container">
<div class="mov">
<span class="mhead"><b>Latest Section</b></span>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
<li>
<a href="#"><img width="50" height="50" src="image/mov.png">
<span class="mtext"><b style="font-size: 15px;">Teen Wolf</b><p>Season 3 Section 4</p>
</span>
</a>
</li>
</div>
</div>
Alıntı:Div ile span'ın display özellikleri farklı olduğu için, biri yanyana, biri alt alta gözükür. Div'e benzer bir span kullanmak için, span'ın css kısmına display: block; eklemen lazım.
Div alanlar için, span ise ufak yazılar için kullanılır genelde. Örneğin bir yazının tarihini, başlıktan daha küçük ve farklı renkte, farklı özelliklerde tanımlamak istersen span kullanırsın ama başlık ve içeriğin olduğu kısmı div içine alırsın.