CSSのfloatを使ってバナーを横並びにしています。
3列バナー横並び
220px+20px+220px+20px+220px=700px
はみ出た余白は、margin-right:-20px;でカットしています
背景色は範囲を分かりやすくするためにつけています。マウスオーバー用に画像もCSSも作っていますが、不要なら削除してください。
HTMl
<div class="mod_Banner001"> <ul class="ex_clearfix"> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> <li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li> </ul> <!-- mod_Banner001_end --></div>
CSS
.mod_Banner001{ width:700px; background-color:#EEE; } .mod_Banner001 ul{ width:720px; margin-right:-20px; } .mod_Banner001 li{ width:220px; height:60px; float:left; padding:0 20px 0px 0; margin:0 0 10px 0; overflow:hidden; } .mod_Banner001 li a{ display:block; } .mod_Banner001 li a:link {} .mod_Banner001 li a:visited {} .mod_Banner001 li a:hover {margin-top:-60px;} .mod_Banner001 li a:active {margin-top:-60px;}