movable typeでなんとかここまできました。
http://www.mamyu.jp
これをFirefoxでみますと、メニューの部分だけ大幅に崩れてしまいます。
スタイルシートの問題だと思うのですが、
その部分は、
#nav {
margin-left: 0;
padding-left: 0;
list-style-type: none;
border-top: 0px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1pxsolid #999999;
background-image: url(images/beansmenu01.gif);
background-repeat: repeat-x;
background-position: bottom;
height:25px;
width: 849px;
float: left;
}
#nav a {
font-size: 12px;
font-weight: bold;
color: #0000CC;
text-decoration: none;
background-repeat: no-repeat;
background-position: left top;
display: block;
height: 25px;
width: 121px;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
#nav a:hover {
color:#cc3300;
background-repeat: no-repeat;
}
#nav li {
float: left;
width: 121;
}
としており、
テンプレート部分は、
<ul id="nav">
<li><a href="http://www.mamyu.jp/">TOP</a></li>
<li><a href="http://www.mamyu.jp/000">ブログ</a></li>
<li><a href="http://www.mamyu.jp/001">政治信条</a></li>
<li><a href="http://www.mamyu.jp/002">プロフィール</a></li>
<li><a href="http://www.mamyu.jp/003">政治家養成塾</a></li>
<li><a href="http://www.mamyu.jp/007">競馬場問題</a></li>
<li><a href="http://www.j-beans.jp">ホームページ</a></li>
</ul>
としております。
これでどうしてFirefoxだと大きく崩れてしまうのか。崩れない方法はないものかわからないままです。それぞれのメニューバーの左側にでる○印がなんとも邪魔なのです。。。。
No.2ベストアンサー
- 回答日時:
先ほどの続きになります。
padding-left: 20px; は、確かに余白のとり方に差がでますね。
同じ部分に、width:121px; という記述がありますが、
FireFoxでは余白になるはずの20pxを、
何故か121pxに足して、141pxの箱(両端borderも入れて143px)を作っていますね…。
対策としては、padding-left: 20px;を削除しましょう。
すると、IEでもFireFoxでも、■印に文字がかぶりますから、
今度はHTML側で「TOP」「ブログ」などの文字の前に
全角スペースを2つ入れてあげます。
CSSのスマートな解決ではないのですが、
ローカルに保存させていただいたコピーでは、
上記の方法でIE・FireFoxともに程よく表示されています。
治るか分かりませんが、まずはお試しください。
----------
リストタグの使い方ですが、
リストタグはデフォルトで様々な余白のとり方をするHTMLタグでしたので、
余白を調整するpaddingやmarginが煩雑になるかと思い
先ほどは書きました。
が、代わりに薦めようと思っていたTABLEタグも多用は嫌がられますし、
そもそもCSSには極力使わない方が良いでしょうから、
問題ないように思い直しました^^;
No.1
- 回答日時:
ソースを拝見しました。
デザインが崩れるというより、○印が出現しているために
メニュー部分が改行しているのでしょう。
スタイルシート内に、以下の記述がありますので
これを取り除けば○印はなくなるでしょう。
UL LI {
LIST-STYLE-TYPE: circle
}
ただ、こういったメニューにリストタグを使うのは、
ソースも肥大しますし、デザイン的にもリスクがあるのではないでしょうか。。。
sun-wardさま
さっそくありがとうございます。
おかげさまで○印は消えました!
心から御礼申し上げます。
それでもまだFirefoxでは若干ずれてしまいます。
おそらく
#nav a {
のところの
padding-left: 20px;
の解釈がブラウザで違うためだと思われます。
これは私のレベルでは太刀打ちできません。。。。
何かお知恵があればお貸しください(--)。
また
> ただ、こういったメニューにリストタグを使うのは、
> ソースも肥大しますし、デザイン的にもリスクがあるのではない
> でしょうか。。。
という点につきまして、もう少しご教授いただければありがたく存じます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
【ヒトの神秘】美男美女から何...
-
画像イメージの上下左右、欲し...
-
<table>の高さ固定。情報増加時...
-
どこをテーブルで作るべきか、d...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
<ul>~</ul>が二つ続くと間に改...
-
表示倍率を変えるとレイアウト...
-
div領域をウインドウサイズに合...
-
複数行にまたがる括弧を表示し...
-
リストを2つに分割して、それぞ...
-
pythonでのカーソル移動がずれる
-
ulタグやliタグの中でbrタグ...
-
C言語線形リストの問題です
-
超音波で洗脳。
-
CSSでborderの長さを指定、また...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
Firefoxだとメニューバーが崩れ...
-
リストの画像をくっつけたい!
-
箇条書きで表される点がずれる...
-
CSSのposition指定で親要素の背...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
<h1>、<h2>と<p><div>の行間を...
-
HTML属性での「""」 「''」違い
-
超音波で洗脳。
-
widthやheightの数値に単位(px...
-
ボタンをセル内一杯に表示させ...
-
div要素が重なってします
-
リストマーカーをボックス内に...
-
質問1.
-
<div id="container">の使いか...
-
リンクを知らせる手のマークが...
-
画像イメージの上下左右、欲し...
-
複数のボタンを等間隔に、かつ...
おすすめ情報