- 締切済み
背景画像の上にテキストを表示したい
はじめまして。 さっそくですが、背景画像の上にテキストを表示したいのですが、各ブラウザによってレイアウトにずれが生じてしまいます。 画像リンク（Network Servicesなど）は各ブラウザで確認してもレイアウトが崩れていないのですが、テキストリンク（aaaaaaaaaやbbbbbbbbなど）が思い切りずれてしまいます。 こちらまず背景画像をレイアウトし、その上に画像リンクやテキストを重ねてレイアウトしているのですが、作り方そのものが間違っているのでしょうか？それともcssの設定に問題があるのでしょうか？ 該当css部分は下記です。 #oslu_1a{ margin-top: 30px; margin-left: 23px; } #oslu_2a{ margin-top: -55px; margin-left: 270px; } #oslu_3a{ margin-top: -39px; margin-left: 515px; } なにとぞよろしくお願いいたします。m(_ _)m
- lililili
- お礼率33% (1/3)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 9950high
- ベストアンサー率45% (11/24)
あと1つ 各スタイルシートの #box1、#box2、#box2に対して #box1{ width:100px; height:100px; background-color:#0099FF; float:left; padding: 0px 0px 0px 0px; word-break:break-all; } word-break:break-all;という スタイルシートを追加してみてはどうでしょうか？
- 9950high
- ベストアンサー率45% (11/24)
一番上のスタイルシート部分に body { margin: 0; padding: 0; } を入れてみてはどうでしょうか？
- 9950high
- ベストアンサー率45% (11/24)
どうもこんにちは 言葉では伝えずらいので簡単なサンプルを作成してみました。 ↓HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title> </title> <meta name="keywords" content=" " /> <meta name="description" content=" " /> <meta name="copyright" content=" " /> <link href="abc.css" rel="stylesheet" type="text/css" /> <!--<script language="JavaScript" src="abc.js" type="text/javascript"></script>--> </head> <body> <div id="box1"> <a href="*"></a> <div id="oslu_1a"> <ul class="products"> <li><a href="*">aaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="*">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="*">cccccccccccccccccccccc</a></li> <li><a href="*">dddddddddddddddddddddd</a></li> </ul> </div> </div> <div id="box2"> <a href="*"></a> <div id="oslu_2a"> <ul class="products"> <li><a href="*">aaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="*">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="*">cccccccccccccccccccccc</a></li> <li><a href="*">dddddddddddddddddddddd</a></li> </ul> </div> </div> <div id="box3"> <a href="*"></a> <div id="oslu_3a"> <ul class="products"> <li><a href="*">aaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="*">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="*">cccccccccccccccccccccc</a></li> <li><a href="*">dddddddddddddddddddddd</a></li> </ul> </div> </div> <!-- services / --> </body> </html> ↓css @charset "Shift_JIS"; #box1{ width:100px; height:100px; background-color:#0099FF; float:left; } #box2{ width:100px; height:100px; background-color:#66CC99; float:left; } #box3{ width:100px; height:100px; background-color:#CC3366; float:left; } #oslu_1a{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #oslu_2a{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #oslu_3a{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } バックカラー部分に画像を配置 パディングの設定で調整できると思います。 参考程度によろしくお願いします。
補足
9950highさん、早速ご丁寧にサンプルをありがとうございました。m(_ _)m 大変助かりました！なるほどboxをさらにいれこにするのですね！ ご指摘いただきました部分を参考に自分で再度チャレンジしてみました。 やはりまだブラウザ間のレイアウトのずれが生じている状態です。 フォントの指定にも問題があるのでしょうか。 それともなにか私の解釈がおかしいのでしょうか。。。 恐れ入りますが、よろしくお願いします。m(_ _)m
関連するQ&A
- 画像の上に、背景を表示させテキストを非表示させたdisplay:block;を表示させたい
よくliなどでテキストを非表示にさせ、背景画像を表示させたメニューがありますが、それを画像の上に表示させる方法を教えてください。 通常ならその画像をcssで背景画像に出来るのですが、 画像に順番ずつじんわり表示させるjavascriptの指示をしており、 その画像をcssで背景画像とするわけにいかないのです。 現在ですと、Dreamweaverのデザインプレビューだと正しい位置にdisplay:block;が存在するのですが、 実際にブラウザで確認すると、何も表示されていないように見えます。 下記がソースです。 よろしくお願いします。 ------------------------------------------------------------ 【HTML】 <div id="containerTop"> <div id="titleTop"> <h1><a href="index.html">タイトル</a></h1> <h2>サイト説明</h2> <ul> <li id="profile"><a href="#">プロフィール</a></li> <li id="photo"><a href="#">写真</a></li> <li id="blog"><a href="#">ブログ</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> </ul> </div> <div id="topbgphoto" class="pics"> <img src="img/top/001.jpg" /> <img src="img/top/002.jpg" /> <img src="img/top/003.jpg" /> </div> </div> ------------------------------------------------------------ 【CSS】 /* container [ ----------------------------------------------------------- */ #containerTop { width:1024px; position:relative; margin:106px auto auto 0; } /* titleTop [ ----------------------------------------------------------- */ #titleTop { width:661px; position: absolute; top: 241px; left: 0px; height: 138px; } #titleTop h1 a{ display:block; text-decoration:none; text-indent:-7777px; width:246px; height:24px; position: absolute; top: 25px; left: 370px; padding:0; font-size:12px; } #titleTop h2{ display:block; text-decoration:none; text-indent:-7777px; width:310px; height:16px; position: absolute; top: 70px; left: 304px; padding:0; font-size:12px; } /* menu [ ----------------------------------------------------------- */ #titleTop ul { position: absolute; top: 87px; left: 0x; padding:0px; list-style:none; } #titleTop li { } #titleTop li a { display:block; text-decoration:none; text-indent:-7777px; height:17px; width:59px; } #titleTop li a:hover { background-image: url(../img/top/menu_ov.jpg); } #titleTop li#profile a{ background-position: 0 0; position: absolute; top:17px; left:344px;} #titleTop li#photo a{ background-position: -70px 0; position: absolute; top:17px; left:414px;} #titleTop li#blog a{ background-position: -140px 0; position: absolute; top:17px; left:484px;} #titleTop li#contact a{ background-position: -210px 0; position: absolute; top:17px; left:554px;} /* ゆっくり表示させる背景画像 [ ----------------------------------------------------------- */ .pics { width:1024px; height:587px; padding: 0; margin: 0; }
- ベストアンサー
- HTML
- 背景画像上にテキストを配置したボタンについて
今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい） 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか？ また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- Liで背景画像が表示されない
よく見かけるLiでナビゲーション項目を表示させるのを しようとしているんですが、Liの背景画像が上手く表示されません。 navigationの背景画像は表示されたのですが、liで指定した 背景画像が表示されません。 どこが悪いのでしょうか?? 初歩的な事かもしれませんが、よろしくお願いします。 #navigation { WIDTH: 900px; height:50px; background: url(./h_side.jpg); background-position: left top; text-align:left; ul { margin: 0px; padding: 0px;} li { display: block; } .menuA01 { width: 178px; height:50px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; text-decoration: none, background : url(./menuA01.jpg); background-position: left top; float: left; <div id="navigation"> <ul> <li class="menuA01"><a href="/index.html">menuA01</a></li> <li class="menuA02"><a href="/index.html">menuA02</a></li> <li class="menuA03"><a href="/index.html">menuA03</a></li> <li class="menuA04"><a href="/index.html">menuA04</a></li> <li class="menuA05"><a href="/index.html">menuA05</a></li> </ul> </div>
- 締切済み
- HTML
- CSSで指定した背景画像にリンクエリアを設定する方法。
メインビジュアルとしてCSSで背景画像として指定したものの中にリンクエリアを作って、そこの部分だけにマウスをもってきた時に、リンク先に飛ぶようにしたいのですが、毎回firefox, IE7,IE6でのmargin, padding,の違いに四苦八苦してます。 大抵は、margin-topを違うブラウザ用にpadding-topにして、*htmlや、*:first-child+html等のハックでカバーしてたりするのですが、今回はそれでもうまくいかず、どなたか教えて頂けたらと質問させて頂きました。 以下CSSのソースです。 #main_visual { background:url(../img/main_visual.jpg) no-repeat; width:666px; height:418px; text-indent:-9999px; } #main_visual a{ display:block; width:338px; height:43px; position:relative; top:324px; left:308px; } 上のように、666 X 418の画像の中に、 上から324px 左から308pxの位置に大きさ338 X 43のリンクエリアをつくリたいのですが、、上記だと、IE7 IE6ではうまくいくみたいですが、 firefoxとsafariだと、positionが全くきかず左上の位置(top:0 left:0)にリンクエリアがきてしまってます。。 どのようにリンクエリアを指定するのが最もスマートな方法なのでしょうか？ 毎回悩んでます。。ちなみに、*:first-child+html このIE7用のハックってまだ使えたりするんでしょうか？^^;
- ベストアンサー
- CSS
- htmlで画像の上にテキストを表示したが、ブラウザーによって見え方が違う
ホームページの制作で 部分的に画像の上にテキストをつけようと <DIV STYLE="position:absolute;"> を使って作ってみました。 IEで見るとちゃんとできているんですが、 サファリ、Firefoxで見ると当該箇所が左にずれてしまいます。 ・画像の上にテキストをつける ・その画像の中に部分リンクをつける ・どのブラウザーで見てもずれない 以上の条件を満たせば、やり方を問いません。 どなたか教えていただけませんでしょうか？ どうぞよろしくお願いいたします。 素人なので見づらく、変に複雑になっているかもしれませんが 以下ソースの一部です。 <style type="text/css"> div.先頭画像 { background-image:url(./images/先頭画像); background-position: top center; background-repeat:no-repeat; margin:0; } div.サイド { background-image:url(./images/サイド画像); background-position: top center; margin:0; background-attachment:fixed; } table.Goo{ color:#000; } </style> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <div class="サイド"> <center><img src="./images/リンク画像" width="794" height="662" border=“0” usemap="#top"/><br /> <map name="top"> <AREA SHAPE=rect COORDS="610,0,755,30" HREF="リンク先"> </map></center> <center><IMG SRC="images/white2.gif" width="794" height="1840" border=“0”><br /></center> <!--当該箇所> <DIV STYLE="position:absolute; top:662px; left:58px"> <IMG SRC="images/背景画像" border=“0” usemap="#first"/><br /> <map name="first"> <AREA SHAPE=rect COORDS="633,18,776,228" HREF="リンク先"> </map> <DIV STYLE="position:absolute; top:165px;left:125px"> テキスト </DIV> <DIV STYLE="position:absolute; top:570px;left:125px"> テキスト </DIV> </DIV> <!--当該箇所 ここまで> <center> <table class="Goo" width="756" cellpadding="0" cellspacing="0" border=“0”> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="416" height="53" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> <img src="./画像" width="369" height="15" alt="" border=“0”/> <br /> <br /> </td> </tr> <tr> <td width="75"><br /></td> <td colspan="3" valign="top" width="681" align="left"> テキスト <br /> </td> </tr> </table> </center> </div> </body>
- 締切済み
- その他([技術者向] コンピューター)
- CSS適用時に背景画像をテキストの上に上書きする
XHTMLでテキストで入力したものを、CSS適用時に背景画像をテキストの上に上書きして画像に置き換えたのですが、そこがリンクしてる場合オンマウスしてもマウスカーソルが、リンク用のアイコンに切り替わらず困ってます。 ---XHTMLのソース--- <div id="logo"> <h1> <a href="index.html"> <span></span>テキスト部分</a> </h1> </div> ---CSSのソース--- #logo{width:106px;float:left;margin:0;padding:0;} #logo h1{font-size:10px;position:relative;width:106px;height:43px;} #logo span{background:url("../img/logo.gif") no-repeat;width:100%;height:100%;position:absolute;} （購入した本に載っていたテクニックなんで、 h1とspanに対して何でpositionでrelativeとabsoluteを入れる必要があるのかも正直分からない状態です。） ご指導宜しくお願いします。
- ベストアンサー
- CSS
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- HTML
お礼
9950highさん、いろいろとアドバイスいただき本当にありがとうございます。 ご指摘いただいたとおりに指定してみたのですが、やはりブラウザによってフォントの大きさ表示の違いのせいか同じようにはなりませんでした(＞ε＜) おそらくこの作り方そのものがムリがあるのではないかと思ったりしています。（自分自身も今までかなりいろいろ試行錯誤はしてみたのですが、最終的にはブラウザごとに違うcssを読み込ませるという方法をとっています） 9950highさんのアドバイスとても参考になりました。 この問題におつきあいくださり、本当にありがとうございました。m(_ _)m