恐れ入ります。
現在、修正を加えたい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ベストアンサー
- 回答日時:
再度のソースのご提示ありがとうございます。
http://www.sl-success.com/hallo-casino/index-tes …
上記のように、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-tes …
は、ただのaタグとdiv要素ul要素が混在しているのですが、
それぞれaタグにもfloatをかけていけば横並びにはなるかと。
そして、上記のURLでは#menueに幅は設定されていないので
前回ご説明したとおり、margin:0 auto;は効きません。
htmlの要素には、回り込みなしで横並びになるinline要素とそうはならないblock要素とがあります。
それらの特性をつかんでいくことがcssを上手く使う鍵になりますよ。
http://www.mozilla.gr.jp/standards/
上記サイトが分かりやすいと思います。
No.3
- 回答日時:
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-tes …
上記のように、ulが中央に寄せられず、左右の背景(黒)を変更することができません。
また、
http://www.sl-success.com/hallo-casino/index-tes …
上記のサイトのようにテーブルメニューの中に、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
- 回答日時:
こんにちは。
どこの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*/
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
liタグの中に<p>タグやら<dl>を...
-
ボタンを横に並べて表示させる方法
-
HTMLでメニューをリストで書き...
-
リストの数字のフォントサイズ...
-
メニューの横並びで改行されて...
-
箇条書きがずれて表示されてし...
-
css 横並びのナビゲーションバ...
-
レスポンシブWebデザインでリン...
-
SWIFTでHtmlのソースの一部を取得
-
IE6でどうしても隙間が空いてし...
-
文法チェックの<A>と</A>の間が...
-
ページを開いているときのリン...
-
display:table;を多段表示させたい
-
ドロップダウンの残像
-
bxsliderの画像が左によってしまう
-
疑似クラス :activeが効きません
-
横並びのリストで左端がはみ出る
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報