- 締切済み
CSSでアイコンを付けるとWin IE6でのみおかしくなってしまいます
下記のCSSコードでh2を装飾しています。 h2が長くなって改行が入った場合、Win IE6でのみ表示がおかしくなってしまいます。 「h2 a」に「float: left;」を追加してやるといちよう解決出来たのですが、もっと良い方法はないでしょうか。 よろしくお願い致します。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; height: 1%; } </style> </head> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- goldfox
- ベストアンサー率49% (123/249)
- goldfox
- ベストアンサー率49% (123/249)
winXPIE6使用しています。 float: left;をつけてもお望みの状態にはなりませんでした(汗 IEのバグと考えても、画像にしてしまうのが一番手っ取り早いと思います。 ＞そうですか…。他のサイトで同じ事をやっているページを見つけましたがこちらでも問題なく見えますでしょうか？ ＞(こちらはWin IE5で見ても表示がおかしい分、完成度が低いですが…) ＞http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/ すみません、NN7で見ても、私にも問題箇所が見つけられません(汗
お礼
実際作った物にリンクを張っておいたのですが消されちゃいました。 下記がWin IE6でOKなソースです。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; height: 1%; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; float: left; } </style> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
補足
Win IE6だけがダメなんです。
- NTJ
- ベストアンサー率44% (46/103)
- awasumi
- ベストアンサー率41% (23/56)
どうゆう状況なのかわかりました。 私のほうでも、Java-Javaさんと同じような感じです。 ----------------------------- IEでは ■ああああああ□ ああああ □が文字と重なって見えます。 ------------------------------ Operaでは ■ああああああ ああああ■ とJava-Javaさんが求めている感じになりました。 --------------------------------- こんな記事を見つけました。 http://www.biwa.ne.jp/~shorio/opinion/20050605.html 『このような使い方がいいのか、悪いのかは別にして^^』の部分です。 IEの場合、折り返した時の全体の面積がブロック要素としてcenter right の位置が表示されている様子なのですね。 すみません、力不足で私には解決無理っぽいです。。。
お礼
言葉足らずですみません。私が言いたかったのはまさにそれです。 >こんな記事を見つけました。 >http://www.biwa.ne.jp/~shorio/opinion/20050605.html >『このような使い方がいいのか、悪いのかは別にして^^』の部分です。 ありがとうございます。参考にさせて頂きます。
- NTJ
- ベストアンサー率44% (46/103)
実際にそのサイズの画像を作成し、ご提示のソース内容のファイルを作成し、表示を行ってみましたが、 ご質問のような「文の上に画像が重なってしまう」という現象は、あたしの環境では発生しませんでした。 おそらく原因はCSSのその部分ではなく、もっと他の設定部分等に有るのではないでしょうか。 ※「アイコンは補助的な物で、必ずしも文書構造内に必要ない物ですので。」 というご意見は正しいかと思います。 しかし、「HTMLの誕生は文章構造を作るための規格ではなかった」という重要なポイントを無視しているように思えます。 失礼ですが回答履歴を参照させて頂きました。 相当にCSS等に造詣が深い方とお見受けいたします。 僭越ですが、文章構造に拘ってサイト構築を行いたいのであれば、HTMLでの作成は止めてXHTMLへ移行する事をお勧め致します。
補足
>僭越ですが、文章構造に拘ってサイト構築を行いたいのであれば、HTMLでの作成は止めてXHTMLへ移行する事をお勧め致します。 はい。ここでの質問に関しては(長い)XHTMLの記述をする必要はないと思い<html>としておりますが、実際の物では<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">といった感じでXHTMLで記述しております。 >おそらく原因はCSSのその部分ではなく、もっと他の設定部分等に有るのではないでしょうか。 そうですか…。他のサイトで同じ事をやっているページを見つけましたがこちらでも問題なく見えますでしょうか？ (こちらはWin IE5で見ても表示がおかしい分、完成度が低いですが…) http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/
- NTJ
- ベストアンサー率44% (46/103)
どのようなデザインが目的なのか不明なのと、アイコン画像が提示されていないで推定の域を出ませんが、 「H2には左にアイコンを付けたい」 「H2の中にAタグがある場合はH2規定のアイコンを隠して、文末にアイコンを付けたい」 「しかしIE6では自動改行が掛かった場合に、文末のアイコンが文末ではなく、H2領域の中央になってしまう」 という事でしょうかね？ だとすると・・・ まず最初に言える事は「背景画像はアイコンを付けるための物ではない」ですね。 普通に考えるならCSSではなく、マトモにHTMLへ記述する所でしょう。 また、CSSで解決するなら本筋から行くなら、content で解決すべきところですね。（ブラウザが対応していないので、意味が無いですが） まぁ、現状はどうにもならなさそうな雰囲気なので、この状況で解決する策を提示するのなら、「背景画像を工夫する」のが一番簡単ではないかと思います。 具体的には背景画像を上下左右から離したい幅分大きくして余白を付けて、その部分を透過にしてやります。 そして、 background: url(images/icon_link1.gif) right center no-repeat; を background: url(images/icon_link1.gif) right bottom no-repeat; にしてやれば、目的は達せられるのはないかと思われます。 同じくH2側のアイコンも余白付きにすれば、5px 0.5em の指定も、left top で済むのではないかと思います。
補足
言葉足らずですみません。 「icon_h2.gif」は11px×11pxで、「icon_link1.gif」は13px×13pxの小さい画像になります。 >「H2の中にAタグがある場合はH2規定のアイコンを隠して、文末にアイコンを付けたい」 >「しかしIE6では自動改行が掛かった場合に、文末のアイコンが文末ではなく、H2領域の中央になってしまう」 「リンクが張られた場合には、リンクのアイコンを追加する」という事をしたいと思っています。 H2領域の中央ではなく、「あああああ」の部分に後ろ側のアイコンが文末に重なってしまいます。 >まず最初に言える事は「背景画像はアイコンを付けるための物ではない」ですね。 >普通に考えるならCSSではなく、マトモにHTMLへ記述する所でしょう。 私の考えでは、HTMLに記述する事ではないと思いますが…。 アイコンは補助的な物で、必ずしも文書構造内に必要ない物ですので。 この話は、色々意見があると思いますので、ここまでにしておいて欲しいです。
- awasumi
- ベストアンサー率41% (23/56)
どのように表示がおかしくなるのか具体的にお願いできますか？ また、どのようにしたいのかもお願いします。
補足
改行が入った場合、「あああああ」の部分に後ろ側のアイコンが重なってしまいます。 CSSを修正するだけでアイコンが重ならないようにしたいです。 よろしくお願いします。
関連するQ&A
- css
上下２つの画像で角丸にcssでしようと思います。上はこれでいいんですが 下の表示はどうするんでしょうか。 <div id="sub"> <h1>メニュー</h1> <ul> <li><a href="1.html" >123</a></li> <li><a href="2.html" >123</a></li> <li><a href="3.html" >123</a></li> </ul> </div> #sub { float:right; margin-top:5px; width:180px; padding:5px 5px 2px 5px; background-image: url(ue.gif); background-repeat:no-repeat; } #sub h1 { background: url(images/a.gif); color:#333333; font-size:11px; font-weight: normal; padding:5px 20px ; } #sub ul{ padding:0; list-style:none; background-color:#FFFFFF; } #sub li{ margin:0 0 0 0px; border-bottom:1px solid #0000ff; } #sub li a { display:block; padding-left:20px; background:url(images/1.gif) 2% 50% no-repeat; line-height:35px; } わかりましたらよろしくお願いします。
- ベストアンサー
- CSS
- CSSのボタン作成の崩れ
winでDreamweaver8で作成しています。 ロールオーバーボタンを作成したのはいいのですが、、、 一番左のボタンをクリックすると一番右のアクティブな状態のボタンが出現してしまいます。 フロートと左にしてます。 何度やり直しても解決できません（＞＜） 宜しくお願い致しますm(_ _)m cssコードは body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; background: #FFFFFF; text-align: center; margin: 0px; padding: 0px; }#wrapper { margin: 0px auto; padding: 0px; height: auto; width: 860px; border-right: 1px solid #F69789; border-bottom: 1px solid #F69789; border-left: 1px solid #F69789; text-align: left; } /*ヘッダ全体コンテナ*/ #header { background: url(images/backheader.gif) no-repeat left top; margin: 0px; padding: 0px; height: 95px; border-bottom: 5px inset #F69789; position: relative; } #header h1 { margin: 0px; padding: 0px; float: left; } /*ヘッダ内タイトルロゴ*/ #header img { margin: 0px; padding: 26px 0px 6px 10px; height: 63px; width: 130px; } /*ヘッダ内ナビ*/ #header ul { font-size: 11px; font-weight: bold; margin: 80px 0px 0px; padding: 0px; color: #666666; float: right; list-style: none; } #header li { display: inline; margin: 0px; padding: 0px 10px 0px 15px; background: url(images/tpo_button.gif) no-repeat left center; } #header li a { text-decoration: none; color: #666666; } #header li a:hover,#header li a:active { color: #990033; text-decoration: underline; } #header #midashi { position: absolute; height: 40px; width: 400px; left: 230px; top: 35px; background: url(images/midashi1.gif) no-repeat; font-size: 9px; } /*メイン*/ #main { margin: 0px; padding: 0px; height: 180px; border-bottom: 1px solid #660000; } #topnavi { margin: 0px; padding: 0px; height: 30px; border-bottom: 1px solid #990033; background: #666666; } #topnavi h2 { margin: 0px; padding: 0px; font-size: 9px; float: left; } #topnavi h2 a { text-decoration: none; display: block; margin: 0px; padding: 0px; height: 30px; } /*1番目のボタン*/ #topnavi h2#tn1 a { background: url(images/butoon1/tb1.gif) no-repeat; width: 130px; } #topnavi h2#tn1 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb1_2.gif) no-repeat; } /*2番目のボタン*/ #topnavi h2#tn2 a { background: url(images/butoon1/tb2.gif) no-repeat; width: 130px; } #topnavi h2#tn2 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb2_2.gif) no-repeat; } /*3番目のボタン*/ #topnavi h2#tn3 a { background: url(images/butoon1/tb3.gif) no-repeat; width: 130px; } #topnavi h2#tn3 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb3_2.gif) no-repeat; } /*4番目のボタン*/ #topnavi h2#tn4 a { background: url(images/butoon1/tb4.gif) no-repeat; width: 130px; } #topnavi h2#tn4 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb4_2.gif) no-repeat; } /*5番目のボタン*/ #topnavi h2#tn5 a { background: url(images/butoon1/tb5.gif) no-repeat; width: 130px; } #topnavi h2#tn5 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb5_2.gif) no-repeat; } /*6番目のボタン*/ #topnavi h2#tn6 a { background: url(images/butoon1/tb6.gif) no-repeat; width: 210px; } #topnavi h2#tn6 a:hover,#topnavi h2#tn1 a:active { background: url(images/butoon1/tb6_2.gif) no-repeat; } になります。
- ベストアンサー
- CSS
- CSSについての質問
/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、 下のようなホームページを作成しました。 http://www.nin-site.net/ すべて人から教えてもらったものなので、CSSは初心者です・・・。 そこで思ったのですが、 TOP・掲示板・メール等・・・ のメニューを、左寄りにすることはできないのでしょうか？ 下は、イメージ図です。（編集しました。） http://www.nin-site.net/image_style.jpg よろしくお願いします。 すべての内容が見たい場合は、 HTMLソース：http://www.nin-site.net/index.txt CSS：http://www.nin-site.net/css/style.css です。
- ベストアンサー
- CSS
- CSSでIE6だけ出る隙間をなくしたい
お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSについて
/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、 ホームページを作成しました。 すべて人から教えてもらったものなので、CSSは初心者です・・・。 そこで思ったのですが、 TOP・掲示板・メール等・・・ のメニューを、左寄りにすることはできないのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- IE6とXHTML+CSS
外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。 <XHTML> <div id="sabNavi"> <ul> <li class="smenu01"><a href="#">サイトマップ</a></li> <li class="smenu02"><a href="#">プライバシーポリシー</a></li> <li class="smenu03"><a href="#">お問合せ</a></li> </ul> </div> <外部スタイルシート> #sabNavi{ width:300px; } #sabNavi a{ height:20px; display:block; text-indent:-9999px; } #sabNavi a:hover{ background-position:0 -20px; } .smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; } .smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; } .smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; } .smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; } .smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; } .smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }
- 締切済み
- HTML
- CSS backgroundが反映されない件
CSSレイアウトで問題にぶつかってしまいました。 http://www.vivibond.com/demo/test/test.html 上記URLをFirFoxで見ると#contentsに書いた 「background: url(images/bg2.gif) repeat-y;」が反映されません。 いったい何故でしょうか。。。 CSSはこんな感じです。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ body { background: #FFFFFF; margin: 0px; padding: 0px; font: 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; } /*font*/ .pink {color:#F26E71;} /*ページ全体ラッパー*/ #wapper { margin: 0px; padding: 0px; width: 850px; } #wapper1 { margin: 0px; padding: 0px; width: 850px; background: url(images/bg.jpg) repeat-y; } /*コンテンツ*/ #contents { margin: 0px; padding: 0px; width: 800px; height: auto; clear: both; background: url(images/bg2.gif) repeat-y; } /*ナビ*/ #navi { background: #F3EDEE url(images/b_bg.jpg) no-repeat; padding: 44px 44px 150px 42px; width: 160px; float: left; } .navibox1{ height: 52px; background: url(images/naviboxbg.gif) no-repeat bottom; width: auto; } .navibox2{ height: 52px; width: auto; } #main { margin: 0px; padding: 0px; float: right; width: 554px; } .image { margin: 0px; padding: 20px 34px 20px 20px; } .topics { margin: 0px 34px 0px 20px; padding: 0px; } .about_text { margin: 0px 30px 0px 24px; padding: 0px 5px 30px 10px; line-height: 20px; } /*フッター*/ #footer { margin: 0px; background: url(images/footer.jpg) no-repeat; text-align: justify; clear: both; padding: 30px 0px 30px 470px; } ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- xhtml+cssでロールオーバーがうまく動作しない
以下挑戦したのですが、うまくいかないので、 こちらで質問させていただきました。 すいませんが、わかる方教えていただけませんでしょうか。 xhtml+cssでhpコーディングしてみたのですが、ロールオーバーがうまく動作しないのです。 レイアウトもCSS 再度にメニュー項目をCSSで作りました。 以下が htmlの記述です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テストテストテストテスト</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>id "header" の内容がここに入ります</h1> </div> <div id="contents"> <div id="sidenavi"> <h2 id="sn1"><a href="#"><em>TOP</em></a></h2> <h2 id="sn2"><a href="#"><em>テスト</em></a></h2> <h2 id="sn3"><a href="#"><em>テストテスト</em></a></h2> <h2 id="sn4"><a href="#"><em>リンク集</em></a></h2> </div> ************ 以下は、cssのコードです。 /*ここからサイドナビ指定*/ #contents #sidenavi { background: #99CC66 url(images/bg_19.jpg) repeat; margin: 0px; padding: 15px 0px 0px 5px; height: 1100px; width: 190px; float: left; } #contents #sidenavi h2 { font-size: 9px; float: left; margin: 0px; padding: 0px; } #sidenavi h2 a { text-decoration: none; display: block; height: 56px; width: 182px; margin: 0px; padding: 3px 0px 3px 3px; color: #0000CC; visibility: hidden; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #sidenavi em { visibility: hidden; } /*サイドナビ1番目*/ #sidenavi h2#sn1 { background: url(images/navi_06.jpg) no-repeat; } #sidenavi h2#sn1 a:hover,#sidenavi h2#sn1 a:active { background: url(images/navi_ov_06.jpg) no-repeat; } /*サイドナビ2番目*/ #sidenavi h2#sn2 { background: url(images/navi_12.jpg) no-repeat; } #sidenavi h2#sn2 a:hover,#sidenavi h2#sn2 a:active { background: url(images/navi_ov_12.jpg) no-repeat; } /*サイドナビ3番目*/ #sidenavi h2#sn3 { background: url(images/navi_14.jpg) no-repeat; } #sidenavi h2#sn3 a:hover,#sidenavi h2#sn3 a:active { background: url(images/navi_ov_14.jpg) no-repeat; } /*サイドナビ4番目*/ #sidenavi h2#sn4 { background: url(images/navi_16.jpg) no-repeat; } #sidenavi h2#sn4 a:hover,#sidenavi h2#sn4 a:active { background: url(images/navi_ov_16.jpg) no-repeat; } /*ここまでサイドナビ指定*/
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSでの影の付け方
http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>
- 締切済み
- ホームページ作成ソフト
お礼
>具体的に、どこの背景でしょう？ 「>>」となっている画像の部分です。 この部分だけを取り出して、現象が起こるサンプルを作ってはあるのですが、リンク張るとまた消されちゃいます。 いただいたヒント(背景はやめて<img>で文字の最後におく)を元に修正してみました。ありがとうございます。 リンク張られた(a要素が追加された)ときに、隠してある画像を表示するという物です。 あまりシンプルでないので微妙ですが… <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; } h2 img { display: none; border: none; } h2 a img{ margin-left: 10px; display: inline !important; } </style> <body> <h2><a href="#">あああああああああああああああああああああああああああ<img src="images/icon_link1.gif" alt="" width="13" height="13" /></a></h2> </body> </html>
補足
>あれ？ >■あああああああああ > ああああ□ >というようにしたいのですよね？ はい。先ほどのソースは、表示崩れを防ぐのを優先した妥協案です。 またまた言葉足らずですみません。