画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML
お世話になっております。
ある画像の上にposition:rerative;を使って文字をのせています。
この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか?
下記ソースです。
/*css*/
img.button{/*画像*/
margin:0px 0px 8px;
padding:2px;
border:#999999 1px solid;
}
.text{/*画像上の文字*/
margin:0px;
padding:0px;
font-size:14px;
text-align:left;
}
<!--html-->
<div style="position:relative;">
<a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a>
<div style="position:absolute; left: 24px; top: 13px; width: 217px;">
<p class="text">画像上の文字</p>
</div></div>
検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか?うまくいきませんでした。
お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。
表現の仕方や言葉の使い方を間違っていたらすみません…。
No.1ベストアンサー
- 回答日時:
だって、「画像上の文字」と書いてある段落はリンクに含まれてま
せんからね。場所を重ねただけじゃダメですよ。</a>の位置をもっ
と後ろ、最後の</div>の直前に移動しましょう。
<p class="text">画像上の文字</p>
</div></a></div>
それだけです。
早速のご回答ありがとうございます!
</a>の位置を移動するだけでできるとは感激です。
こんなにスマートに解決して下さってありがとうございます。
とても勉強になりました。もっとがんばります。
また機会がありましたらどうぞよろしくお願い致します。
ありがとうございました。
No.2
- 回答日時:
そういう場合は背景画像にしましょう。
aをdisplay:blockにして、
height:100%;でリンクを画像全体に反応させます。
<style type="text/css">
<!--
div{
width:346px;
height:98px;
border:#999999 1px solid;
background-image:url(image/photo1.jpg);
background-position:left top;
background-repeat:no-repeat;
margin:0 0 8px;
}
div a{
display:block;
height:100%;
padding-top:13px;
padding-left:24px;
text-decoration:none;
}
-->
</style>
</head>
<body>
<div>
<a href="index.html">画像上の文字</a>
</div>
</body>
</html>
ご回答ありがとうございます。
今回はNo.1の方の方法が手軽だったので、そちらにさせていただいたのですが、これも試させていただきました。
背景画像は1/3位模様があるので、文字は2/3までしか載せられません。そのため
div a{
display:block;
height:100%;
padding-top:13px;
padding-left:24px;
text-decoration:none;
}
ここにwidth:217px;と追加したところ、当たり前ですが模様部分にはリンクが反応しなくなってしまいました。
私の少ないCSS知識ではここまでしかできず、せっかく教えて下さったのに申し訳ありません。
もっと勉強がんばりたいと思います。
お忙しいところご丁寧にお教えくださり、ありがとうございました。
No.3
- 回答日時:
<a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
12.2 A要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
ブラウザは、次に<div>や<p>が現れたとき、その直前で</a>と閉じられていると解釈するでしょうが・・(IEは間違った解釈をする)・・・。
ですから、「ボックス全体にリンクを設定したい」はできませんが、画像は行内(inline)要素
<!ELEMENT IMG - O EMPTY -- Embedded image -->
ですから、画像全体にリンクを埋めることはできます。
この場合、ソースの{class="button"/>}から、リンクのための画像ボタンですから、
<p class="anchorIMG">
<a href="[URL]"><img src="[URL]" width="346" height="98" alt="・・へのリンク"><span>文字</span></a>
</p>
ですね。他の段落と区別したいので<p class="anchorIMG">としてある。
CSSは、
p.anchorIMG{position:relative;}
p.anchorIMG a span{display:block;position:absolute;left:24px;top:13px;}
とすればよいです。
他の場所のspanには適用しないので、
p.anchorIMG
└a
└span
のspanに対して適用されるようにセレクタを記述した。
また詳細度は1+10+1+1=13である。
ご回答ありがとうございます。
下記の通り、今回はNo.1さまの方法で対応させていただきました。
ORUKA1951さまがお教えくださった方法も試してみたいと思うのですが、恥ずかしながらぱっと拝見した段階では私に理解できそうにないです…。
でも、一つずつ確認しながらトライしてみますね。
勉強させていただき、ありがとうございます。
いただいた3つのアドバイス、どれも本当に勉強になったのですがやむを得ず先着順にベストアンサーをつけさせていただきました。申し訳ありません。どうかご勘弁下さい。
また機会がありましたらよろしくお願いいたします。
No.4
- 回答日時:
>下記の通り、今回はNo.1さまの方法で対応させていただきました。
それは絶対にダメ。最悪の対処です。説明したように他のブラウザでは表示できません。文法的に間違っているからです。
度々ご回答ありがとうございます。
ベストアンサーがどうのこうのと書いておきながら締め切るのを忘れていて今見にきたらこんなメッセージが!
締め切らなくて良かったです。
><a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。
これはそういう意味だったのですね。失礼しました。
もう一度勉強して出直します。
ありがとうございます。
No.1さまにも申し訳ありません。皆さんにとても感謝しています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
form input テキストを上下中央...
-
HTMLで文字が重なって表示されます
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
Win IE5.5~6.0での余白に関す...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
divタグ+CSSでのレイアウトで、...
-
指定したborderの一部が表示さ...
-
CSS(0の単位)について
-
W3Cのソースコードの検証サービ...
-
font-sizeが効かない
-
画像と一緒にスライドするリン...
-
4枚の画像を均等間隔で一列に...
-
余分な縦スクロールバーが出て...
-
z-indexで上になっている要素だ...
-
ホームページのCSSについて
-
CSS:animation開始位置の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報