【Html CSS】<a>の上に文字を配置したい

解決済

質問者：kingfruits
質問日時：2012/02/12 22:57
回答数：4件

添付の画像の様にしたいです。
一番左には「ＳｏｌｄＯｕｔ」って文字が一番上に配置されてます。
（この状態でhoverも<a>のリンクも効かせたい）

以下は、ソースです。これを添付の画像の様にしたいです。
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='Content-Style-Type' content='text/css'>
<style>
img{
border: 0px;
vertical-align: middle;
}
.box li{
float: left;
list-style:none;
}
.box .out{
border-right: 10px solid #fff;
border-top: 10px solid #fff;
}
.box a {
text-align: center;
display: block;
text-decoration: none;
font-weight: bold;
color: #69380f;
background-color: #f2f2f2;
width: 100px;
height: 120px;

}
.box a:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<ul class='box'>
<li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li>
<li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li>
<li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li>
</ul>
<br>
</body>
</html>

以上、ご指導の程、宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： Questa
回答日時：2012/02/13 20:34

A要素中に「Sold Out」を入れておけば、たとえそれが最前面に表示されていても、clickや hoverに影響を与えません。

また Sold Outを SPAN要素として記述し、position:absoluteを適用すると、既存のテキストや画像に乗る形で表示されます。
位置付けは CSSをご覧ください。

(HTML)Sold Outを SPAN要素で追加

<li><div class='out'><a href='…'>hoge<br><img src='…'><br>… <span>Sold Out</span></a></div></li>

(CSS)
.box a {
…
position: relative; /* 追加（position:absolute用）*/
}
/* 以下追加 */
.box a span {
position: absolute;/* 位置付けと最前面表示 */
left: 0;
top: 50%;/* 垂直位置調整 */
margin-top: -0.5em;/* 行の高さの半分上へ */
width: 100%;/* 水平位置調整 */
text-align: center;/* 水平位置調整 */
color: #f00;
}

※ SPAN要素が複数行になる場合は、margin-topの変更が必要です。
※ フォントにより垂直位置に若干の異動が生じる場合があります。

- 0
- 件

通報する

この回答へのお礼

Questaさん、ご回答ありがとうございました。
とても参考になりました。

通報する

お礼日時：2012/02/14 13:55

No.3

回答者： ORUKA1951
回答日時：2012/02/13 19:41

とりあえず、持ち合わせのものを少し変更

[ポイント]
1) 文字は<a></a>内に書けばリンクされる。
2) 内容の追加は:before,:after擬似要素とcontent:プロパティを使う。
　位置を合わせるには親をrelative;にしてから・・absolute;で
3) 本来は、この様なマークアップでないほうが良い。面倒くさくても
　<ul>
　　<li><a href="">商品名</a>
　　　<ol>
　　　　<li><a href="">画像</a></li>
　　　　<li><a href="">説明</a></li>
　　　</ol>
　　</li>
　</ul>
　とすべきでしょう。また、
　<ul>
　　<li><a href="">商品名</a>
　　　<ol>
　　　　<li>画像</li>
　　　　<li>説明</li>
　　　</ol>
　　</li>
　</ul>
でも、まったく同じできます。(発想の転換が必要)

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　※オプションでCSS3を選択
でチェック済み

【class名は、内容を示すほうが後々絶対に楽です。--class名やidは「文書構造を示すもの( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )」】
　売れたものだけ<li class="soldOut">と書き換える。
★タブは＿に置換してあるので戻す。

<!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>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿</div>
＿<div class="section merchandise">
＿＿<ul>
＿＿＿<li><a href="#1">商品名1
＿＿＿＿<span class="image"><img src="./images/thumbnail/1.jpg" width="300" height="400" alt="黒Lサイズ"></span>
＿＿＿＿<span class="price">300円</span>
＿＿＿</a></li><li><a href="#2" class="soldOut">商品名2
＿＿＿＿<span class="image"><img src="./images/thumbnail/2.jpg" width="300" height="400" alt="黒Mサイズ"></span>
＿＿＿＿<span class="price">300円</span>
＿＿＿</a></li><li class="soldOut"><a href="#3">商品名3
＿＿＿＿<span class="image"><img src="./images/thumbnail/3.jpg" width="300" height="400" alt="黒Sサイズ"></span>
＿＿＿＿<span class="price">300円</span>
＿＿＿</a></li><li><a href="#4">商品名1
＿＿＿＿<span class="image"><img src="./images/thumbnail/4.jpg" width="300" height="400" alt="白Lサイズ"></span>
＿＿＿＿<span class="price">300円</span>
＿＿＿</a></li><li><a href="#5">商品名2
＿＿＿＿<span class="image"><img src="./images/thumbnail/5.jpg" width="300" height="400" alt="白Mサイズ"></span>
＿＿＿＿<span class="price">300円</span>
＿＿＿</a></li><li><a href="#6">商品名3
＿＿＿＿<span class="image"><img src="./images/thumbnail/6.jpg" width="300" height="400" alt="白Sサイズ"></span>
＿＿＿＿<span class="price">300円</span>
＿＿＿</a></li>
＿＿</ul>
＿＿<hr>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん、ご回答ありがとうございました。
とても参考になりました。

通報する

お礼日時：2012/02/14 13:56

No.2

回答者： ORUKA1951
回答日時：2012/02/13 00:54

もうひとつ、

画像の表示サイズは？
a要素にサイズが指定してあるけど、なぜ？
リスト項目ひとつのひとつのサイズはどの程度を想定しているのですか？
(w)100,(H)120じゃえらく小さいけど・・

この回答への補足

heightに深い意味はありません。が、widthは私なりの意味があります。
マウスが<a>の上では指先マークで、となりとの境目では矢印カーソルにしたいと思ってます。
なので、<a>を.box .outでくるんで、「border-right: 10px solid #fff;」としてます。

＞(w)100,(H)120じゃえらく小さいけど・・
大きさに深い意味はありません。

a要素の隣に10pxのボーダがあればそれでよいです。

疑問にお答えできてますでしょうか？
なにか不可思議なことがありましたら、質問ください。

補足日時：2012/02/13 01:10

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/02/12 23:16

Sold Outの文字は、すべてではないのですか？

Sold Outの文字はHTMLのソースに書くのですか？それとも、HTMLでsoldOutであることは、class名だけで示すのですか？

この回答への補足

ORUKA1951さん、ご回答ありがとうございます。

＞Sold Outの文字は、すべてではないのですか？
「すべて」と言う意味は、３つすべてといういみでしょうか？
で、あれば、左の一つだけ、そうしたいです。

＞Sold Outの文字はHTMLのソースに書くのですか？
ソースをいじってもらって結構です。

それとも、HTMLでsoldOutであることは、class名だけで示すのですか？
ソースもclassも変えてもらって結構です。

ただ、リンクの機能、hoverはそのまま残したいです。

よろしくお願いいたします。

補足日時：2012/02/12 23:51

通報する