画像の上に文字をのせ、ボックス全体にリンクを設定したい 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.4
- 回答日時:
>下記の通り、今回はNo.1さまの方法で対応させていただきました。
それは絶対にダメ。最悪の対処です。説明したように他のブラウザでは表示できません。文法的に間違っているからです。
度々ご回答ありがとうございます。
ベストアンサーがどうのこうのと書いておきながら締め切るのを忘れていて今見にきたらこんなメッセージが!
締め切らなくて良かったです。
><a href="[URL]"><div></a>なんてことは、さすがにHTMLを少しでも知っていれば、できないことは自明です。
これはそういう意味だったのですね。失礼しました。
もう一度勉強して出直します。
ありがとうございます。
No.1さまにも申し訳ありません。皆さんにとても感謝しています。
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.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知識ではここまでしかできず、せっかく教えて下さったのに申し訳ありません。
もっと勉強がんばりたいと思います。
お忙しいところご丁寧にお教えくださり、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
表示倍率を変えるとレイアウト...
-
hpビルダー 複数の表の罫線を...
-
table周辺の隙間をなくしたい。
-
プルダウンで長い名前の選択肢...
-
画面の分割
-
div内に外部のurlを表示させたい
-
li 黒丸含んで移動する方法
-
css初心者 フレックスボックス...
-
背景が下まで表示されないんです。
-
CSS:animation開始位置の設定
-
cssが効かなくて困ってます
-
floatを使わずに、cssレイアウ...
-
HTMLで横幅をCSSで設定できませ...
-
左100px 中100% 右100px
-
画像イメージの上下左右、欲し...
-
form input テキストを上下中央...
-
メイン画像とグローバルメニュ...
-
HTMLでCSSでボーダーが表示され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS:animation開始位置の設定
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
table周辺の隙間をなくしたい。
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報