写真を回り込ませる方法
::::: CSS表記 :::::
.imageRight {float:right;margin:0px 0px 5px 5px;}
::::: HTML表記 :::::
<p>
<img src="img/sample002.jpg" width="120" height="90" class="imageRight" /> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
.imageRight {float:right;margin:0px 0px 5px 5px;}
::::: HTML表記 :::::
<p>
<img src="img/sample002.jpg" width="120" height="90" class="imageRight" /> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
見やすく使いやすいページング
::::: CSS表記 :::::
#paging {
margin:10px;padding:0px;
}
#paging a {
text-align:center;padding:3px 4px 2px 4px;
text-decoration:none;font-weight:bold;color:#555555;
border:1px solid #CCCCCC;background:#FFFFFF;
}
#paging a:hover {background:#FFCC99;}
#paging a:visited {background:#FFFFFF;}
#paging a:active {background:#CCFFCC;}
※ #paging a:visited {background:#FFFFFF;} を指定すると、IE7では正常に動作しないことがわかりました(泣)。ですので、書かなくてOKです。
::::: HTML表記 :::::
<div id="paging">
<strong>Paging</strong>:
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
#paging {
margin:10px;padding:0px;
}
#paging a {
text-align:center;padding:3px 4px 2px 4px;
text-decoration:none;font-weight:bold;color:#555555;
border:1px solid #CCCCCC;background:#FFFFFF;
}
#paging a:hover {background:#FFCC99;}
#paging a:visited {background:#FFFFFF;}
#paging a:active {background:#CCFFCC;}
※ #paging a:visited {background:#FFFFFF;} を指定すると、IE7では正常に動作しないことがわかりました(泣)。ですので、書かなくてOKです。
::::: HTML表記 :::::
<div id="paging">
<strong>Paging</strong>:
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
CSSで“最低”の高さを指定する
最低の高さ「50px」に指定
.takasa50 {
min-height:50px;
height:auto !important;
height:50px;
margin:0px 0px 10px 0px;padding:10px;
border:1px dotted #FF6600;
}
<div class="takasa50">このdivは、最低の高さ「50px」に指定してあります。</div>
.takasa50 {
min-height:50px;
height:auto !important;
height:50px;
margin:0px 0px 10px 0px;padding:10px;
border:1px dotted #FF6600;
}
<div class="takasa50">このdivは、最低の高さ「50px」に指定してあります。</div>