- ベストアンサー
スタイルシートで設定した背景にLINKを貼りたい
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシート（css）は画面表示のレイアウトを定義するだけなのでリンク定義はできません。 html側で <a href="リンク先URLアドレス"><img src="header.png" width="XX" height="XX" border="0" /> を定義してはどうでしょうか。
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5085/13292)
背景にはリンクを張れません。 背景と同じ位置になんらかのインライン要素を用意して、それにリンクを張りましょう。
関連するQ&A
- 2つのDIVを中央と右に横並びにしたい
いつも大変お世話になっております。 wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。 Topというdivの中に「logo」と「social」という２つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、 横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。 是非どなたかご教授いただけますと、非常に助かります。 <div id="top"> <div id="logo"></div> <div id="social"> <div class="fb"></div> <div class="twitter"></div> </div> </div> #top { height: 36px; } #logo { background-image: url(images/logo.png); background-repeat: no-repeat; margin: 0 auto; height: 36px; width: 397px; } #social { float:right; height: 36px; width:56px; } #social .fb { background-image: url(images/fb.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; } #social .twitter { background-image: url(images/twitter.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; }
- ベストアンサー
- CSS
- 線が段々になってしまいます
ＣＳＳは body#output{ background-image:url(../image/header_line.png); background-position: left 73px; background-repeat: repeat-x; background-color: #E8FFE8; } #header{ height:70px; padding-top:10px; min-width:800px; background-image: url(../image/header.png); background-repeat: repeat-x; background-position: left; } オレンジの線が背景とヘッダーの境で少し段になってしまいます。 どうしたら段をなくせますか？
- ベストアンサー
- CSS
- ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
- ディスプレイのサイズに合わせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- CSS
- 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
- 背景画像
背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>
- ベストアンサー
- CSS
- スタイルシート教えて下さい
ブログのトップページの一番上の部分を 自分の作った画像に変えました。 それはうまくいったのですが、 その部分にブログサイト名と説明文が入るのですが、 自分の画像を貼り付ける前までは一番左にあった文字が 今は真ん中に表示されてしまうんです。 ブログ名（リンクつき）とブログの説明文を左に表示させるには どうしたらいいのか教えて下さい。 その部分のスタイルシートです↓ #banner{ background-image:url(http://△△△△/○○○/□□□.jpg); background-repeat:no-repeat; background-position:left top; font-family:arial, Helvetica; padding:0px 0px 0px 197px; height:197px; text-align:left; margin-left:13px; }
- 締切済み
- ブログ
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- 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
