CSSをさわってみました。その２
の
コメント欄幅の変更にて、
タイホナ
さんからご質問がありましたので、以下にさわった箇所を載せました。
以下の部分を差し替えていただければコメント欄幅が広がると思います。
Windowｓ 版 IE と Firefox で確認しています。
ただ、デフォルトままのCSSで試していないので、もしかしたら不具合があるかもしれません。
不具合等ありましたら、コメントをお願いいたします。
※追記（2005.05.06）
上下のアキを整えるために、LI 部分を追加しました。
大変申し訳ありませんが、
下記部分を再度コピペして、CSSに反映させてください。
※注意（2005.05.06）
スキンによっては、widthの380ｐｘを小さくしないと「投稿する」ボタンの文字がズレます。
350ｐｘとかに変更してみてください。
※追記（2005.05.14）
実装編は
こちら
をご参考ください。
///////////////////////////////////////////
#comment_module label{
text-align: left;
float: left;
width: 250px;
display: block;
}
#f_name,#f_url,#f_title{
display:inline;
width: 250px;
margin-bottom: 3px;
margin-left: 0px;
padding-left: 0px;
}
#f_com{
display:inline;
width: 380px;
margin-bottom: 3px;
margin-left: 0px;
padding-left: 0px;
}
#comment_module form ul {
margin-left: 0px;
padding-left: 0px;
width: 380px;
}
#comment_module form li {
margin-bottom: 0px;
border-bottom-width: 0;
margin-left: 0px;
padding-left: 0px;
width: 380px;
display: block;
}
#comment_module li.lastItem {
display: block;
width: 380px;
margin-bottom: 5px;
text-align: right;
}
#comment_module .button {
margin-left: 5px;
font-size: 11px;
width: 80px;
}
li {/*ishida*/
line-height: 125%;
padding-top: 3px;
padding-bottom: 2px;
}
///////////////////////////////////////////
ここから先はちょっと専門的話題です。
名前、URL、タイトル、コメントの欄は UL、LI タグが使われていて、デフォルトとして左のマージンを持っています。
UL、LI タグは、IE と Opera や Firefox ではマージンの解釈が異なるようなので、
margin-left: 0px;
padding-left: 0px;
を入れました。
また、labelは、
display: inline;
となっており、『名前：入力枠』のように１行になるようになっていましたので、blockに変更してあります。
あとは入力欄の幅を変更しました。
追記（2005.05.05）：
名前、URL、タイトル欄と、コメント欄の幅は、気分的に変えたかったので、
#f_name,#f_url,#f_title
と
#f_com
に分けて、幅を変えました。
ここの display:inline; もblock にしたほうがいいのかなと思うのですが、上下のマージンを調整する必要がでてくると思ったので、デフォルトのままにしています。
追記（2005.05.06）：
LI 部分をカスタマイズしてましたので、追加しました。
