はじめまして。
現在CSSでwebサイトを作成しています。
ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。
思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。
DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。
お手数おかけしますが、どなたかご教授お願いします。
■参考
【HTML】
<div id="wrapper">
<div id="header" class="clearfix">
<h1>タイトル</h1>
<ul id="menu">
<li>TOP</li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BBS</a></li>
<li><a href="#">LINK</a></li>
</ul>
</div>
</div>
【CSS】
#wrapper {
margin:0 auto;
padding:0;
width:750px;
}
#header {
background:url(image/bgtop01.gif) no-repeat;
height:125px;
}
#header h1,li {
float:left;
text-align:center;
}
#header h1 {
width:200px;
margin:50px 25px 0 50px;
background:#fc0;
}
#menu {
width:425px;
}
ul#menu li {
width:85px;
margin-top:50px;
background:#ffc;
}
.clearfix {
min-height:1%
}
.clearfix:after {
clear:both;
display:block;
visibility:hidden;
height:0px;
content: ".";
}
* HTML .clearfix {
height:1%
}
【サンプルサイト】
http://www.memorialhall.net/ky/index_sample.php
どうぞよろしくお願いします。
No.1
- 回答日時:
htmlも変更してみました。
●html変更
<body>
<div id="wrapper">
<div id="header" class="clearfix">
<h1>タイトル</h1>
<ul id="top">
<li>TOP</li>
</ul>
</div>
<div id="contents">
<ul id="menu">
<li><a href="#">NEWS</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BBS</a></li>
<li><a href="#">LINK</a></li>
</ul>
<p id="topimg"><img src="index_sample.php_files/topimg01.gif" alt="topimg01.gif"></p>
<h2><img src="index_sample.php_files/title_info.gif" alt="Infomation"></h2>
<div class="right"><a href="http://www.memorialhall.net/ky/php/sample.php?mo …→</a></div>
<div id="mobile" class="clearfix">
<h2><img src="index_sample.php_files/title_mobile.gif" alt="title_mobile.gif"></h2>
<p id="qr"><img src="index_sample.php_files/qr.gif" alt="qr.gif"></p>
<p id="qrtext">
Sampleの最新情報は、各社携帯電話からもご覧頂けます。<br>
下記URL・左のQRコードからアクセスしてください。<br>
http://sample.jp
</p>
</div>
</div>
<div id="footer">
Copyright 2009 Sample. All Rights Reserved.
</div>
</div>
</body>
●CSS変更
@charset "Shift-Jis";
body {
margin:0;
padding:0;
line-height:1.5;
font-size:12px;
text-align:left;
background:#fc0;
}
h1,h2,h3,h4,h5,h6,ul,p {
margin:0;
padding:0;
font-size:12px;
}
ul {
list-style-type:none;
}
img {
border:0;
}
#wrapper {
margin:0 auto;
padding:0;
width:750px;
}
#header {
background:url(image/bgtop01.gif) no-repeat;
height:125px;
}
#header h1{
width:250px;
float:left;
line-height:125px;
margin-left:30px;
text-align:center;
}
#header ul#top {
float:left;
width:200px;
margin:50px 25px 0 0;
}
/*#header img {
margin:20px 0 0 25px;
}*/
ul#menu {
clear:both;
width:600px;
margin:0 auto;
}
ul#menu li {
float:left;
width:85px;
background:#ffc;
}
#contents {
background:url(image/bgmiddle01.gif) repeat-y;
}
#contents h2 {
margin-left:75px;
}
#topimg img {
margin:0px 0 25px 75px;
padding:0;
}
#info_wrap {
height:150px;
}
#infomation li {
width:600px;
margin:0 75px 0;
padding:0;
border-bottom:#E3B144 1px dashed;
text-align:left;
}
#mobile {
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
width:600px;
margin-left:75px;
}
#mobile h2 {
margin-left:0;
}
#qr {
float:left;
padding-bottom:20px;
margin-left:25px;
}
#qrtext {
float:right;
padding-left:25px;
font-size:11px;
margin-top:5px;
width:490px;
}
#footer {
background:url(image/bgbottom01.gif) no-repeat;
margin-bottom:10px;
height:75px;
width:750px;
text-align:center;
padding-top:10px;
}
.right {
text-align:right;
width:600px;
margin-left:75px;
}
.background {
background:url(image/bgmiddle01.gif) repeat-y;
}
.c_back {
background:url(image/bgstripe.gif);
}
.clearfix {
min-height:1%
}
.clearfix:after {
clear:both;
display:block;
visibility:hidden;
height:0px;
content: ".";
}
* HTML .clearfix {
height:1%
}
/* news */
#news {
width:600px;
margin-left:85px;
}
#arikari {
background:url(image/bgmiddle01.gif) repeat-y;
text-align:center;
}
#newsnavi {
width:750px;
background:url(image/bgmiddle01.gif) repeat-y;
}
また、liをfloatではなく、inlineでもできます。
今回はそれを使用しました。
すいません詳しい話はここではかきません。
色々知りたいならまた聞いてくださいー。
No.2ベストアンサー
- 回答日時:
サンプルを検証したところ、質問者様の意図通りに見えているのはIE7だけみたいですね。
IE6もメニューではないですがh1が質問者様が意図するより右にずれています("float: left;"と左マージンを同時に指定している事でいわゆるWマージンのバグが生じています)。ヘッダーの中のメニュー(ul#menu)も”浮かせ”ないと、h1の右には収まり切れません。また、liをfloatさせるのであれば、clearfixは直接の親であるulにも指定しなければ、バグによりそれを無視するIE6以外のブラウザ(FirefoxやSafari等、より仕様に正しい解釈をする)では、ulの高さがなくなってしまってliがぶら下がる状態になっています(ul#menuに一時的に背景色を指定してみるとその状態がよく分かります)。
という事で、”現在のものに最小限の変更を加えるだけ”なら、以下の点を修正すればとりあえず現在の不具合は解消される筈です。
【CSS】
#header h1 {
(省略)
margin: 50px 25px 0 50px;
_margin-left: 25px;※←追加。IE6でのWマージンのバグ回避用のハック。
(省略)
}
#menu {
(省略)
float: left;※←追加。
}
ul#menu li {
(省略)
margin: 50px 0 0 0;※←"margin-top:50px;"を修正。liの左右マージンも初期化しておく方が無難です。
(省略)
}
【HTML】
(省略)
<div id="header" class="clearfix">
<h1>タイトル</h1>
<ul id="menu" class="clearfix">※←class="clearfix"を追加。
(省略)
あと、HTMLからXHTMLに変更したのなら、空要素(meta、br、img等)の記述もXHTMLのルールに則って記述(<meta~ />、<img~ />、<br />)しなければなりません。
無事不具合解消されました!
質問以外の不具合も指摘&修正していただき、ありがとうございます。
CSSの勉強を始めたばかりなので、詳しい説明を頂けて助かりました。
ご回答ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ウインドウを小さくするとbody...
-
htmlの文字が縦書きになる
-
スクロールボックスを中央に配...
-
画像イメージの上下左右、欲し...
-
CSSで画像を同じ位置に重なり合...
-
tableタグで作るような表をCSS...
-
font-sizeが効かない
-
<div>と<div>の間の10px程の...
-
インラインスタイルシートで見...
-
Internet Explorer 6による不具合
-
W3Cのソースコードの検証サービ...
-
【HTML&CSS】フッター下部の余...
-
widthやheightの数値に単位(px...
-
ディスプレイのサイズに合わせ...
-
どう変更してもIE6だけCS...
-
CSSがなぜかfont-sizeだけ効か...
-
<hr>要素を点線で表示した場合...
-
CSSを使ってスクロールバーつき...
-
IE6にてliタグに対してposition...
-
cssで投稿した画像を中央に表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報