アフィリエイトを縦に並べるには

質問

HTML側

<div id="a-box">
<div class="a-box2">
<ul style="list-style:none;">
<li><アフィリエイトのURL></li>
<li><アフィリエイトのURL></li>
<li><アフィリエイトのURL></li>
</ul>
</div>
</div>

スタイルシート側

#a-box { background : white ; clear : both ;
float : right ; width : 200px ; margin-right : 5em ; }

HP画面右側に白の縦長のスペースを設置し、その中にアフィリエイトを縦に並べました。ここまではうまくいったのですが、アフィリエイトの画像を、backgroundの中で、左右に均等に余白を空けようと思い、スタイルシートで

#a-box2 { float : center ; }　や

#a-box2 { padding : 5px ; }　、

#a-box2 { margin-left : 5em ; margin-right : 5em ; }

HTML側では div align="center"

等と組んでみたのですが、余白が全くあきません。誤字脱字は何回も確認しました。（この質問文は一部直接入力なので見落としがあるかもしれませんが）HTMLとCSSでタグの重複なども確認済みです。

　なにかが間違っているか、使用するタグがそもそも見当違いなのでしょうが、どうすればいいかわかりません。ご教授お願いします。

回答No.3

ORUKA1951 · ベストアンサー

HTMLは、きちんと文書構造を示すように書きましょう。特にdivやspanのclass名やidは、
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　div以外でも、当然そうあるべきで、自分なり他人なり検索エンジンでも文書構造がわかる。そうすると、先でアフェイエイトを縦に並べようと横に並べようとHTMLは変えなくて済む。スタイルシートだけを書き換えデザインを一挙に変換できる。
　★デザインのために<div>を多用するのはtableでデザインするのと変わりません。下記HTMLもスタイルシートもわかりやすいでしょ。

[例]下記サンプルは、タブを全角スペース2個に置換してあります。
[HTML]
<div class="header">ヘッダ</div>
<div class="section">本文</div>
<ul class="Affiliate">
　　<li><a href="">サイト1</a></li>
　　<li><a href="">サイト2</a></li>
　　<li><a href="">サイト3</a></li>
　　<li><a href="">サイト4</a></li>
</ul>
<div class="footer">フッタ</div>

だとして、親になるブロックが、staticな場合(relativeやabsoluteでない)と絶対配置でどこにでも持っていけるし、そうでなければ、親ブロックを基準に。。。
＊ポイント
　HTMLで言うところのブロックは、前後にマージンをとって改行される一塊の文書単位です。ブロックのマージンや巾を指定することが出来ます。floatさせると、他の要素から切り離された新しいブロックを生成します。
　ブロックを中央に配置(左右に均等な余白を取って配置)する場合は、widthとmarginの組み合わせで指定します。
　よって、「backgroundの中で、左右に均等に余白を空けよう」と言う場合はfloatは使えません。

[CSS]
html,body{background-color:gray;padding:0;margin:0;}
div.header,div.section,div.footer{margin:0 160px;width:auto;}
div.header{height:150px;background-color:aqua;}
div.section{height:300px;background-color:fuchsia;}
div.footer{height:100px;background-color:lime;}
/* ここまでサンプルのため */
/* ★ここから右へ配置する */
ul.Affiliate,ul.Affiliate li{
　　display:block;/* 単なるblockに変換 */
　　list-style:none;
　　margin:0;padding:0;/* デフォルトスタイルのリセット */
}
ul.Affiliate{
　　position:absolute;/* 親コンテナブロック(body)に対して絶対配置 */
　　width:160px;/* サイズ */
　　top:150px;right:0;/* 位置 */
　　background-color:white;/* 背景色 */
}
ul.Affiliate li{
　　width:80%;margin:5px auto;/* サイズ */
　　background-color:yellow;/* 背景色 */
}

[CSS]横並び ・・上の★以降を下記に変えるだけで横に並ぶ
/* ★ここから横に並べる */
ul.Affiliate,ul.Affiliate li{
　　display:block;/* 単なるblockに変換 */
　　list-style:none;
　　margin:0;padding:0;/* デフォルトスタイルのリセット */
}
ul.Affiliate{
　　width:auto;margin:0 160px;/* サイズ */
　　background-color:white;/* 背景色 */
　　height:40px;
}
ul.Affiliate li{
　　float:left;
　　width:23%;margin:5px;/* サイズ */
　　background-color:yellow;/* 背景色 */
}

お礼

おかげさまで無事解決しました、ありがとうございました。

回答No.2

trade105

その他部分の構成や各画像サイズなど分かりませんが、おそらくおやりになりたい事は、
ul {text-align:center; padding:5px; list-style:none;} のように、ul にたいしてセットすれば宜しいかと思います。

＞他のタグも同様です。div class　が間違いなのでしょうか？
いえ、それ自体が間違いということではなく、スタイルシートでの記述は、idが(#)、classは(.) としないと効きません。

お礼

ちょっと勉強不足でした、初心者には難しいです↓ありがとうございました。

回答No.1

trade105

HTML側ではa-box2はidではなくclassになってますので、
スタイルシートは、#a-box2 {****}ではなく、.a-box2 {****}となります。

お礼

皆様のおかげで無事解決しました、ありがとうございました。

補足

ご回答ありがとうございます。さっそく訂正し、再度同じように　padding や　marjin　等で試してみました。ですが、変化はあったものの、 margin　で組んだ際には、余白、というよりは、バックグラウンドのboxが大きくなってしまいます。

他のタグも同様です。div class　が間違いなのでしょうか？お手数ですが、再度アドバイスを頂ければ幸いです。

余談ですが、 float に　center は付かないのですね、失礼しました。