スタイルシートでリンク設定すると画像が…

[新着] Webテンプレートを仮オープンしました

0   名前： らら ： 2005/06/24 08:49
スタイルシートのリンク設定について質問させていただきます。

テキストリンクの下線をリンク色とは違う色にしたくて、
「border」を使って以下のように設定しました。

<style type="text/css">
<!--
a:link {text-decoration:none;color:#ff8800;border-bottom:1px solid #c0c0c0;}
a:visited {text-decoration:none;color:#ff8800;border-bottom:1px solid #c0c0c0;}
a:active {text-decoration:none;color:#ff8800;border-bottom:1px solid #c0c0c0;}
a:hover {text-decoration:none;color:#ff8800;position:relative;top:1px;left:1px;border:none;}
-->
</style>

でも、画像リンクにはこの設定を無効したいのです。
方法がわからないので教えてください。

よろしくお願いします。
1   名前： LUC ： 2005/06/24 08:49
クラス指定をしてみては？
http://www.tagindex.com/stylesheet/basic/format2.html
2   名前： カヅサツ ： 2005/06/24 08:49  ［URL］
class属性を付けるまでもなく、子孫セレクタで十分な気がします。

a:link img,
a:visited img{
border-width : 0px;
}
3   名前： LUC ： 2005/06/24 08:49
>カヅサツさん
おっしゃる通りです。浅慮でした。
ご教示ありがとうございます。

>ららさん
そんなわけで、私のレスは忘れてください（滝汗）
4   名前： らら ： 2005/06/24 08:49
ありがとうございます。

早速コピペで試してみましたが、上手くできません。
クラス指定もしてみたのですが、ダメでした。
画像リンクをテーブルに入れてるのが原因なんでしょうか？

ヨロシクお願いします。
5   名前： カヅサツ ： 2005/06/24 08:49  ［URL］
なにかをミスっているのでしょうが、該当のページを拝見できれば検証できるかもしれません。

文法違反は http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックできます。
6   名前： らら ： 2005/06/24 08:49  ［URL］
ありがとうございます。

http://www.eonet.ne.jp/~zodiac212/test/test.html

今このページで色々試してるんですが、
なかなか画像のボーダーが消えてくれません。

よろしくお願いします。
7   名前： カヅサツ ： 2005/06/24 08:49  ［URL］
ああ、オレが愚かでした。

LUCさん> クラス指定をしてみては？
オレ> class属性を付けるまでもなく、子孫セレクタで十分な気がします。

borderプロパティで下線を付けているんだから、子孫セレクタでどうなるもものではないのでした。
というわけで、LUCさんの言う通り、class属性を使う、が正解です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>テスト</title>
<style type="text/css">
body{
color: #000000;
background-color: #FFFFFF;
}
a:link,
a:visited{
text-decoration:none;
color:#ff8800;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #c0c0c0;
}
a:active{
color:#ff8800;
}
a:hover{
color:#ff8800;
position:relative;
top:1px;
left:1px;
border-width: 0px;
}
a:link img,
a:visited img{
border-width: 0px;
}
a.imglink:link,
a.imglink:visited{
border-width: 0px;
}
ul.menu{
margin: 5px;
padding: 0px;
width: 50%;
height: 50px;
}
ul.menu li{
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 30px;
display: inline;
}
</style>
</head>
<body>

<ul class="menu">
<li><a href="test.html">インフォ</a></li>
<li><a href="test.html" class="imglink"><img src="_ts_info.png" alt="INFO" width="68" height="26"></a></li>
</ul>

</body>
</html>
8   名前： らら ： 2005/06/24 08:49
ありがとうございます。

出来ました。
本当ありがとうございました。

またお世話になるかもしれませんけど、
その時はまたよろしくお願いします。
9   名前： LUC ： 2005/06/24 08:49
/* 質問に関係ない＆解決後なので恐縮ですが */

カヅサツさん> class属性を付けるまでもなく、子孫セレクタで十分な気がします。
私>おっしゃる通りです。浅慮でした。

なので、私が最初に書いたクラス指定云々を「正解」と言っていただいてしまうのは、
あまりにも申し訳ないです（汗）
計算が間違ってるのに答えだけ合っていたようなものですから、
まったくもってお恥ずかしい限りです。恥の上塗りですね（汗）
しかし、大変勉強になりました。
質問者ではありませんが、お礼を言わせてください。ありがとうございました。
一覧へ戻る