- ベストアンサー
tableタグに右に回り込みの位置
tableタグに右に回り込みを入れたのですが<table align="left"> CSSのでtable全体と回り込みをした文字を上の方に移動させたいのですが これが回り込みをした文字しか移動しなくて困っています。 <div style="position:relative; bottom:20px"> <table border=1 align="left"> <tr> <td>表の内容</td> </tr> </table> 回り込み </div> が例えなのですが、何か打開策など御座いませんか？
- golz
- お礼率56% (13/23)
- ホームページ作成ソフト
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こうかな？ <body style="margin:0;padding:0;"> <div style="margin-top:10px;margin-left:10px;"> <div style="float:left"> <table border="1"> <tr> <td>表の内容</td> </tr> </table> </div> 回り込み </div> <div style="clear:both;margin-top:50px;margin-left:10px;"> 次のブロック </div> </body>
その他の回答 (1)
bodyの 0 0 にしておくと計算がしやすいというだけです ＞margin-top:-10px 上の隙間を調整するのなら <div style="margin-top:10px;margin-left:10px;"> ここをいじった方が分かりやすいと思います positionはややこしいので・・・
関連するQ&A
- HTMLのどこを削除すれば罫線が消えますか？
添付画像の【ドリッパー＆リッド付きルシード・ドリップ・イン・マグ】の文字の下の罫線を削除したいのですが、HTMLのどこを削除すれば罫線が消えますか？ 教えて下さい。 <table width="700" cellspacing="0" cellpadding="5" style="font-size:10pt;"><tr> <td width="47" align="left" style="border-bottom:#666666 1px solid;"> <div align="left"></div></td> <td width="6" align="left" style="border-bottom:#666666 1px solid;"></div></td> <td width="601" style="border-bottom:#666666 1px solid;"><div align="left"><b>ドリッパー＆リッド付きルシード・ドリップ・イン・マグ</b></div></td> </tr> </table> <table width="700" border="0" cellspacing="0" cellpadding="10"> <tr> <td align="center"><img src="http://image.co.jp/deco/cabinet/item/04751544/imgrc0065803424.jpg" ></td> </tr> </table>
- ベストアンサー
- デザイナー・クリエイティブ職
- tableの位置の設定＆既定文字を隠す
HTML＆CSS初心者です。 既定文字を消せないので、同じ色のtableを作成し、上に重ねて隠そうと思ったのですが、既定文字の位置にtableを移動すると、他に指定して動かしている既定の下部のtableが崩れます。 修正箇所、または違う方法があればアドバイスよろしくお願いします。 <table style="position:relative; margin-top:-1910px; margin-left:-2px;"> <table width="200" border="0" cellspacing="1" cellpadding="1"> <tr><td> <font style="background:ffffff"> <font size="3" color="0000ff">こんにちは</font></font><br /> </td></tr> </table> </table>
- ベストアンサー
- HTML
- ＩＥでテーブル内のテキストが勝手に改行されます。
個人でサイトを運営しているのですが、 外部ＣＳＳをテーブルに適用するとＩＥとＦｉｒｅｆoxで表示が変わってしまい 困っています。問題は下記です。 テーブルに指定するＣＳＳは以下のようなものです。 table.1{ border-top:1px solid #666666 ; border-left:1px solid #666666 ; border-collapse:collapse; border-spacing:0; background-color:#ffffff; empty-cells:show; text-align:left; font-size: 10pt; padding:3px; } .1 th{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; color:#330000; background-color:#996633; padding:0.1em 0.1em; text-align:center; } .1 td{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; padding:8px 8px 8px 8px; line-height: 120%; } そして本文のＨＴＭＬです。 <table width="166" border="0" class="1"> <tr> <td colspan="2"><div align="center">テキストテキスト</div></td> </tr> <tr> <td>イメージ写真</td> <td>イメージ写真</td> </tr> <tr> <td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> <td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> </tr> </table> 以上のようなものです。 このようにするとＦｉｒｅｆｏｘではきちんと表示されるのですが、 ＩＥだとテキストの部分が４文字ほどで勝手に改行されてしまい、 かなり縦長のテーブルになってしまいます。 試行錯誤してみたのですが、全然できなくて本当に困っています。 もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。
- ベストアンサー
- HTML
- tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- <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
- レイアウトの崩れについて
先日から初めてHP作りに挑戦しているのですが、<div>の中の<table>の位置がおかしい（tableの位置がdivの下のほうに突き抜けて表示される）ので困っています。 どうすればdivの中にtableがおさまるでしょうか。 (XHTML) <div id="main"> <div class="contents"> <table> <tr> <td id="tdl" rowspan="4">>映像</td> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> </table> </div> </div> <div id="sub"> 内容 </div> (CSS) #main { width: 600px; float: left; } .contents { width: 600px; height: 155px; background-color: #f5f5dc; font-size: 16px; float: left; } table { width: 590px; height: 150px; border-collapse: collapse; table-layout: fixed; border: solid; border-color: #f1f1f1; } th { width: 100px; height: 32px; border-bottom: solid; border-bottom: thin dotted; background-color: #f1f1f1; font-size: 16px; text-align: left; } #tdl { width: 160px; height: 145px; border: none; } td { width: 320px; height: 32px; border-bottom: thin dotted; font-size: 16px; text-align: left; } #sub { width: 150px; height: 145px; background-color: #999; float: right; } 関係あるか分かりませんが、サイト全体の幅は770pxです。 書き方がめちゃくちゃだと思うので、おかしなところも指摘していただけると幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- テーブル内に隙間が。
テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 （html/cssの書き直さなくてはならない箇所はどこでしょうか） 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>
- ベストアンサー
- ホームページ作成ソフト
- borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？ 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
- 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
お礼
ありがとうございます。 margin-top:-10pxにしたら出来ました。 あと少し質問ですが、 bodyにmargin:0;padding:0;となっていますが、初期化した方が良いのでしょうか。 それと、私はpositionで位置を決めていますが、marginで位置を決めた方が良いのでしょうか。 それほど詳しくないので、位置を決めるときはどちらが向いているか判らないので教えてください。