CSSで２つの小さなテキストブロックを常に中央のバックグラウンドイメージ上に表示
- CSSを使って、英語のサイトと日本語のサイトに入る入り口のページを作っています。バックグラウンドには幅750px高さ500pxのイメージを常に中央で、上から100pxのところに表示するようにしました。
- バックグラウンドイメージ上にはほとんど表示するテキストがなく、左下幅200px高さ200pxの部分に日本語の入り口を多少のテキストと共に配置し、右下に同じサイズの英語の入り口を配置したいと考えているのですがどうも上手くいきません。
- bodyは以下のようにしてあります。#japaneseと #englishの中身をいろいろ試して見ましたがどうしても左に寄ってしまいます。良い方法がありましたらご教授お願いします。
- ベストアンサー
CSSで２つの小さなテキストブロックを常に中央のバックグラウンドイメージ上に表示
お世話になります。 CSSを使って、英語のサイトと日本語のサイトに入る入り口のページを作っています。バックグラウンドには幅750px高さ500pxのイメージを常に中央で、上から100pxのところに表示するようにしました。 バックグラウンドイメージ上にはほとんど表示するテキストがなく、左下幅200px高さ200pxの部分に日本語の入り口を多少のテキストと共に配置し、右下に同じサイズの英語の入り口を配置したいと考えているのですがどうも上手くいきません。bodyは以下のようにしてあります。#japaneseと #englishの中身をいろいろ試して見ましたがどうしても左に寄ってしまいます。良い方法がありましたらご教授お願いします。 body { text-align:center; width: 750px; height: 500px; color: #ffffff; background: url(images/sample.gif) no-repeat 0px 100px; background-position: center; } #english { } #japanese { }
- 443mon
- お礼率86% (19/22)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
面白そうというか、定番の方法なので <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- h1{display:none;} div.SiteMap{ display:block; position:relative; width: 750px; height: 500px; margin-top:100px; margin-left:auto; margin-right:auto; background: url(/images/sample.gif) no-repeat 50%; padding:0px; } div.SiteMap ol{ display:block; width:200px; height:50px; position:absolute; top:225px; left:275px; padding:0px; } div.SiteMap ol li{ display:block; margin: 10px; height: 30px; width: 70px; float:left; } div.SiteMap ol li a{ position:relative; display:block; margin:0px; height:27px; width: 67px; text-align:center; text-decoration: none; font-weight:bold; padding-top:6px; } a:link { color: rgb(0,0,255); border: outset 5px blue; } a:visited { color: rgb(0,0,136); border-color: rgb(0,0,136); } a:hover { color: rgb( 0,136,255); border-color: rgb( 0,136,255); } a:active { color: rgb( 155,0,255); background-color:black; border-style: inset; top: 5px; } --> </style> </head> <body> <h1>title</h1> <div class="SiteMap"> <ol> <li><a href="./indexj.html" title="日本語の入り口" accesskey="J">日本語</a></li> <li><a href="./indexe.html" title="EnglishPage" accesskey="E">English</a></li> </ol> </div> </body> </html>
関連するQ&A
- CSSのbackground-imageが表示されません
CSSのbackground-imageが表示されません 恐れ入ります。現在CSSを勉強しつつサイトを作成しているのですが 2カラムの枠組みにて containerボックスの中にsidewrapとmainwrapを配置し、 サイトを表示してみるとcontainerボックス中にて設定をしたbackground-imageが表示されません。 確認は以下のブラウザにて確認してみました。 ○background-image表示されない ・firefox(最新ver) ・IE8 ○background-imageが表示される ・IE6 いろいろ試してみた所mainwrap中のfloat: rightをコメントアウトしたら IE8等でもbackground-imageが表示されるみたいなのですが・・・ 解決法などご存知の方がいらっしゃいましたらお教えいただけませんでしょうか。 CSSの設定は以下のようになってます。 #header{ width:800px; background-color:#ffffff; } #container{ width:800px; background-image: url(img/back.jpg); background-repeat: repeat-y; } #sidewrap { width: 190px; float: left; margin: 0px auto; text-align: left; } #mainwrap { width: 600px; float: right; text-align: left; } #footer{ clear:both; width:800px; text-align: center; border-top: 3px solid; border-bottom: 1px solid; } 以上 よろしくお願いします。
- ベストアンサー
- HTML
- background-imageの配置
御世話になります。 CSSにて下記画像のように『お問合せボタン』を配置したいと考えております。 左の写真の一番下のラインに合わせて配置したいんです。 お問合せボタンの上には商品説明が入るようなイメージです。 background-positionでは無理ですよね？ ご教授願います。 現在の設定↓ .go_form { display: block; background-image : url(../img/お問合せボタン.png); background-position: bottom right; background-repeat: no-repeat; text-align: left; text-indent: -9999px; }
- ベストアンサー
- ホームページ作成ソフト
- XHTML、CSSレイアウトでフッターを常に最下部に配置するには?
フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }
- 締切済み
- ホームページ作成ソフト
- ｃｓｓで中央よせ
CSSでwidthはパーセントで設定する場合テキストボックス、ボタン、リンクを一列に 中央配置したいのですがどうしたらいいのでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--Android 1.6対応--> <style type="text/css"> <!-- div#topCouponSearch { background-image: url("./top_coupon_search_bg.jpg"); display: block; height: 26px; margin-bottom: 1px; width: 100%; } .topCouponSearcha { display: block; font-weight: bold; height: 15px; padding: 5px 0 0 1px; width: 100%; } .topCouponSearcha2 { background-color: #FFFFFF; background-image: url("./spacer.gif"); color: #999999; height: 10px; padding: 3px 0 0; width: 40%; font-size: 10px; } .topCouponSearcha3 { font-size: 11px; font-weight: normal; margin-left: 3px; } button#getad { font-size: 10px; } --> </style> </head> <body> <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form> </body> </html>
- ベストアンサー
- CSS
- ＩＥ CSSマウスオーバー背景イメージ表示ズレ
CSSを使ってリンクをマウスオーバーしたら左側に配置してある背景イメージをずらしたいと思って以下のように記述しました。 IEは日本語だとちゃんと意図とおりに動いてくれるのですが、英語(半角英数)にすると通常の状態で少し上の方に背景イメージがずれて、本来マウスオーバー時に出現してほしいところがはみ出てきてしまいます。 つまり英語と日本語で表示位置にズレが生じてしまっています。何か対策を知っている方はいますでしょうか？ ちなみにfirefoxでは日本語英語ともに差異なく意図したとおりに表示してくれます。 CSS↓ a.btn{padding: 1px 0px 1px 13px;background: url("img.gif") no-repeat left top;} a:hover.btn{background-position: left -13px;} a:active.btn{background-position: left -26px;} HTML↓ <a href="index.html" class="btn">テスト</a> 環境 windowsXP firefox2.0.0.14 IE7
- ベストアンサー
- HTML
- CSSスプライトの中央寄せ （CSS）
どうか力をお貸しください…。 dreamweaverでホームページを作成しています。 640pxの幅を指定した<div>の background-img に、CSSスプライトの中の幅600pxの画像を配置し、background-positionで、0 -100px; のように場所を指定しました。 その幅600pxの画像を640pxの<div>の中で中央寄せで配置したいのですが、どのようにすればいいでしょうか？ padding:20px；は使うことができません。 ご存知の方がいたらよろしくお願いします。
- 締切済み
- CSS
- 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
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- CSS block 表組 position:absolute;
まったくの初心者です。 本当の初心者なので、凄いことをしていたり 説明が分かりにくいかもしれませんが、 ご教授、よろしくお願い致します＊ ・blocka の長方形が上 ・上記blockaの下を blockb blockc blockdに縦に分ける これで四角のまとまりができます。 ・この四角のまとまり、の右側をbody指定しました。 blocka blockb blockc blockdを#FFFFFFに。 bodyを#CCCC99にしたいです。 下を書いたのですが、 .contents{ width:700px; background-color:#FFFFFF; 背景色#FFFFFFが、div.blocka、だけに反映されるんです。 div.blockb、div.blockc、div.blockdには、 body{ margin:0px; padding:0px; background-color:#CCCC99; } bodyの#CCCC99が反映されています。 改善できる方法をご存じないでしょうか。 私のおかしな説明で簡単に理解できるかどうか判りませんが よろしくお願い致します＊ ***************************************************** /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#CCCC99; } body a img{ border: none; } .contents{ width:700px; background-color:#FFFFFF; } div.blocka { width:500px; height:150px; margin-left:100px; } div.blockb { width:100px; float: left; } div.blockc { width:200px; position:absolute; left:100px; } div.blockd { width:200px; position:absolute; left:300px; }
- 締切済み
- HTML
- 中央に配置して上にテキストを置きたい
dreamweaver8 を使ってホームページを作っています。 画像（中央に配置）の上にテキストを置きたいのですが、どのような方法がベストなのでしょうか？ 試してみたのは… １．背景として配置して上にテキストを置く。 でもこれだと、背景の画像が中央にいきません。 ２．画像をイメージとして配置 これだと、テキストが上に置けません。 画像を中央に配置して、かつ上にテキストを置けるようにするにはどうしたらいいのでしょうか？？ よろしくお願いします。
- 締切済み
- CSS
お礼
早速のご回答ありがとうございます。 IEを除いて意図するようにできました。下部の左右両サイドに少し文章を入れたのですが、CSSでは問題なく収まっているのにIEだけバックグランドイメージから右にはみ出してしまいます。Firefox、Opera、Safari、Chromeではきれいにそろうのですが・・・ IEのバグでしょうか？ 少し全体を左に寄せてよしとしようと思います。