• 締切済み

CSS リンクに画像を使用したいのですが…

Dreamweaver CS3を使用してホームページを作っています。 スタイルシートを利用しているのですが、 リンク文字の前には画像を使用したいと思っています。 現在は画像を繰り返しなしで左上配置の背景にしているのですが、 長い文章で改行が入るとし下のようになってしまいます。 ----------------------- ★リンク リンク リンク リンク リンク リンク ----------------------- ↓（こうしたい） ----------------------- ★リンク リンク リンク 　 リンク リンク リンク ----------------------- リストでマークに画像を使用するのも試してみたのですが、 同じ結果になってしまいました。 下記にソースを表示いたしますので、 どう変更すればいいのか教えて下さい。 よろしくお願いいたします。 ソース --------------------------------------------------- #main a{ text-decoration: underline; line-height: 150%; background: url(imgs/icon1.gif) no-repeat left top; padding-left: 17px; } #main a:hover { text-decoration: underline; color: #f54589; } --------------------------------------------------- <div class="main"> <p><a href="#">リンク リンク リンク リンク</a></p> <p><a href="#">リンク リンク リンク リンク<br /> リンク リンク リンク リンク</a></p> <p><a href="#">リンク リンク リンク リンク</a></p> <p><a href="#">リンク リンク リンク リンク<br /> リンク リンク リンク リンク</a></p> <p><a href="#">リンク リンク リンク リンク</a></p> <p><a href="#">リンク リンク リンク リンク</a></p> </div> ---------------------------------------------------

みんなの回答

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

pの方にpaddingじゃない？ どうしてもaってならmarginのような気もするし…というかそもそもaはinlineだし・・・

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • 画像の横にリンクボタンを置きたいんですが

    画像の横にリンクボタンを置きたいんですが <img align=left src="m38.jpg><br> <A HREF="right.html" STYLE="text-decoration:none;color:006633;">在りし日1</A> <br> <br> <A HREF="right1.html" STYLE="text-decoration:none;color:006633;">在りし日2</A> <br> <br> <br clear="all"><br> とやってみましたがうまくいきません。画像がでてきません。どうしたらよいでしょうか？

    • ベストアンサー
    • HTML
  • HTMLの質問です。画像を並べて名称を表記します。

    ホームページビルダーで作成しました。 今回の例では画像を横4枚、縦2段に並べて画像下にテキストを表記します。 各画像にはリンクを貼っています。 ところが画像下のテキストの右端だけがダブって表記されます。 具体的にはタイトル4とタイトル8というテキストです。 問題点が分かる方はご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="hpb9tm04_8.css" id="hpb9tm04_8" a:link { 　　　　　　text-decoration:underline; 　　　　　　color:#0000FF; 　　　　　　} 　　　　　　a:visited { 　　　　　　text-decoration:underline; 　　　　　　color:#9900CC; 　　　　　　} 　　　　　　a:active { 　　　　　　text-decoration:underline; 　　　　　　color:#00FF00; 　　　　　　} 　　　　　　a:hover { 　　　　　　text-decoration:underline; 　　　　　　color:#00FF00; 　　　　　　position:relative;top:3px;left:3px; 　　　　　　}</style> </head> <body style="color: #000000; background-color: #ffffff" background="壁紙画像"> <div> <table class="hpb-main" id="HPB_LAYOUTTABLE_05" cellspacing="0" cellpadding="0" width="760" border="0"> <tbody> <tr> <td class="hpb-cnt-cell1" id="HPB_LAYOUT_LMH0" valign="top" align="center" height="18"> <table class="hpb-hmenu1" id="HPB_LINK_MENU_TABLE_01" cellspacing="0" cellpadding="0" align="center" border="0"> </table> </td> </tr> <tr> <td class="hpb-cnt-cell3-x" valign="top" align="center"><div style="float:left"><img height="43" alt="ホームページのタイトル" width="232" border="0" src="ホームページのタイトル画像" />&nbsp; <table class="hpb-lb-tb1" cellspacing="0" cellpadding="0" align="center" border="0"> <tbody> <tr> <td class="hpb-lb-tb1-cell3" id="HPB_LAYOUT_CONTENTS" valign="top" height="400"> <p><div style="float:left"><img height="37" alt="ホームページのサブタイトル" width="510" border="0" src="ホームページのサブタイトル画像" /></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル1" width="140" border="0" src="画像" /><br />タイトル1</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル2" width="140" border="0" src="画像" /><br />タイトル2</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル3" width="140" border="0" src="画像" /><br />タイトル3</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル4" width="140" border="0" src="画像" /><br />タイトル4</div></a> <div style="clear:both"></div></p> <p> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル5" width="140" border="0" src="画像" /><br />タイトル5</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル6" width="140" border="0" src="画像" /><br />タイトル6</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル7" width="140" border="0" src="画像" /><br />タイトル7</div></a> <a target="_blank" rel="nofollow" リンク先URL"><div style="float:left"><img height="210" alt="タイトル8" width="140" border="0" src="画像" /><br />タイトル8</div></a> <div style="clear:both"></div></p> <p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか？ よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • CSSでリンクの表示をテキストと画像で変えたい

    CSSを使って、 ・テキストのリンクのときは、 a:link　で　常に点線のアンダーラインを表示 a:hover　で　マウスを重ねたとき色を変える ・画像のリンクのときは、 　アンダーラインをださない 　a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • IEでCSSのアンカー色指定が反映しない

    <style type="text/css"> a:visited { color:blue;} div.testB { padding-left:12px; clear:both; } div.testB a{ color:#000000; text-decoration:none; font-weight:bold; } div.testB a:hover{ color: #cc0000; font-weight:bold; text-decoration:underline; } </style> <div class="testB"> <div><a href="#">リンク</a></div> </div> このようなソースで、FireFoxでは理想どおり表示されるのですが、IEではtestBで指定したリンク色が反映されず、先のa:visited{}のカラーでボールドだけ効いた状態になってしまいます。hoverしても色は変わらずです。visitedの指定がなければ、きちんと反映されるようなのですが… 解決策ありますでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • divでくくった中の要素にa link

    以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。

    • ベストアンサー
    • HTML
  • CSSで2つのリンクで画像ロールオーバー

    CSSで画像ロールオーバーのような事を実現しようとしています。 【画像】　　テキストリンク1、テキストリンク2 【画像2】　　テキストリンク3、テキストリンク4　以下同様に テキストリンク1、テキストリンク2のどちらにマウスオンした時も【画像】を変化するようにしたいです。リンク1とリンク2のリンクURLは異なるものですが、画像の変化は同一です。 （これと同様な画像とリンクのセットを、ページ内にいくつも作ることを考えています。） はじめは、以下のようにテキストリンク1にマウスオーバー→1枚の画像を左右に移動させて画像を変化させましたが、リンクが2つになるとうまく動作しなくなりました。 a タグではなく、画像にclassやidをふらないといけないのでは？と考え、いろいろ試してみましたが、うまく動作しません。 何か良い方法はありませんでしょうか？この方法では実現しないでしょうか？ ＜CSS部分＞ a .gazoumenu { background: url(gazou.gif) left top no-repeat; display: block; width: 20px; height: 20px; padding-right: 25px } a .gazoumenu :hover { background-position: right top; } ＜HTML＞ <p><a href="xxx.html" class="gazoumenu">テキストリンク1</a></p> よろしくお願い致します。

    • ベストアンサー
    • CSS
  • CSS ある場所だけリンク時に下線表示

    タイトルの通りなのですが、ページ全体ではなく 特定の場所のテキストリンクにオンマウスしたら 下線が表示されるようにしたいんです。 スタイルシートの書き方にとまどっており、 <div style="～"> で始めて </div> で閉じ、 a:link {color: #ffffff; text-decoration: none} a:hover {color: #ffffff; text-decoration: underline} を使うところまではわかるのですが…。 どなたか正しい記述を教えていただけないでしょうか？

  • CSSによるレイアウトが崩れてしまう現象について

    Adobe Dreamweaver CS4にて、ヘッダー、TOPメニュー、SIDEメニュー、コンテンツ、フッターというよくある構成でHPを作成しております。 レイアウトを組んでみたところ、Firefox4ではキチンと表示してくれるのですが、Internet Explorer6では、左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまうという現象となってレイアウトが崩れてしまいます。 もうひとつ、右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 この2つ原因がわからずに困っております。 お教えいただけませんでしょうか。よろしくお願い致します。 <body> <div id="page"> <!---ヘッダーここから-------------> <div id="header"> <div id="header_title"></div> <div id="header_info">TOPコメント…</div> </div> <!---ヘッダーここまで-------------> <!---TOPメニューここから----------> <div id="topmenu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> <!---TOPメニューここまで----------> <!---左メニューここから----------> <div id="left"> <div id="leftmenu"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> </div> <!---左メニューここまで----------> <!---メインここから--------------> <div id="main"> <div id="midashi"> <h2>CONTACTS</h2> </div> <div id="contents"> <p>&nbsp;</p> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 <br /> <br /> </p> <table width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0"> <tr> <th bgcolor="#FFFFDF"> <p><span class="tx12pt_ore">サンプルテキスト。</span><br /> </p> <ul> <li>・サンプルテキスト</li> <li>・サンプルテキスト</li> <li>・サンプルテキスト<br /> </li> </ul></th> </tr> </table><br /> <br /> <span class="tx12pt_ore">【サンプルテキスト】</span><br /> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <br /> <span class="txtright">株式会社●●</span> </div> <!---ページトップここから------------> <div id="pagetop_back"> <a href="#top"> <img src="../all_img/mpage-top.gif" alt="ページトップへ" width="100" height="20" border="0" /> </a> </div> <!---ページトップここまで------------> </div> <!---フッターここから------------> <div id="footer"> <div id="copyright"> <h3>このページは、株式会社●●　が運営しています。<br /> Copyright(c) ～～～～Ltd Institute. All Rights Reserved. </h3> </div> <ul> <li><a href="#">サンプルメニュー1</a></li> <li><a href="#">サンプルメニュー2</a></li> <li><a href="#">サンプルメニュー3</a></li> </ul> </div> </div> <!---フッターここまで------------> </div> </body> ≪CSS≫ #page { width: 780px; margin-right: auto; margin-left: auto; background-image: url(all_img/page.gif); } #header { width: 740px; height: 80px; margin-right: auto; margin-left: auto; background-image: url(all_img/header.gif); } #topmenu { width: 740px; height: 40px; margin-right: auto; margin-left: auto; background-image: url(all_img/topmenuber.gif); background-repeat: no-repeat; } #left { width: 178px; height: 1300px; float: left; margin-left: 20px; background-image: url(all_img/sideback.gif); background-repeat: repeat; } #main { float: right; height: auto; padding: 0; background-color: #FFF; width: 560px; margin-top: 20px; margin-right: 20px; } #contents { width: 500px; height: auto; margin-left: 30px; } #contents .txtright { color: #033; text-align: right; } #footer { width: 740px; height: 80px; clear: both; margin-left: auto; margin-top: 0px; margin-right: auto; }

    • 締切済み
    • CSS
  • 外部CSSでリンクカラー指定

    外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか？ その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか？ またそのようにする方法があれば教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する