• 締切済み

楽天のバナーを縦帯から横縦帯にする方法

楽天のバナー<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><div style="border:1px solid;margin:0px;padding:6px 0px;width:120px;text-align:center;float:left"><a href="***%3f_ex%3d64x64" alt="【SALE】MAX82%OFF!!税込10,500円以上ご購入で送料無料！CECIL..." border="0" style="margin:0px;padding:0px"></a><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px"><a href="***" target="_blank">【SALE】MAX82%OFF!!税込10,500円以上ご購入で送料無料！CECIL...</a><br><span style="">価格：2,940円（税込、送料別）</span><br></p></div></td></tr></table> 縦帯から横縦帯にする方法を教えてください。どこの場所を変更すれば縦帯から横縦帯にできるのか誰か教えてください。 よろしくお願いします。

  • CSS
  • 回答数1
  • ありがとう数2

みんなの回答

  • Doubt
  • ベストアンサー率70% (7/10)
回答No.1

ソースコードの編集で、横表示にする事は簡単ですが・・・ 希望の表示形態に改変して利用すると、「楽天アフィリエイト」では、 規約違反になりますのでご注意下さい。 下記楽天ページで確認出来ます。 ・知らないうちにやってませんか？「ルールを守って楽しくアフィリエイト！」 http://affiliate.rakuten.co.jp/guide/rule/ ・基本をしっかりチェックしよう！「楽天アフィリエイトのルール」 http://affiliate.rakuten.co.jp/guide/help/

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 左側に設置したバナーの縦の長さを小さくしたいです

    現在、無料cssテンプレートを使用して自社サイトを作成しています。 http://web-zen.sakura.ne.jp/index.html 左側のバナー関連が縦長になってしまい、しかし上司にはバナーの数を 減らす事はできないと言われ大変困っております。 そこで、バナーそのものの縦の長さを変更できないか質問してみます。 関係ありそうなcssのファイルの内容は、以下のとおりです。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ html { overflow-y:scroll; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; font-size:13px; color:#fff; background:#FFF; } br { letter-spacing:normal; } a { color:#d1d1d1; text-decoration:none; } a:hover { color:#666; } img { border:0; vertical-align:bottom; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ #top { width:780px; margin:0 auto; } #contents { float:left; width:780px; } #side { float:left; width:220px; background:#181818; padding:10px 0; } #main { float:right; width:540px; padding:10px 0; } #footer { width:540px; margin-left:240px; } /* ========SIDE CUSTOMIZE======== */ #side h1 { margin:0; font-size:24px; } #side h1 a { color:#fff; } #side h1 a:hover { color:#ddd; } #side div.section { margin:0 10px; } /* ========MENU CUSTOMIZE======== */ #menu ul { margin:0 auto; padding:10px 0; } #menu li { color:#333; text-align:center; list-style-type:none; } #menu li a { display:block; width:220px; color:#f1f1f1; line-height:60px; } #menu li a:hover { color:#f1f1f1; background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat; } /* ========MAIN CONTENTS CUSTOMIZE======== */ #main #pr p { margin:0; padding:5px 0; } #main #icatch { margin-bottom:10px; } #main a { color:#d1d1d1; } #main a:hover { color:#f1f1f1; text-decoration:underline; } #main h2 { margin-bottom:8px; padding:0 0 0 10px; font-size:15px; font-weight:bold; line-height:35px; border:1px solid #3e3e3e; background:#181818; } #main h3 { clear:both; margin:20px 0 8px 0; padding:0 0 0 5px; font-size:14px; border-left:5px solid #3e3e3e; } #main h4 { margin-bottom:2px; font-size:14px; border-bottom:2px solid #f1f1f1; } #main h5 { margin-bottom:2px; padding:2px 5px; font-size:13px; background:#3e3e3e; } #main h6 { margin-bottom:2px; font-size:13px; border-bottom:2px solid #3e3e3e; } #main p { margin:0 0 1em 0; } #main dt { margin-bottom:3px; } #main dd { padding:0; margin:0 0 0.5em 1em; padding:3px; color:#ddd; background:#181818; } /* INFORMATION CUSTOMIZE */ * html body #main dl.information dd div { display:inline-block; } #main dl.information dt { float:left; width:10em; margin:0; padding:0; color:#fff; } #main dl.information dd { margin:0 0 0.5em 10em; padding:0; color:#fff; background:transparent; } #main table { width:100%; border-collapse: collapse; } #main table th { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; background:#181818; } #main table td { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; } /* ========PAGETOP CUSTOMIZE========= */ #pageTop { padding:10px 0; text-align:right; font-size:11px; } #pageTop a{ padding:0 0 0 12px; background:url("../images/bg_pagetop.gif") 0 60% no-repeat; } /* ========FOOTMENU CUSTOMIZE======== */ #footMenu ul { margin:0; padding:10px 0 0 0; text-align:right; border-top:1px solid #b4b4b4; } #footMenu li { display:inline; margin:0 0 0 10px; list-style:none; } #footMenu li a { padding-left:10px; background: url("../images/bg_footmenu.gif") 0 50% no-repeat; } よろしくお願いします。

  • サイズ指定したテーブルを縦に並べるとセルがズレる

    色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容（テキストの長さ）によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000￥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。

    • 締切済み
    • CSS
  • バナーを横に並べたい

    バナーを横に並べたい 検索サイトのリンクバナーを横に並べたいのですが、そのまま貼り付けると 縦にばかり並んでしまいます。横に並べるにはどこを変更すればよいでしょうか。 <!-- e-shops 投票バナー　ここから --> <TABLE border="0" cellpadding="0" cellspacing="0" style="border: 2px #ffcccc outset; word-break:normal;"><TR><TD style="background-color:#ff9933; text-align : center;"><IMG src="http://img.e-shops.jp/vt/img211.gif" width="95" height="15" border="0" alt="手芸"></TD></TR><TR><TD style="background-color:#ff9933; text-align : center;" nowrap><A href="http://www.e-shops.jp/sh/rk188/html/" style="font-size : 11px; text-decoration : none;font-weight: normal;background-color:#ff9933; color: #ffffff; line-height:110%;" target="_blank">手芸</A></TD></TR></TABLE> <!-- e-shops 投票バナー　ここまで --> よろしくお願いします。

    • ベストアンサー
    • HTML
  • spanタグ　無視される

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <style type="text/css"> span.test{ padding: 6px 0px; background-color: gainsboro; text-align:center; border: 1px gray solid; margin-top:10px; margin-bottom:8px; color: gray; width: 100px; } </style> </head> <body> <span class="test"> <a href="#A"> A</a> </span> <br> <span class="test"> <a href="#B"> B</a> </span> </body> </html> ------------------------- というソースで spanタグで padding: margin-top:10px; margin-bottom:8px; width: が無視されてしまうのですが なぜでしょう？ 更に画像のように文字が重なってしまいます。 padding: margin-top:10px; margin-bottom:8px; width: これらを適用させるにはどうすればいいでしょうか？ AとBは隣同士に表示したいため、divではなく、spanを使用しました。

    • ベストアンサー
    • HTML
  • 横に並べたテーブル

    200×200px程度のテーブルを複数（行数や列数はバラバラです）横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css"> <!-- body{ color:#330000; background-color:#cc3333; } table.a{ background-color:#ffffff; padding:1px; border:1px solid #000000; display:inline; margin:5px; } td.a{ text-align:center; vertical-align:middle; border:1px solid #000000; font-size:small; padding:1px; background-color:#ffffff; } div.center{ text-align:center; } --> </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。 これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。 どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">&copy;＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main　p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • HTML　いじったらデザインが崩れました。

    ホームページ作成について。初心者です。大変困っています。 初心者ながらも空いた時間を使い、コツコツ作成してきたのですが、ある日なにをどういじったのかデザインがガラッと崩れてしまい、修復不能なまま１週間戦い続けましたがもう駄目です。どなたかお分かりになる方、どうかどうかご教授願います。 テーブルとテーブルの間に <p style="font-family: MS 明朝;font-size: 20pt">ＰＩＣＵＰ<span> / 注目商品</span></p></div>を入れたいのと、サブメニューがかなり下にずれこんでしまったので、上に戻したいです。 ＨＴＭＬ↓（文字数が多いので一部省略しています） <std{border: 1px botted #000000;} .uenashi td{border-top:0px;} .hidarinasi td{border-reft:0px;} {width:230px;height:230px} </style> <STYLE> TABLE.dotBorder { border-collapse: collapse; border-style: dotted frame: void magin-left: 100px; } TABLE.dotBorder TD{ width: 200px; height: 50px; border: 1px dimgray dotted; } </STYLE> <body> <div align="center"> <div id="field_spc"> <div id="logo_mono"> <img src="img/monochrom5.png" alt="monochrom" style="margin: 0; paddin:0;"> </div> <!-- トップ枠 --> <div id="top_waku"> <img src="img/bords.jpg" width="950" height="500" alt="モノクローム"> </div> <!-- メインコンテンツ --> <div id="main_spc"> <Table class="dotBorder"> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 1.新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 2.新商品</td> </tr> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 1新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 2新商品</td> <!-- サブコンテンツ --> <div id="sub_spc"> <img src="img/menu.png"> <div class="midashi"> <span class="big">ＭＥＮＵ</span> </div> <div class="column"> <a href="./index.html">1.トップページ</a><br> <span class="hutomoji">2.テーマ</span><br> <a href="./link.html">3.リンク</a> </div> どなたかお願いします・・・ ＣＳＳはこちらです↓ body { background-image: url(); margin-top: 0px; margin-bottom: 0px; margin-left: 0%; margin-right: 0%; padding: 0px; text-align: center; line-height: 150%; font-family: ＭＳ ゴシック,sans-serif; color: #333333; font-size: 14px; } #field_spc{ width: 1000px; margin: 0px 0px; background-image: url(img/.jpg); padding: 0px 10px; } #logo_mono { width: 70px; height: 70px; margin: 0; margin-bottom: 0; padding: 0; } #top_waku { width: 950px; line-height: 350px; margin-top: 0px; margin-bottom: 20px; border: 3px ridge #ffff00; background-color: #ffffff; padding: 0px 0px 0px 0px; text-align:; } #menu_block { margin-top: 10px; font-size: 25px; font-family: cursive; } #news_1 { margin-top: 40px; margin-left: 20px; text-align: left; } #main_spc { width: 40%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } #sub_spc { width: 22%; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; padding: 0px 0px; text-align: left; float: right; } #tb2 { width: 70%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } .fe { clear: both; } .ao_waku { background-color:gray; margin-top: 10; padding-bottom: 5; h2 { font-size: 18px; color: #ffffff; display: inline; } p { margin-top: 0px; } strong { font-size: larger; background-color: green; color: white; padding: 3px 5px; } .hutomoji { font-weight: 700; } .black { color: #000000; } .red { color: #ff0000; } .blue { color: #0000ff; } .gray { color: #808080; } .green { color: #008000; } .big { font-size: 18px; font-weight: 700; } .midashi { width: 90%; background-color: #dd9900; padding: 5px; border: 2px solid #dd9900; text-align: center; color: #ffffff; } .column { width: 90%; margin-bottom: 20px; background-color: #ffffff; padding: 5px; border: 2px solid #dd9900; text-align: left; line-height: 120%; color: #333333; } a:link { text-decoration: underline; color: #0000ff; } a:visited { text-decoration: underline; color: #0000ff; } a:hover { text-decoration: underline; position: relati

    • ベストアンサー
    • HTML
  • floatすると親要素より横にずれてしまいます

    #contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li>&nbsp;</li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li>&nbsp;</li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30">&nbsp;</td></tr></table></div> </div> </div> </body>

  • TABLE（表）を横に並べたいのですが

    こういった表↓（実際はもっと縦が長いです）をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか？可能なのでしょうか？ 宜しくお願い致します。 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr> <td style="border:1px solid #ffcccc" colspan="3">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr></tbody></table>

    • ベストアンサー
    • HTML
  • テーブルの中にiframe

    テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する