- 締切済み
background:での画像指定 MacのIEだけ正しく表示されません。
下記のCSSを使用してwebを作成しています。 マウスオーバー時のgif画像がMac用のIE ver.5.23では 文字列とかけ離れた箇所に表示されます。 文字列は画面右であるのにgifは画面左に表示されています。 winのIEやFirefox,MacのNetScapeではきちんと 文字列の左横にgifが表示されます。 なにか良い方法ありますでしょうか？ 使用したcssとbodyを記載します。 <body> <div class="mainNav"> <b>test</b> <hr size=1 noshade width=250 align=right> <a href="http://www.geocities.jp/****/samus/samus_live.html"> <b> live</b> </a> <a href="http://www.geocities.jp/****/samus/samus_member.html"> <b> member</b> </a> </div> </body> /*---- main navi -------------------------------------------------------------*/ .mainNav { position: absolute; top: 10px; right: 10px; width: 98%; text-align: right; margin: 0px; padding 0px 0px 5px 0px; background-color: #ffffff; font-family: "ＭＳ ゴシック", sans-serif; } /*---- リンクの設定 ----------------------------------------------------------*/ a:link { font-size: 90%; color: #999999; text-decoration: none; } /*---- 表示済みリンクの設定 --------------------------------------------------*/ a:visited { font-size: 90%; color: #999999; text-decoration: none; } /*---- マウスオーバーリンクの設定 --------------------------------------------*/ a:hover { font-size: 90%; color: #cd853f; background: url("image/arrow_right.gif") left no-repeat; text-decoration: none; }
- hand_painted_art
- お礼率0% (0/12)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kolp
- ベストアンサー率34% (35/102)
下から３行目の background: url("image/arrow_right.gif") left no-repeat; のleft（左寄せ）が邪魔してますよね 参考書を見ても、backgroundはブラウザ全体に対して センター合わせや、左右あわせなどの図解しか載っていません。 なので、推測として、MACIEでは例えaタグのマウスオーバーの指定に入っていてもブラウザに対してきいてしまい、 他のブラウザでは、Aタグの左を認識していることになります。 私なら、あきらめて、Javascriptのよくあるロールオーバーを使いますね。 全体を画像にしてロールオーバー指定する、 または今のまま、画像 テキスト 画像 テキストと並べて、 テキストリンクをロールオーバーしたら画像が変わるようにする。（最初に真っ白な画像を配置しておいて、次に矢印を表示するような感じ） ロールオーバーのJavascriptの方が一般的ですし、こういう風に、リンク部分に背景画像を使うやり方は見たことがないので。（あるのかもしれませんが） CSSでＨＰ作成って大変ですよね、、がんばってください。
関連するQ&A
- IEで画像が表示できません
Firefoxでは画像が表示できるのですがIEでは表示されません スタイルーシートは下記のとおりです。 お願いいたします。 body {background: url("http://pub.ne.jp/man96/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;} a { color: #66c; text-decoration: none; } a:link { color: #66c; text-decoration: none; } a:visited { color: #66c; text-decoration: none; } a:active { color: #66c; text-decoration: none; } a:hover { color: #66c; text-decoration: underline; } h1, h2, h3 { margin: 0px; padding: 0px; } #banner { font-family: verdana; color: #777; font-size: 13px; font-weight: bold; text-align: 0px 0px; margin-bottom:11px; background: #ccffff この画像がIEで表示されなくて背景色です url("http://pub.ne.jp/man96/image/user/1170626058.jpg")no-repeat; background-position: center;padding:0px;height:250px; } ちなみにURL：http://pub.ne.jp/man96/です
- 締切済み
- ブログ
- 外部CSSでリンクカラー指定
外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか？ その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか？ またそのようにする方法があれば教えてください。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSで表示が異なってしまう
下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか？ よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>
- ベストアンサー
- HTML
- ページ毎に位置が変わってしまう。HTML
サイト見ていただければ一目瞭然なのですが、メニューの行の下の余白部分がindex.htmlとそれ以外で違ってしまいます。 HTML構文はコピペしているので同じはずなのですが、素人同然の私としては限界です。 どなたかご教示お願い致します。 URLは http://frecklejp.com/ です。それではお願いします。 また、外部CSSファイル一応作っています。それは以下になります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー @charset "utf-8"; /* CSS Document */ /*====================================== すべて =======================================*/ body,td,th,Table_01 { font-family: Verdana, Tahoma, Arial, sans-serif, Meiryo UI; color: #666666; font-size:medium; } body { background-color: #FFFFFF; margin-left: 50px; margin-top: 100px; margin-right: 0px; margin-bottom: 0px; } /*====================================== リンク =======================================*/ a:link { color: #a9a9a9; text-decoration: none; } a:visited { color: #a9a9a9; text-decoration: none; } a:hover { text-decoration: underline; color: navy; text-decoration: none; } a:active { text-decoration: none; color: navy; text-decoration: none; } /*====================================== ベース =======================================*/ メイン =======================================*/ t { line-height: 15px; margin-left: 30px } ui { list-style-type: square; } span-class { font-size: x-small; text-align: right } .div-class { border-width: 0px 0px 0px 10px; border-left-width: 5px; border-left-style: solid; border-left-color: firebrick; padding: 0px 0px 0px 6px; /* 余白の幅 */ } prof { font-family: Verdana, Tahoma, Arial, sans-serif, Meiryo UI; color: #666666; font-size:medium; }
- ベストアンサー
- デザイナー・クリエイティブ職
- blog CSSのタイトル色の変更指定について！！
このblog CSSのブログタイトルの色変更はどうすればいいですか？ .blogtitle の所で色指定してもダメでした？他に方法があるのですか？ livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si
- 締切済み
- CSS
- ブログのTOP画像表示方法（悩んでます）
どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか？？ ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }
- ベストアンサー
- ブログ
- リストに指定したマークの位置がずれてしまいます
特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>
- ベストアンサー
- HTML
- 強制的に背景色を指定
#topics ul li a{ font-size: 14px; padding: 5px; text-decoration: none; background: #FFFFFF; } #topics ul li a:hover{ background: #FF6633; font-size: 14px; padding: 5px; text-decoration: none; color: #FFFFFF; } 以上のようなCSSを定義してリンクのボックスを置いているのですが、 <div id="topics"> <ul> <li><a href="～">～～</a> この場合マウスを置いたときに背景色反転するのですが、 何もしないときにも強制的に背景色反転させるにはどうすればいいのか なかなか実現できなくて悩んでおります、いい定義方法はないでしょうか。
- 締切済み
- HTML
- ブログの下線
fc2ブログでアフィリエイトをしています。 私のブログのテンプレートは、ブログタイトルと記事のタイトルにカーソルをもって行くとリンクの下に下線が表示されるのですが、それ以外は色が変わるだけで下線が表示されません。 画面右側(プラグインカテゴリ2)のフリーエリアは、テキストリンクに常に下線が表示されるようにしたいんです。 他のリンクはカーソルがきた時だけ、下線がでるようにしたいです。 ブログ初心者なので分かりやすくお願い致します。 /* リンクの設定 */ a{cursor : pointer ;} a:link{ color : #000000; text-decoration: none; } a:visited{color : #000000; text-decoration: none; } a:active{color : #008B8B;} a:hover{color : #2F4F4F;} .entry a{font-weight: nomal;} h1, h2, h3{ color : #808080; text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; } h2 a{ text-decoration: none; }
- ベストアンサー
- ブログ
- ホームページの作成（CSS）について
「Dreamwever独習ナビCS3/8対応」でホームページの勉強をしているものです。 質問内容はプレビューで見ると、リンクの表示が想定しているものと、 違うのです。具体的にはにじんで見える感じです。文字は読めません。 CSSの設定をしたところ、この現象となりました。 プレビューのリンクの箇所を反転させると、読むことができます。 環境はWindowsXP、IE6です。firefoxでも同様の症状です。 お忙しいところお手数ですが、ご教授願います。 CSSの内容は以下のとおりです。 ------------------------------- body{ font-family: sans-serif; font-size: 75%; line-height: 1.6; color:#333333; background-color: #999999; background-image; url(image/bg.gif); background-repeat: repeat; } hr{ display: none; } aimg{ border-style: none; } a:link{ color: #333333; text-decoration: underline; } a:visited{ color: #999999; text-decoration: underline; } a:hover{ color: #000000; text-decoration: underline; } a:active{ text-decoration: none; position: relative; left: +1px; top: +1px; } ------------------------------- ※テキストP60の「リンクをCSSで設定しよう」という箇所です。
- ベストアンサー
- HTML
