左側に複数の縦バナーを並べたい

YAHOOのストアに縦バナーを配置したいと考えています。
一つの縦バナーをrepeatさせてリンクをはるサンプルコードは確認出来て動作も確認できたのですが、
今回左側に３種類の違う縦バナーを貼り付けリンクもはりたいと思っています。

しかしうまくいきません。１枚目のバナーを貼り付けまでうまくいったのですが、リンクがバナー枠以外の所にも貼られているようです。

どのようにしたらうまくいきますでしょうか？

ソース下記になります。
<ul>
<li style="background-color:transparent;background-image:url(https://shopping.geocities.jp/xxx/img/sidenavi/x … left;background-attachment:scroll;height:450px;top:110px;z-index:auto;left:0px;position:absolute;width:120px;min-height:100%;visibility:visible;display:block;">
<a href="https://store.shopping.yahoo.co.jp/xxx/xxx.html" style="display:block;min-height:100%;width:120px;visibility:visible;height:450px;text-indent:-9999px;"></a>
</li>

No.4 回答者： t_fumiaki 回答日時： 2017/02/08 15:17

はいはい。

これはyahoo!トリプルの仕組み内で動くから、大元のCSSから修正しないと出来ません。
だからbodyのbackgroundでやってるんですね。

縦バナー3本並べたら、左の本体画面のレイアウトも変更する必要があるので、簡単には行きません。

大元を直したら、他の人にも影響が出るので先ず無理です。

独自のhtml画面なら簡単なんですけどネ。

この回答へのお礼

簡単にはいきませんか・・・

最後までお付き合い頂きありがとうございました。

お礼日時：2017/02/08 15:33

No.3 回答者： t_fumiaki 回答日時： 2017/02/08 14:43

>>ブラウザーの端にくっつくタイプの縦バナーの展開

良く意味が解りません。

marginやpaddingで空けるとか、div内に入れるとか、tableの要素に入れるとか、方法は色々有ります。

何をどうしたいのか、イメージ図で例示しないと、誰も答えられません。

この回答へのお礼

下記のURLに説明があるイメージの縦バナーです。
http://ヤフーショッピング出店.com/yahoo-shopping-design/yahoo-design05.html

お礼日時：2017/02/08 14:45

No.2 回答者： t_fumiaki 回答日時： 2017/02/08 13:41

<a タグのアンカーをimgタグにし、

imgタグをcssで修飾して左floatとする。以下は例


1列目
<a href="http://ヤフーショッピング出店.com・・">
<img class="left" src="https://shopping・・・" /></a>

2列目
<a href="http://ヤフーショッピング出店.com・・">
<img class="left" src="https://shopping・・・" /></a>

3列目
<a href="http://ヤフーショッピング出店.com・・">
<img class="left" src="https://shopping・・・" /></a>

●css
.left{float:left; margin-left:10px;}

この回答へのお礼

例と回答ありがとうございます。

floatだと、ブラウザーの端にくっつくタイプの縦バナーの展開は難しいと思っています。

お礼日時：2017/02/08 14:08

No.1 回答者： t_fumiaki 回答日時： 2017/02/08 12:59

どれがバナー？

何故background？？？
<a　タグにアンカーも無いし？？？？

下のやり方ジャ駄目なの？

1列目
<a href="https://store.shopping.yahoo.co.jp/xxx/xxx.html" … class="left" src="https://shopping.geocities.jp/xxx/img/sidenavi/x …" /></a>

2列目
<a href="https://store.shopping.yahoo.co.jp/xxx/xxx.html" … class="left" ssrc="https://shopping.geocities.jp/xxx/img/sidenavi/x …" /></a>

3列目
<a href="https://store.shopping.yahoo.co.jp/xxx/xxx.html" … class="left" ssrc="https://shopping.geocities.jp/xxx/img/sidenavi/x …" /></a>

css
.left{float:left; margin-left:10px;}

この回答へのお礼

回答ありがとうございます。
下記にあるような縦バナーを作成しようとしています。

３枚違うバナーを並べてリンクを貼りたいと考えています。

http://ヤフーショッピング出店.com/yahoo-shopping-design/yahoo-design05.html

お礼日時：2017/02/08 13:04