- ベストアンサー
パソコンで見るとレイアウトが崩れる
- web初心者のため、width800px, height700pxのDiv内に文字を入力して簡易のホームページを作成しました。
- しかし、1024px×768pxの2台のPCで比べると一方では正しく表示されますが、もう一方では文章が切れて表示されない状態です。
- 両方のPCで使用しているブラウザはfirefoxで、表示のズームもリセットしていますが、原因がわかりません。また、他の人に聞いたところ、tableタグの使用は避けるべきと言われましたが、その理由も分かりません。お教えください。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- レイアウトの崩れについて
先日から初めて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だけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- HTML
- tableでレイアウトが崩れる場合
技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>
- ベストアンサー
- HTML
- ウインドウサイズを小さくしてもレイアウトが乱れないようにする方法
下のHTMLとCSSに、何を追加すればウインドウサイズを変更しても、レイアウトが乱れないようにすることができるでしょうか？ div { float: left } div.Kukaku1 { background-color:blue; width: 900px; height: 150px; } div.Kukaku2_1 { background-color:green; width: 300px; height: 25px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 25px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 25px } div.Kukaku3_1 { background-color: black; width: 250px; height: 200px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 50px } div.Kukaku4_Ga { width: 450px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 450px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 450px; height: 70px } div.Kukaku4_3 { background-color: red; width: 450px; height: 150px } <div class="Kukaku1"></div> <div class="Kukaku2_1"></div> <div class="Kukaku2_2"></div> <div class="Kukaku2_3"></div> <div class="Kukaku3_1"></div> <div class="Kukaku3_2"></div> <div class="Kukaku3_3"></div> <div class="Kukaku4_Ga"> <div class="Kukaku4_1"></div> <div class="Kukaku4_2"></div> </div> <div class="Kukaku4_3"></div> 回答よろしくお願いします。
- ベストアンサー
- HTML
- CSS：区画のレイアウト1
現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図（CSSによる区画のレイアウト）のようなレイアウトにしたいのですが、Kukaku4_3（class名、色：red）のところで画面のあるとおり、Kukaku4_2（class名、色：navy）から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図（CSSによる区画のレイアウト）のようにするにはどうすればよいでしょうか？ 回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }
- ベストアンサー
- HTML
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- 【WEBデザイン】CSSによるレイアウトについて
初心者です。 添付「図sample-chrome1」の表示にて、「領域b-x」「領域b-y」内の文字位置を、それぞれ縦の中心に配置したいと思っています。 また、先ほどの図はブラウザ「Chrome」での表示ですが、ブラウザ「InternetEexplorer」では添付「図sample-ie」のように「領域b-*」の表示が異なってしまいます。 この２つの問題を解決するためのお知恵をお貸しいただければと思っています。 因みに、添付「図sample-chrome2」のように、「領域a」の行数は可変となり、「領域b-*」の高さもそれに合わせて上下半分ずつで可変としたいと思っています。 また、境界線に「border:inset」を使用して図のように表示させたく、＜table＞タグでの境界線では思うようにいかず、使用を断念した経緯があります。 尚、ソースコードは下記の通りとなります。 <html> <head> <style type="text/css"> #tbl{ display:table; width:300px; font-size:small; } #a { display:table-cell; vertical-align:middle; padding:0px; width:196px; border:inset 2px rgb(230,230,230); background-color:rgb(255,200,200); } ￥ #b { display:table-cell; vertical-align:middle; padding:0px; width:100px; height:0px; background-color:rgb(255,255,200); } #x { display:inline-block; vertical-align:middle; padding:0px; width:100%; height:50%; text-align:center; background-color:rgb(255,200,255); border:inset 2px rgb(230,230,230); } #y { display:inline-block; vertical-align:middle; padding:0px; width:100%; height:50%; text-align:center; background-color:rgb(255,200,255); border:inset 2px rgb(230,230,230); } </style> </head> <body> <div id='tbl'> <div id="a"> 文章１行目 領域a<br> 文章２行目<br> 文章３行目<br> 文章４行目 </div> <div id="b"> <div id="x">領域b-x</div> <div id="y">領域b-y</div> </div> </div> </body> </html> 勉強不足で、間の抜けた内容もあるかも知れませんが、何卒ご協力の程を宜しくお願い致します。
- ベストアンサー
- CSS
- CSS floatによるレイアウト
box_mを縦に並べて、box_mの中にbox_1（左）とbox_2（右）を作りました。 CSS .box_m { width: 410px; margin: 0px 0px 20px 0px; } .box_1 { float: left; width: 200px; height: 100px; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; } HTML <div class="box_m"> <div class="box_1"> ボックス１ </div> <div class="box_2"> ボックス２ </div> </div> <div class="box_m"> <div class="box_1"> ボックス１ </div> <div class="box_2"> ボックス２ </div> </div> IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。 box_m同士の間に20pxの空間を作るにはどうしたらいいですか？
- ベストアンサー
- CSS
- 1カラムのリキッドレイアウトについて。
１カラムのサイトを作っています。 背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。 【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div> →これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。 文章などのコンテンツがないため、背景画像が全画面で表示されないのです。 どのようにしたら意図する表示が可能でしょうか？ できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。
- 締切済み
- CSS
- 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
