テキストリンクの横に画像アイコン・・・。

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



0   名前: あまるた : 2007/01/14(日) 06:57  ID:FUlO79v0
テキストリンク横にテキストリンクより若干小さな画像リンクアイコンを並べたいと思っております。


<p><a href="">あいうえお</a>&nbsp;<a href=""><img src="" /></a></p>


上記imgには(width,height,border,alt)を全て入力し、テキストリンクよりサイズが小さくなっております。
ところがテキストリンクの隣に並べてある画像がどうしても上部によってしまいます。画像下部に若干隙間が出来てしまうのです。

画像をテキストリンクの底辺にあわせて並べるにはどうしたら良いのでしょうか?ご教授お願い致します。

1   名前: あまるた : 2007/01/14(日) 06:57  ID:FUlO79v0
すいません。追記です。

padding や margin で微調整する以外の方法があればお願いします。。

2   名前: くいん : 2007/01/14(日) 06:57  ID:rbRHv8MX
http://www.tagindex.com/stylesheet/img/vertical_align.html

画像を文字にあわせるのではなく、文字を画像に合わせる方法ですが。
解決しない場合には条件をまた追記してくださったほうが良いかもです。

3   名前: あまるた : 2007/01/14(日) 06:57  ID:FUlO79v0
>くいんさん

コメントありがとう御座います。ご指導頂いた上記リンク先の方法ですと、画像の左側にテキストリンクがある場合どうすれば良いのでしょうか?(汗)右側じゃないのが今回悩んでいるところです。。

4   名前: K+S : 2007/01/14(日) 06:57  ID:nROqylMa
>>3

>>2 で提示された方法では実現しませんでしたか?
記述してみたソースを示せば指摘できるのですが。

5   名前: あまるた : 2007/01/14(日) 06:57  ID:FUlO79v0
>K+Sさん

<p>http://***.***.**1/&nbsp;-&nbsp;2007年**月**日&nbsp;<a href="http://***.***.**2/"><img src="./img/a.gif" /></a>&nbsp;<a href="http://***.***.**3/"><img src="./img/b.gif" /></a></p>

上記の様なソースになっています。

http://***.***.**1 2007年**月**日 (画像リンクa.gif)(画像リンクb.gif)

のように並べたいのです。が、(画像リンクa&b.gif)共にテキストと並べると上部に表示されてしまい、画像の下に隙間が出来て見栄えのバランスが悪いのです。ちなみに各テキストより画像は小さいです。

この掲示板で言う所の「target_blank」のアイコンみたいな感じです。そのアイコンをテキストの底辺にぴったりとあわせたいというわけです。言葉足りないかもですが分かりますでしょうか。。

6   名前: くいん : 2007/01/14(日) 06:57  ID:rbRHv8MX
ちょっと私の理解力が足りなくてよくわかっていないのですが…

>>2にある新規ウィンドウで開くアイコンを、もっととなりの文字列とぴったりきっちり1px分の隙間もない状態で揃えたい、という意味でしょうか?


7   名前: あまるた : 2007/01/14(日) 06:57  ID:FUlO79v0
>くいんさん

またまたコメントありがとう御座います。少し私の表現が下手糞なんだと思います。
>>2の新規ウィンドウで開くアイコンの下のラインと、テキストリンクの下のラインを、あわせたい感じです。

少し変な例ですが、
<table width="100" height="100"><tr><td valign="bottom">あいうえお+画像</td></tr></table>
だとテキストと画像が<table>内で下によると思うんです。それを<p>で行単位に行いたい感じなんです。
何故か画像だけ行単位で上によってしまうんです。。

8   名前: くいん : 2007/01/14(日) 06:57  ID:rbRHv8MX
>>7
理解しましたー。

それでしたらなおのことこちらはお試しになりましたか?
折角ですので、どのようになるか色々お試し頂いたほうがのちのちの為になるかもしれません。
注意点や関連ページなども掲載されていますので。
http://www.tagindex.com/stylesheet/img/vertical_align.html

そして
>>4でK+Sさんが仰られたように「試してみた」ソースを提示して
ここがこういう風にならない!と、質問して頂けると
また違ったアドバイスが他の方からももらえると思います。

9   名前: 品川 : 2007/01/14(日) 06:57  ID:g0xvWYQd
この質問どっかで見たな。

10   名前: あまるた : 2007/01/14(日) 06:57  ID:FUlO79v0
>くいんさん
細かくご指導頂きいて本当にありがとう御座いました。
何か自分で勝手に勘違いしていたのと、他のスタイルが重なっていてずれていたのもあったようです。。
仰る通り取り合えず試しまくりぴったりと設置できました(汗)左も右も関係ないんですねm(_ _;)m

一覧へ戻る