CSSについて

質問

こんにちは。
現在、ホームページの制作をしています。

早速ですが、
floatを使用し、左右に「お知らせ」と「PR」の見出しをつけようと思ったのですが・・・。

http://www5.atpages.jp/ri19960914/souzou.png
↑のように、ひとつ段落ができてしまいます。

このようにしたいのです。↓
http://www5.atpages.jp/ri19960914/souzou2.png

CSSはこちらです。↓
#mainbody .titleall { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:800px; padding:8px; }
#mainbody .titleleft { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; }
#mainbody .titleright { float:right; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; }
#mainbody ul.all { width:800px; white-space:normal; }
#mainbody ul.left { float:left; width:350px; }
#mainbody ul.right { float:right; width:350px; }
まだCSS初心者なので、不適切なCSSもあるかもしれません。
htmlソース↓
（途中略）
<div id="mainbody">
<div class="titleleft">お知らせ</div>
<ul class="left">
テスト（ここにお知らせの文字）
</ul>
<div class="titleright">PR</div>
<ul class="left">
ここに広告のhtmlタグ
</ul>

どなたか、
http://www5.atpages.jp/ri19960914/souzou2.png
のようになる方法を教えていただければ、幸いです。
お願いします。

追記：画像URLを開くと、Forbiddenエラーが出るので、
ご面倒だとは思いますが、URLボックスに直接アドレスを
入力してくださるよう、お願いします。

追記2：分からない点があったら、お願いします。

回答No.2

apweiser · ベストアンサー

こんにちわ、No.1です。

>1.「お知らせ」と「PR」の見出しがくっついているところ
これは、marginが0になってるからだと思います。

#mainbody .titleleft
#mainbody .titleright
の記述のどちらでもよいのですが、marginの値を変更してみてください。

下記の記述は「#mainbody .titleleft 」です。
#mainbody .titleleft {
float:left;
color:#fff;
font-size:12px;
font-weight:bold;
background-color:#636;
height:10px;
margin:0px 20px 0px 0px auto;
width:370px;
padding:8px;
}

margin幅を右に　20px　つけてます。

ただしこれだと、「お知らせ」と「PR」のタイトルは隙間が空きますが、その下からの内容はくっついてしまいます（google広告のところなど）。

なので、↓のように　left　なかに、タイトルを入れてはいかがでしょうか？
------------------------------------------------
<div id="mainbody">
<div class="titleall">ページタイトル</div>
<div class="all">
testtesttesttestテストテストテストテスト
</div>
<div class="left">
<div class="titleleft">お知らせ</div>
<table border=0 width=250 align=center>
<tr>
<th bgcolor="blue">test</th>
</tr>
</table>
</div>

<div class="right">
<div class="titleright">PR</div>.
<!--Google広告-->
<script type="text/javascript"><!--
google_ad_client = "pub-8546953577952947";
/* 336x280, 作成済み 08/08/30 */
google_ad_slot = "8145056513";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="​http://pagead2.googlesyndication.com/pagead/show_ads.js">​　<!-- Google広告ここまで -->
</script>
</div>

------------------------------------------------

今のままだと、タイトルとその内容が同じしばりになっていないので、
タイトル・内容ごとに、いちいちfloatをつけなくてはいけないのでひょっと非効率かな～と思いました。

そして#mainbody .leftを以下のように

#mainbody .left {
float:left;
width:350px;
margin:0px 20px 0px 0px;
}
marginをつけると、隙間が出来ると思います。

＞2.「お知らせ」の表（testと書かれているところ）がPRの下に来ているところ

これは、テーブルの閉じタグが抜けています。
<table border=0 width=250 align=center>
<tr>
<th bgcolor="blue">test</th>
</tr>
</table>

これでよいかと思います。

あと、ご存じでしたら申し訳ないのですが、下記のURLに、HTMLが正しいかどうかチェックしてくれるものがあります(無料です)。

結構便利だと思うのでご存じでなければみてみてください。

http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

わからないことがありましたら再度ご質問おねがいします。

お礼

ありがとうございます！
私の理想の通りにバッチリ行きました！

ありがとうございました！

回答No.1

apweiser

こんにちわ。何点か質問があります。

><ul class="left">
>テスト（ここにお知らせの文字）
></ul>
↑
<li></li>タグがありませんが、これは何か意味があるのですか？
だたこの質問だけ省略しているだけでしょうか？

あとこの部分に「お知らせ」以外の文字がはいらないのであれば、
わざわざ<ul></ul>をつかう必要がないかなと思います。

>#mainbody ul.left { float:left; width:350px; }

ここにもfloatが使われていますが、これは何のためのfloatなのでしょうか？

あと、#mainbody　のcssの記述がどうなっているかも見たいです。

補足

こんにちは！回答ありがとうございます！

>><ul class="left">
>>テスト（ここにお知らせの文字）
>></ul>
>↑
><li></li>タグがありませんが、これは何か意味があるのですか？
>だたこの質問だけ省略しているだけでしょうか？
>あとこの部分に「お知らせ」以外の文字がはいらないのであれば、
>わざわざ<ul></ul>をつかう必要がないかなと思います。
確かに、<li>を使う場面がありませんね・・・。
<ul>、消させていただきました。ありがとうございます。

>>#mainbody ul.left { float:left; width:350px; }
>ここにもfloatが使われていますが、これは何のためのfloatなのでし
ょうか？
これは、↑で<ul>を消したので
#mainbody .left { float:left; width:350px; }
になりますね。
えーと、上のfloatは、
見出し「PR」の下の広告や、「お知らせ」の下の表などを左または右に寄せるためにあります。

>あと、#mainbody　のcssの記述がどうなっているかも見たいです。
#mainbodyは、以下のとおりです。
（下の記述は、
http://www5.atpages.jp/ri19960914/test.png
のものです）
<div id="mainbody">
<div class="titleall">ページタイトル</div>
<div class="all">
testtesttesttestテストテストテストテスト
</div>
<div class="titleleft">お知らせ</div>
<div class="left">
<table border=0 width=250 align=center>
<tr>
<th bgcolor="blue">test</th>
</tr>
</div>
<div class="titleright">PR</div>.
<!--Google広告-->
<div class="right">
<script type="text/javascript"><!--
google_ad_client = "pub-8546953577952947";
/* 336x280, 作成済み 08/08/30 */
google_ad_slot = "8145056513";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">　<!-- Google広告ここまで -->
</script>
</div>
あと、見出しの<ul>をすべて抜いたところ、
（↓のアドレスもURLボックスに直接入力してくださるようお願いします。）
http://www5.atpages.jp/ri19960914/test.png
↑のようになりました。
ちょっと変なところもあるので、そこの部分を教えていただければ幸いです。
1.「お知らせ」と「PR」の見出しがくっついているところ
2.「お知らせ」の表（testと書かれているところ）がPRの下に来ているところ

よろしくお願いします。