外部ファイルcssで画像表示&リンク

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



0   名前: asuka : 2005/12/19 11:41  [URL
外部ファイルcssで画像表示をし、クリックすると指定したリンク先へ飛ばしたいと考えております。
実際にURLが僕のサイトなのですけれども、左フレームにバナーがあります。
現状これは以下のような方法で表示&リンクさせていまして、IEですと望み通りの動作をします。

<TABLE border="0" width="100%">
<TBODY>
<TR>
<A href="http://blue-transparency.net/" target="_top"><TD class="tdlogo" colspan="2" align="center"></TD></A>
</TR>
</TBODY>
</TABLE>

外部ファイルcss
td.tdlogo{
background:transparent url("./a01_logo.gif") no-repeat;
background-position:center center;
width="152";
height="35";
border="0";
}

結論から言うと、IEでは望み通りの動作はするのですが、NSですとバナーの表示がおかしいです。(1/3くらいしか表示されない)

で、実際のところHPビルダーを使いますと、エラー表示されます。
おそらく正しいタグの使い方をしていないのだと思います。

正しい文法でこのような動作をさせるにはどうしたらよいでしょうか??
といいますか、外部ファイル内のtd.tdlogoクラスでリンクすればいいと思うのですが、アンカータグって使えるのでしょうか?

外部ファイルでリンク先へ飛ばすにはどのように記述すればよいでしょうか?
それが出来た場合のhtmlの記述も教えて頂けると幸いです。

1   名前: naka@sukiero : 2005/12/19 11:41
マルチポストは禁止されています。
http://www.shoshinsha.com/cgi-bin/bbs_new/c-board.cgi?cmd=ntr;tree=5381;id=situmon

はじめにお読みください
http://www.tagindex.com/bbs/note.html
ご利用上のご注意とお願い
マルチポストは禁止です。(削除の対象になります)

----------------------------------------------------------------------
名前: asuka : 2005/12/06 16:35

外部ファイルcssで画像表示をし、クリックすると指定したリンク先へ飛ばしたいと考えております。
実際にURLが僕のサイトなのですけれども、左フレームにバナーがあります。
現状これは以下のような方法で表示&リンクさせていまして、IEですと望み通りの動作をします。

<TABLE border="0" width="100%">
<TBODY>
<TR>
<A href="http://blue-transparency.net/" target="_top"><TD class="tdlogo" colspan="2" align="center"></TD></A>
</TR>
</TBODY>
</TABLE>

外部ファイルcss
td.tdlogo{
background:transparent url("./a01_logo.gif") no-repeat;
background-position:center center;
width="152";
height="35";
border="0";
}

結論から言うと、IEでは望み通りの動作はするのですが、NSですとバナーの表示がおかしいです。(1/3くらいしか表示されない)

で、実際のところHPビルダーを使いますと、エラー表示されます。
おそらく正しいタグの使い方をしていないのだと思います。

正しい文法でこのような動作をさせるにはどうしたらよいでしょうか??
といいますか、外部ファイル内のtd.tdlogoクラスでリンクすればいいと思うのですが、アンカータグって使えるのでしょうか?

外部ファイルでリンク先へ飛ばすにはどのように記述すればよいでしょうか?
それが出来た場合のhtmlの記述も教えて頂けると幸いです。

2   名前: 匿名希望 : 2005/12/19 11:41
aの中にtdを入れることはできません。
td内にスペーサーgifでも入れてリンク貼れば望み通りの動作をするんじゃないでしょうか?

3   名前: asuka : 2005/12/19 11:41
naka@sukiero様。

マルチの件すいません。
他方は終了ということにさせて頂きました。
申し訳ありませんでした。



匿名様。

レスありがとうございます。
動作するのでありかな?とか思ってましたが、なるほど、ありがとうございます。
出来れば記述の例を挙げていただければ幸いなのですが難しいでしょうか?
スペーサgifってのもがよく分からないので調べてはみます。


4   名前: asuka : 2005/12/19 11:41  [URL
分かりましたスペーサgif。

えと、実はURL載せていますが、右側ページの上方にある「変更」ボタンで、
スタイルシートを切り替えられる仕組みにしています。
つまり、固定のスペーサgifでは困るのです。

やるなら外部ファイルの中でやりたいのですが、要するにcss内でリンク先へ飛ばす記述が分からないのですが・・・



5   名前:  : 2005/12/19 11:41
いまどきspacer.gifという過去の遺物を使うメリットなど皆無。
IE3やNN4を相手にするならともかく、そうでないなら忘れた方が良い。

> width="152";
> height="35";
> border="0";

この記述はありえない。IEならこれでも解釈してしまうのだろうが。

> 要するにcss内でリンク先へ飛ばす記述

根本的にHTMLとCSSの役割を誤解なさっている気がする。

http://www.kanzaki.com/docs/htminfo.html
http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
http://members.jcom.home.ne.jp/pctips/Tondemo/

6   名前: asuka : 2005/12/19 11:41  [URL
^^;

一から勉強しなおせってことですかねぇ?

まあ、確かにそういわれても仕方がないのですが、
スペーサは僕もちょっと使う気はないです。

知りたいのは外部ファイルのcss内にロゴとそれをクリックした時にリンクさせる記述を知りたいのですけどね・・・
まあ、ロゴの表示の仕方はあってると思います。
後はリンクの仕方を知りたいのですが、そもそも出来ないってことですかね?
それならそれで、組み合わせの方法を教えて頂ければと思ったのですが・・・


7   名前: asuka : 2005/12/19 11:41  [URL
追伸。

あまりバカなことを書くと呆れられると思うのですが・・・

スタイルシートの切り替えを行っているので、切り替える度にロゴが変わります。
で、HTMLではロゴファイルを固定出来ない(切り替わる度にロゴを変えるので固定しない)ので、
外部ファイルのcssファイルにロゴの切り替えを委ねます。

で、問題はロゴをクリックしたら指定したURLに飛ぶ記述方法が解らないので教えて頂きたいのです。
おそらく、アンカータグを使ってHTML上に記載すると思うのですが、
匿名さんのおっしゃるとおりaの中にtdを入れることが出来ないので悩んでます。

全く違った方法でも構わないので、どなたか教えて頂けませんでしょうか?

8   名前: 通りすがり2 : 2005/12/19 11:41

td.tdlogo{background:transparent url("./b04_logo.gif") no-repeat;
background-position:center center;
width:152px; height:35px; border:0;}
.tdlogo a{ display: block; width:152px; height:35px; }

<TABLE>
<tr>
<td class="tdlogo"><a
href="http://blue-transparency.net/" target="_top"></a></td>
</tr>
</TABLE>

参考:http://www.tagindex.com/stylesheet/box/display.html

9   名前: asuka : 2005/12/19 11:41  [URL
あ、ありがとうございます!
助かりました。

テスト実施でうまくいったので反映させて頂きます。
ありがとうございます。

10   名前: asuka : 2005/12/19 11:41
ホントすいません。。。

もしか気が向いたら教えて下さい。

教えて頂いたソースですと、その、、、
cssの方ですが、左詰めからwidth:152px; height:35pxの範囲でアンカータグが有効になります。
つまり、本体(html)の方はalign="center"指定しているので真ん中指定した分、cssでの左詰めで差が生じてしまいます・・・

これは、うまく調整できるのでしょうか!?
もちろんcss側のaたタグ内でalign="center";指定が無意味なので困っている次第です。

11   名前: 通りすがり2 : 2005/12/19 11:41
td.tdlogo{background:transparent url("./b04_logo.gif") no-repeat;
background-position:center center;
height:35px; border:none; text-align:center;}
.tdlogo a{ display: block; width:152px; height:35px; margin:auto; }

12   名前: asuka : 2005/12/19 11:41  [URL
ありがとうございます。
m(__)m

見ず知らずなのに親切にして頂きまして助かりました。
ホントにありがたいです。

一覧へ戻る