- 締切済み
CSS:a imgのリンクの枠を消したい
http://okwave.jp/qa/q3061773.html ↑この質問と同じなのですが、解決方法が分からなかったので質問させてください。 a,a hover で指定してある枠の色が a imgにも出来てしまい困っています。 a img{ border:none; } と設定していますが、だめです。 それと、この箇所は <div class="thumb"> <table border="0"> <tr> <td class="v3"> <a onclick="btp01.src='img/001.jpg'" ondblclick="btp01.src='img/001.jpg'" style="cursor:pointer"> <img src="img/bt_1-s.jpg" class="photo_s" alt="" width="85" height="85" /></a> </td> </tr> </table> </div> というHTMLの記述なのですが、画像の右側に設定していない余白が出来てしまいます。 どうしたら良いでしょうか。
- みんなの回答 (6)
- 専門家の回答
関連するQ&A
- <img>タグにCSSのclass設定可能?
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか? 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1: ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します(ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。)。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか?できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか? 質問2: また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか? よろしくお願いします。
- ベストアンサー
- HTML
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルタグ表示が上手くいかない(html・CSS
下のタグを使うと、ブログに下記画像上部のように表示されているのですが 理想としては画像の下部分のように綺麗に表示したいです。 自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい ムキー!っとなってます。 大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。 何卒お願いします。 画像内のピンクの部分は実際には<img src="で指定された画像になります。 使ったタグ <table border="1"> <td><table id="table-03"> <colgroup> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV>
- ベストアンサー
- ブログ
- 助けてください><IE上で1pxのズレ
こんにちわ。 組んだテーブルに謎の1pxがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします>< <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width:100 height:100 border:2 } としたのですが、うまくいきません。なぜでしょうか?
- ベストアンサー
- HTML
- table内の画像を中央寄せ、のせると拡大、方法?
画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ~~~ HTML ~~~ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ~~~ CSS ~~~ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }
- ベストアンサー
- HTML
- HP作成html/<div>,<a>,<img>
こんばんは 僕はホームページを作っています 画像と文字のリンクにマウスを乗せたときに、そこの周りの色が長方形の形で反転ようにしたいのですが、 スタイルシートに div.aaa {width:100;height:100%} a.bbb:hover {color:white;backgrund-color:black} と入れて、 HTMLに、 <table><tr><td><a href="リンク先" class="bbb"><div class="aaa"><img src="画像の場所">文字</div></a></table></tr></td> って入力してIEで開くと、色の反転はちゃんとなるんですが、 リンクを開こうとして画像の上をクリックしても反応がありません。 周りの字や、画像の周りの隙間などをクリックしたら、ちゃんとリンク先が開けました。しかし、画像の上でも、[右クリック→リンクを開く]とすれば、リンク先が出てきました。どうしてなのでしょうか??? 説明下手で長くてすいませんがアドバイスよろしくお願いします
- 締切済み
- その他(インターネット・Webサービス)
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト(waku)と、テーブルの幅を可変(パーセント表示)にしないと、画像の伸縮は難しいのでしょうか。 **** HTML部分(CSSは外部) ***** <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> **** style.css(CSS部分) ***** #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- webbrowserでクリック(リンク)させたいのですが・・・
Webbrowserを使用して、IEを動かしたいです。 下のようなページで”いいいい”(一番下)をリンクさせたいのですがうまくいきません。 どこが悪いのか教えて頂けないでしょうか? ※投稿文字数に制限があり大幅に削除しました。これで分かるでしょうか? <td align="right"> <a href="/bsite/member/menu.do">トップ</a> <b><font color="#999999">│</font></b> <a href="/bsite/member/logout.do">ログアウト</a> <a href="/bsite/price/search.do" class="wlink"><div style="margin:2 0 1 0;">紹介</div></a> <a href="/bsite/member/portfolio/registeredStockList.do" class="wlink"><div style="margin:2 0 1 0;">名前</div></a> <a href="/bsite/member/acc/menu.do" class="wlink"><div style="margin:2 0 1 0;">甲</div></a> <a href="/bsite/market/menu.do" class="wlink"><div style="margin:2 0 1 0;">情</div></a> <div class="titletext">報</div> <!--▼xxxxー--> <table border="0"> <tr valign="top"> <td><b>1111 てつ</b></td> <form action="/bsite/member/portfolio/stockDetail.do" method="POST"> <input type="hidden" name="product_code" value="1111"><input type="submit" value="のぼる"> <form action="/bsite/price/stockDetail.do" method="POST"> <input type="hidden" name="atime" value="1225641591930"> <input type="hidden" name="ipm_product_code" value="0000"> <input type="hidden" name="market" value="TKY"> た* <a href="/bsite/price/stockDetail.do?ipm_product_code=5423&market=JNX">PTS</a> <input type="submit" value="あたらしい"> </table> <!--▲登ー--> <table border="0"> <tr valign="top"> <td nowrap><font class="ltext"></td> </tr> </table> <table border="0" "> <tr bgcolor="#b7b7b7">></td></tr> <tr valign="top"> <td nowrap bgcolor=" <td nowrap align=" <tr bgcolor="#b7b7b7"><td colspan="4"><img src="/bsite/img/trans.gif" width="1" height="1" alt=""></td></tr> </table> <br> <!--▼き--> <table <tr><td bgcolor= <table <tr><td <table "> <tr align="center"> <td 奇数</td> </tr> </table> </table> </td></tr> </table> <br> <!--参考--> <!-- kim --> <table > <tr><td > <table > </table> </td></tr> </table> <br> <!--▲き--> <table border=> <td bgcolor="#eeeeee"> <a href="/bsite/price/marginDetail.do?ipm_product_code=5423&market=TKY" class="wlink">情</a> </td> </tr> </table> <table "></table> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <a href="/bsite/member/stock/buyOrderEntry.do?ipm_product_code=5423" class="wlink">現か</a> </td> <td width="1%"><img src="/bsite/img/trans.gif" width="1" height="1" border="0"></td> <td width="49%" bgcolor="#DEECFA"> <a href="/bsite/member/stock/sellOrderEntry.do?ipm_product_code=5423" class="wlink">なかう</a> </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:4px;"> <tr align="center"> <td width="30%" bgcolor="#FFE6D7"> <a href="/bsite/member/margin/buyOrderEntry.do?ipm_product_code=5423" class="wlink">いいいい</a> </td> 自分の考えでは↓なのですが・・・ どなたか教えてください。宜しくお願い致します。 kchk2 = UserForm3.web1.Document.Links(10).innerText If kchk2 <> "いいいい" Then MsgBox "ハイパーリンク「いいいい」の選択に失敗しました。" Exit Sub End If enchk = 0 UserForm3.web1.Document.Links(10).Click
- 締切済み
- その他(プログラミング・開発)
お礼
style="cursor:pointer; border:none;" これでもダメでした。。 重症ですよね。。 何度も親切にありがとうございました。 他の方法考えてみます。