divを中央に寄せたい

質問

恐れ入ります。
現在、修正を加えたいhtmlコードの中で、以下のdiv要素をセンターに寄せることが出来ません。
中央に寄せたい部分は、上部のメニューバーです。

以下がhtmlコードです。

<div id="menune">
<div class="clearfix">
<ul>
<li>
<a href="index.html" class="first active">HOME</a>
</li>
<li>
<a href="review.html">casino bonus guide</a>
<ul>
<li><a href="#"> jepang1</a> </li>
<li><a href="#"> jepang2</a> </li>
<li><a href="#"> jepang33</a> </li>
</ul>
</li>
<li>
<a href="top10/top10index.html">Online Casino</a>
</li>
<li>
<a href="#">free casino</a>
</li>
<li>
<a href="top.html">gaming guides</a>
</li>
<li>
<a href="contact/contact-index.html" class="last">Contact Us</a>
</li>
</ul>
<div class="clearfix:after">
</div>
</div>
</div>

どこのcssの表記が邪魔をしているのか分からなくて困っております。
cssの知識が乏しくてご迷惑をおかけしますが、宜しくお願いします。
失礼致します。

回答No.4

karita_83 · ベストアンサー

再度のソースのご提示ありがとうございます。

http://www.sl-success.com/hallo-casino/index-testjefri11-1.html
上記のように、ulが中央に寄せられず、左右の背景（黒）を変更することができません。

の方ですが、私が確認した環境では真ん中に調整されています。
ブラウザチェックすれば私も分かるとは思うのですが、
どのブラウザで見たときにどう崩れているのか教えてください。

上記URLでの背景色黒が出ている現象ですが、
黒く見えているのはbodyについた背景のようです。
なので、

<div id="hoge">
<div id="menue">
・・・・・・
・・・・
</div>
</div>

#hoge{
width:100%;
text-align:center;
background:#ff0000;
}

というように、一度背景が赤い別の要素の中に入れてあげてください。
それか、背景画像を修正してもいいのかなとは思います。

http://www.sl-success.com/hallo-casino/index-testjefri13-2.html

は、ただのaタグとdiv要素ul要素が混在しているのですが、
それぞれaタグにもfloatをかけていけば横並びにはなるかと。
そして、上記のURLでは#menueに幅は設定されていないので
前回ご説明したとおり、margin:0 auto;は効きません。

htmlの要素には、回り込みなしで横並びになるinline要素とそうはならないblock要素とがあります。
それらの特性をつかんでいくことがcssを上手く使う鍵になりますよ。

http://www.mozilla.gr.jp/standards/

上記サイトが分かりやすいと思います。

お礼

貴重なアドバイス、ありがとうございます。
もっと調べてみます。
今後とも宜しくお願いします。

回答No.3

karita_83

cssのご提示ありがとうございます。

見たところ、cssの中で
#menune liや#menune ulに幅が指定されていません

#menune ul{
background:#cccccc;
list-style:none;
margin-right:auto;
margin-left:auto;
}

のように指定したとしても、ulに幅という概念が現状ないので、
右と左からのマージンをautoでということができないのです。
あとは、ulには確かmargin autoが効かなかったようなそんな気がするので
#menune｛
width:任意の幅;
margin:0 auto;
background:#ff0000;
border-bottom:#345065 1px solid;
｝
とすればいいかと。

たしか前にネットカジノのサイトのことで質問されていた方ですよね？
覚えている限り、あのサイトさん確かメニューのひとつひとつが可変だったように思われるので、
floatでメニューを動かすのはやめて、
display:inlineで横並びにして、
大枠の<div id="menune">をtext-align:center;に
<div id="menune">に、デザイン上無理のない幅を設定してmargin:0 auto;で中央表示という手もありますし、
それか
親メニューひとつひとつにクラスをつけて、幅を指定
合計数を#menuに指定するという手もありますね。
この場合はfloatはしたままでOKです。
その際、おまじない程度の意味合いですが、親メニューたちをくくっているulにクラスなりidなりを付けて
そちらにも幅を指定しておくとうまくいくと思いますよ。

分からないことがあればまた聞いてください。

背景色は

#menune ul{
background:#cccccc;
list-style:none;
margin-right:auto;
margin-left:auto;
}
#menune li a{
background:#1d3c55;
display:block;
text-align:center;
line-height:15px;
border-left:#001F39 1px solid;
border-right:#345065 1px solid;
padding:20px 25px 14px 25px;
}
の二箇所に背景色が設定されているので、多分今どちらかの色になっているのではと・・。
この二箇所を赤にしてみてください。

あとはyyr446さんにもお礼をされるべきかと。
私より先に答えてくださっているし、間違った解答もされてないですよ。

補足

貴重なご意見ありがとうございます。divとulに幅を指定してみましたが、

http://www.sl-success.com/hallo-casino/index-testjefri11-1.html
上記のように、ulが中央に寄せられず、左右の背景（黒）を変更することができません。

また、
http://www.sl-success.com/hallo-casino/index-testjefri13-2.html
上記のサイトのようにテーブルメニューの中に、ulを組み込んでみました。このプルダウンしたいULをメニューの中に入れたいのですが、うまくフロートできません。

こちらのサイトのソースを書きます。

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a>
<div class="menune">
<ul>
<li>
<a href="review.html">bonus ne</a>
<ul>
<li><a href="#"> jepang1</a> </li>
<li><a href="#"> jepang2</a> </li>
<li><a href="#"> jepang33</a> </li>
</ul>
</li>
</ul>
</div>
<a href="contact/contact-index.html" class="last">Contact Us</a></div></td>
</tr>

対応しているcssは以下の通りです。

.menune{
background:#ff0000; /*------#1d3c55----------*/
border-bottom:#345065 1px solid;
margin-left:auto;
margin-right:auto;
width:auto;
height:auto;
text-align:center;
}
.menune ul{
list-style:none;
}

.menune li{
float:left;
}
.menune li a{
background:#1d3c55;
color:#cccccc;
display:block;
text-align:center;
text-decoration:none;
text-transform:uppercase; /*----全て大文字に変換する------*/
border-left:#001F39 1px solid;
border-right:#345065 1px solid;
padding:20px 25px 14px 25px; /*---20px 25px 14px 25px-----*/
}
.menune li a:hover, .menune ul li:hover a{
background:#001F39; /*---001f39-----*/
color:#e9f1f9; /*---e9f1f9-----*/
text-decoration:none;
}
.menune li ul{
background:none;
display:none;
padding:0px;
margin:0px;
border:0px;
position:absolute;
z-index:200;
}
.menune li:hover ul{
display:block;
}
.menune li li {
display:block;
float:none;
margin:0px;
padding:0px;
height:70px;
width:135px;
}

上記のサイトの方をうまく修正できればありがたいのですが、もしお分かりであればご教授お願い致します。

失礼します。

回答No.2

karita_83

こんにちは。

どこのcssの表記が邪魔をしているのか分からないのであれば、
関係ありそうなcssの部分を抜き出して貼っていただけるとお答えできるかもしれません。
だいたいは、
ul li #menune
あたりの表記があるものを抜き出していただけると。

見た感じ、リストがfloatして横並びになっているのかなという印象は受けました。

基本的にはyyr446さまのおっしゃっているスタイルで中心寄せになります。
他は前後のタグがわからないのでなんともいえませんが、
<div id="menune">
がbodyの直下ではなく、幅を持ったdivの中の要素であれば
body{text-align:center;}は省いてしまってよいかと思います。

とりあえず、何をしたけれどうまくいかないのかということを教えていただけると
こちらも理解しやすいです。

補足

貴重なご意見、ありがとうございます。
関係していそうな部分のcssコードを記載致します。

当面の解決したい問題点は、<div id="menune">をセンターに寄せて、背景色（現在赤に設定）を変更できるようにもっていきたいことです。

宜しければ、ご教授をお願いします。

body {
padding : 0;
margin : 0;
font : 12px/16px 'Arial', Helvetica, sans-serif;
color : #CDFFCD;
background:#006c05 url(../images/main-bg.gif) top left repeat-x;
}
td{font : 12px/16px 'Arial', Helvetica, sans-serif;
color:#cdffcd;}

div, h1, h2, h3, h4, p, img, ul, ol, li, form, input, textarea {
padding : 0;
margin : 0;
}

p {
padding : 0 0 8px 0;
margin : 0;
}
ul {
list-style : none;
}
img {
outline : none;
border : none;
}
a {
outline : none;
text-decoration : none;
}

.green{ color:#F7FFF7;}
.padding1{ padding:3px;}

#menune{
background:#ff0000;
border-bottom:#345065 1px solid;
}
#menune ul{
background:#cccccc;
list-style:none;
margin-right:auto;
margin-left:auto;
}
#menune li{
float:left;
padding:0px;
}
#menune li a{
background:#1d3c55;
display:block;
text-align:center;
line-height:15px;
border-left:#001F39 1px solid;
border-right:#345065 1px solid;
padding:20px 25px 14px 25px;
}

#menune li ul{
background:none;
display:none;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:175px;
z-index:200;
}
#menune li:hover ul{
display:block;
}

#menune li ul a{
display:block;
margin:0px;
padding:3px;
text-align:left;
}

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
min-height:1%; /* for IE 7*/
}

回答No.1

yyr446

CSSもHTMLも乏しいですが、

<style type="text/css">
body {text-align:center;}
#menune {margin-left:auto;margin-right:auto;width:200px;text-align:justify;}
</style>

お礼

貴重な、アドバイスありがとうございます。
ご連絡遅れて申し訳ございません。
今後ともよろしくお願いします。