Firefoxでテキストリンクの背景画像を右寄せにする方法
- Firefoxでテキストリンクに背景画像を挿入すると右寄せができなくなる問題があります。
- display:blockを指定するとFirefoxでは左寄せに戻ってしまいますが、IEでは右寄せのままです。
- 右寄せのままに表示するための方法について、アドバイスをいただけませんか？
- ベストアンサー
Firefoxで右寄せにならないのですが
テキストリンクに背景画像を挿入しています。 それをdisplay:blockにしたとたん、右寄せができなくなってしまいます。 <html> <p class="right"><a href="hellow">こんにちは</a></p> <css> p.right{ text-align : right; } p.right a{ background-image : (250px*30pxの画像です).gif); display : block; line-height : 30px; width : 250px; } display : blockを指定したときにFirefoxでは左寄せに戻ってしまいます。IEでは右寄せのままです。 Firefoxでも右寄せのままに表示したいのですが、どなたかアドバイスよろしくお願いします。
- y-w-
- お礼率79% (59/74)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
text-alignプロパティはブロックレベル要素には影響しません。 したがってFirefoxの方が正しい解釈です。 右に寄せたいのなら、floatプロパティを使うかpositionプロパティを使いましょう。 両方共、IEのバグ等で不具合を生じやすいプロパティですので、他の問題が生じるかもしれませんが・・・。 例１ p.right a{ float:right; background-image : (250px*30pxの画像です).gif); display : block; line-height : 30px; width : 250px; } 例２ p.right a{ position:relative; top:0% left:100%; background-image : (250px*30pxの画像です).gif); display : block; line-height : 30px; width : 250px; }
関連するQ&A
- ブロック単位の右寄せ
ブロック単位の右寄せ 質問項目に悩みましたがこちらで失礼します。 divで囲んだ領域自体を右寄せにしたいのですが、文末の「～はこちら」のようなリンクとして予定しているので文字数（幅）が決まっていません。 css------------------ div.link1{ text-align:right; padding:0.5em 0 1em auto; width:100%; } div.link1 div{ background-repeat:no-repeat; background-image:url(****); background-position:center left; text-align:right; padding-left:15px; display:block; } html(php)------------------------ <div class="link1"><div>～～～はこちら</div></div> 画面イメージ (画像)～～～はこちら けれど実際には画像が画面左に寄り、文字だけが右寄せと離れている状態です（IE8)。 できれば避けたいのですがjavascriptの併用かphpでmb_strlenを用いるくらいしか方法はないでしょうか。 実装可能な方法があれば教えてください。 対象ブラウザ：IE6以上、（以降は最新のみで可）Firefox、Opera
- ベストアンサー
- HTML
- <P>を使わずに、右寄せ（左寄せ）。
<P>を使わずに、右寄せ（左寄せ）。 <p align="right">あああ</p> を<p>や<div>や<table>を使わないで、センタリングの<cetner>のように、右寄せ（左寄せ）をする方法はないでしょうか。 どなたかご存知の方おられましたら、ご教授のほどお願いします。
- ベストアンサー
- HTML
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- 右寄せ時の背景画像
cssでテキストを右寄せするだけなら問題ないのですが背景画像をつける場合下記の他にどのような方法がありますか？ <p class="hoge">ここに右寄せのテキストが入ります。</p> .hoge { margin-top: 5px; font-size: 80%; color: #888; text-align: right; background: url(../img/common/hoge.png) no-repeat 420px 1px; } 420pxを0とすると当然ながら左端を基準に画像が表示されテキストは右を基準に表示されてしまいます。 ここで妥当なpxを指定する事によりうまく調整は可能なのですがサイト内でフォントサイズを変更 できるようにしておりフォントサイズMAXの幅に合わせてcssを定義するとMINの際に大きく幅が空いてしまい 不格好になってしまいます。 解決方法としてどのような方法がありますでしょうか？
- ベストアンサー
- HTML
- firefoxではcssで画像をプリロードができません
リンクの貼られた画像に触れると画像が変化させようと 以下のコードを使ってみました。 IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。 何かやり方があるのでしょうか？ ■html <p class="xxx"><a href="#">sample</a></p> ■css p.xxx{ background:url("img01/a_img.gif") no-repeat; } p.xxx a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px; } p.xxx a:hover{ background:none; }
- ベストアンサー
- CSS
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳで右寄せメニューを一行にしたい
メインメニューを画面の右側に一行に表示したいのですが、 ----------------------------- タイトル ｍ１ ｍ２ ｍ３・・・ ----------------------------- メニューはロールオーバー効果を使っていて、 画像の形から、文字を右寄せにしたいのです。 .m_ichi { padding: 5px 5px 5px 0px; float: right; } .m_mn { width: 100px; height: 30px; text-align: right; vertical-align: text-bottom; } a.m_menu:link { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; margin: 0px; padding: 10px 0px 2px 1px; width: 100px; height: 30px; background-image: url(img/menu_b.gif); background-repeat: no-repeat; display: block; text-decoration: none; } a.m_menu:visited { a.m_menu:hover { （a.m_menu:link と同じような記述） <div class="m_ichi"> <span class="m_mn"><a href="#" class="m_menu">m1</a></span> <span class="m_mn"><a href="#" class="m_menu">m2</a></span> <span class="m_mn"><a href="#" class="m_menu">m3</a></span> </div> と記述したら、メニューが縦に並んでしまい、文字も左に寄って しまいました。<TD>記述を使えば、なんとかできたのですが、 スタイルシートできれいに表示させる方法を教えて下さい。
- 締切済み
- HTML
- firefox とie6 でのbackground height wi
firefox とie6 でのbackground height width表示の違い ホームページ作成しています。 初心者です。 globalnavi というdiv のなかに globalnavi li をfloat-rightで横並びにしました。 width 800px height 30px にしたいのですが IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！ #globalNavi{ background-image:url(../menubar.png); width:790px; height:30px; font-size:14px; color: #1C1D21; text-align:center; } #globalNavi li{ float:right; overflow:hidden; width:80px; height:30px; list-style-type:none; text-align:center; color: #1C1D21; border-left-width: 2px; border-left-style: solid; border-left-color: #999; line-height:0; } #globalNavi a{ width:80px; height:30px; display:block; text-align:center; line-height:normal; } #globalNavi a:hover{ width:80px; height:30px; background-position: 0 -80px; background-color:#B7D68D; text-decoration: none;
- ベストアンサー
- HTML
- Firefoxだとズレてしまう
<h1 class="text">タイトル</h1><p class="navi"><a href="#">↑上↑</a></p> h1.text { width:69%; float:left; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 0px 1px 5px; border-style:solid; padding:0px 0px 0px 4px;} .navi { width:29%; float:left; text-align:right; font-size: 10pt; color:black; background-color:white; border-color:black; border-width:1px 1px 1px 0px; border-style:solid; padding:0px 2px 0px 0px;} このようにしたいのですけど、firefoxで見ると表示がズレてしまうので困っています（Explorerでも、ちょっと思ったよりも短くなってしまうけれども、一応表示される）。何かよい方法はないでしょうか。
- ベストアンサー
- HTML
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
お礼
po-pe-tian様お返事ありがとうございました。 おかげさまで解決しました。 例、参考サイトもとても助かりました。ありがとうございます。