CSSマスターの方にご質問させていただきます。
現在横並びリストを制作しようとしております。
リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。
IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。
<UL id="sitemenu">
<LI id="side">あいうえお
<LI id="side">かきくけこ
</UL>
/***********LI設定***********/
#side A{
width:60px; //幅
height:40px; //高さ
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
background-image : url(背景.gif); //背景
background-position : 0px 0px;
no-repeat; text-align : center; //文字の位置
text-decoration : none; //文字飾り
vertical-align : top; //文字の高さ
padding-top : 10px; //パディング高さ
float : left;
}
#side A:hover{
background-position : 0px -40px; no-repeat;
}
/***********UL設定***********/
#sitemenu{
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
border-width : 0px 0px 0px 0px;
vertical-align : top;
text-align : left;
list-style-type : none;
float : left;
}
#sitemenu LI{
float : left;
}
なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。
No.5ベストアンサー
- 回答日時:
すみません、ANo.4を途中で投稿してしまいました。
先程のサンプルの考え方と、現状の問題点をざっとまとめてみました。【問題点】
・定義の順番としては、親要素から子要素・共通部分から個別部分、がベーシックな考え方だと思いますので、#sitemenu→#sitemenu LI→#sitemenu A→#sitemenu A:hover→#b01 A~#b111 A、という順番が(定義の重複を避ける為にも)妥当でしょう。
・#sitemenuの定義の、borderは初期値が0の為不要/vertical-alignは無効(この要素には適用されません)の為不要/floatはレイアウト上意味がない為不要。
・"text:none;"という「?」な定義がありましたが、"text"というプロパティはありません。
【サンプルの考え方】
#sitemenu {
height: 40px;←親要素<ul>の高さを決め打ち
overflow: hidden;←上記の高さをはみ出した内容は非表示に
(省略)
}
→ここで"overflow: hidden;"を定義しておくことで、height: 40px;に対して後に定義される#sitemenu Aの"padding-top: 10px;"分の差が下にはみ出してしまっても隠してしまえます。
#sitemenu LI {
(省略)
float: left;←横並びに
height: 40px;←floatで高さが失われているので明示
text-align: center;←テキストの水平方向センタリングはここで一括定義
margin: 0;←マージンを初期化(念の為。既出の定義で<li>のマージンが初期化されている様なら不要です)
}
#sitemenu A {
display: block;←ブロック要素化することで高さを取得
height: 100%;←親要素の40pxに対する高さを取得
background: url(../parts/bottom/botomm_BG.gif) 0 0 repeat-x;←共通部分を一括定義
font-size: 14px;←(同上)
color: white;←(同上)
text-decoration: none;←(同上)
padding-top: 10px;←(同上)
}
→background-repeatの値をno-repeatではなくrepeat-xとしておかないと、画像の幅が100pxに対し、メニューの#b05の幅が116pxと超えてしまっているので右に空白ができてしまいます。
#b01 A {
width: 60px;
}
から
#b11 A {
width: 93px;
}
→id毎にユニークなスタイルは幅だけなので、個別定義部分はこれだけで済みます。
何かイメージ通りにならないところがありましたら補足して下さい。
(分割投稿になってしまった事をお許し下さい)
abril様
ありがとうございます。見事にピタリと揃いました!
親要素、子要素を把握して設定しないといけないんですね。
本当に助かりました!誠にありがとうございます。
No.4
- 回答日時:
実際の(現在の)ソースを元に検証しました。
実際の(現在の)ソースにはFirefox、Opera等でやはり不具合があります(heightとpadding-topの解釈の違い等)。その差を吸収するサンプルです。ブラウザ振り分けをする事なく、IE6.0/7.0、Firefox2.0~、Opera9.25 on Windows XP、Safari3.0 on Mac OSXで表示結果をほぼ同じにできました。----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
(省略)
<UL id="sitemenu">
<LI id="b01"><A href="index.html">トップ</A></LI>
<LI id="b02"><A href="index.html">トップ</A></LI>
<LI id="b03"><A href="index.html">トップ</A></LI>
<LI id="b04"><A href="index.html">トップ</A></LI>
<LI id="b05"><A href="index.html">トップ</A></LI>
<LI id="b06"><A href="index.html">トップ</A></LI>
<LI id="b07"><A href="index.html">トップ</A></LI>
<LI id="b08"><A href="index.html">トップ</A></LI>
<LI id="b09"><A href="index.html">トップ</A></LI>
<LI id="b10"><A href="index.html">トップ</A></LI>
<LI id="b11"><A href="index.html">トップ</A></LI>
</UL>
(省略)
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
(省略)
/* ---リスト設定---*/
#sitemenu {
height: 40px;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0;
}
#sitemenu LI {
float: left;
height: 40px;
text-align: center;
margin: 0;
}
/* ---ボタン設定開始---*/
#sitemenu A {
display: block;
height: 100%;
background: url(../parts/bottom/botomm_BG.gif) 0 0 repeat-x;
font-size: 14px;
color: white;
text-decoration: none;
padding-top: 10px;
}
#sitemenu A:hover {
background-position : 0px -40px;
}
#b01 A {
width: 60px;
}
#b02 A {
width: 68px;
}
#b03 A {
width: 68px;
}
#b04 A {
width: 70px;
}
#b05 A {
width: 116px;
}
#b06 A {
width: 65px;
}
#b07 A {
width: 83px;
}
#b08 A {
width: 66px;
}
#b09 A {
width: 77px;
}
#b10 A {
width: 54px;
}
#b11 A {
width: 93px;
}
/* ---ボタン設定終了 ---*/
(省略)
----------------------------------------------------------------------
No.3
- 回答日時:
本件の直接の回答ではないのですが、端から見ていてちょっと気になりましたので。
http://www.geocities.jp/axi_wakayama/2008/0506/i …
上記は、ANo.1-2の回答者様のアドバイスを得て改良された現時点での最終形なのでしょうか?
主要モダン・ブラウザの1つであるFirefoxで見ると、#sitemenuのリストが横並びにすらなっていませんが、これは全く問題にはされていないのでしょうか?
現状のCSSもまだ意味不明の定義が残っている様ですが…
※なお、閉じタグのあるもの(<li>))はできるだけ省略されない方がベターです。XHTMLへの以降の際などには手間が増えます。
この回答への補足
htmlに
<LINK rel="stylesheet" href="safari用スタイル" type="text/css">
<!--[if gte IE 5]><LINK rel="stylesheet" href="IE用スタイル" type="text/css"><![endif]-->
上記を記述するとほぼcssは振り分けられるみたいですね。
ただしこの方法だと一行ですがhtmlの記述が増え、cssも複数増えそうです。
私は普段
A.html
└A専用css
└レイアウトcss
と@import urlを使い付加を減らしています。
『<!--[if gte IE 5]><![endif]-->』この記述をhtml内では無く外部css内で記述する方法はないでしょうか?
本題とは少し変わってきましたが、ひとつのcssで全てのブラウザに対応するのが無理なのかもしれませんね。
ご存知の方がいらっしゃいましたらお手数ですがご教授ください。
abril様
ありがとうございます。仮アップでしたのでFfではレイアウトずれていたみたいですね。申し訳ありません。
只今回答いただいたCSSに変更いたしました。
参考アドレスはこちらから
http://www.geocities.jp/axi_wakayama/2008/0506/i …
No.2
- 回答日時:
padding-top10px分があるので、
画像が40pxで変わるのであれば、
heightが30pxかもしれないです。
kuzumiHK様
再度ありがとうございます。
ご指定の通り一度やってみたのですが、safariならばばっちりズレずに揃うのですがIEだと10px分高さが足りなくなってしまうのです(;-;)
safariの時だけsafari専用cssを読み込ませるように出来れば、解決できそうですね。確かそのやり方があったような気がしますが・・・
参考アドレスはこちらから
http://www.geocities.jp/axi_wakayama/2008/0506/i …
No.1
- 回答日時:
Safariの環境で確認できていませんが、
スタイルの設定が複雑になりすぎているようなので、
単純化して、こんな感じではいかがでしょうか。
#sitemenu{
padding : 0;
margin : 0;
list-style-type : none;
}
#sitemenu LI{
padding : 0;
margin : 0;
display : inline;
float : left;
}
#side A{
display : block;
width:60px; //幅
height:40px; //高さ
margin : 0;
background-image : url(背景.gif); //背景
background-position : 0px 0px;
no-repeat; text-align : center; //文字の位置
text-decoration : none; //文字飾り
padding : 10px; //パディング高さ
}
#side A:hover{
background-position : 0 -40px;
}
<UL id="sitemenu">
<LI id="side"><A>あいうえお</A></LI>
<LI id="side"><A>かきくけこ</A></LI>
</UL>
※<LI>のなかに<A>タグがあることが前提です。
また、もし背景が単色でしたら、background部分は単純に、
AとA:hoverに違う背景色を入れるだけで済みそうです。
kuzumiHK様
CSSの省略化ができました。ありがとうございます。
引き続き解決策を募集しております。
テスト段階の物をアップしてみましたのでこちらを見ていただければと思います。
http://www.geocities.jp/axi_wakayama/2008/0506/i …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
表示倍率を変えるとレイアウト...
-
hpビルダー 複数の表の罫線を...
-
table周辺の隙間をなくしたい。
-
プルダウンで長い名前の選択肢...
-
画面の分割
-
div内に外部のurlを表示させたい
-
li 黒丸含んで移動する方法
-
css初心者 フレックスボックス...
-
背景が下まで表示されないんです。
-
CSS:animation開始位置の設定
-
cssが効かなくて困ってます
-
floatを使わずに、cssレイアウ...
-
HTMLで横幅をCSSで設定できませ...
-
左100px 中100% 右100px
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
メイン画像とグローバルメニュ...
-
HTMLでCSSでボーダーが表示され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS:animation開始位置の設定
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
table周辺の隙間をなくしたい。
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報