- 締切済み
IEの場合フレームは、表示サイズにより表示が異なる
IE9の場合、対象古文書を対象ページを参照した場合と フレーム分割で参照した場合 画像解像度８００で見た場合表示が異なります。 なをIE8では、正常に表示されます。 添付写真は、上が対象古文書を対象ページを参照した場合 下がフレーム分割で参照した場合 参考に古文書を対象ページを参照 http://ryuso.info/r/r020_033.htm フレーム分割で参照 http://ryuso.info/r/r020u.htm ＭＡＣブラザーでもルビ（ふりがな）を表示できるか 段組で 作成して見ました ソースの内容 <div style="margin-left:14em;width:12em;float:left;"> <div style="font:0.71em/100% 'ＭＳ 明朝',serif;">あさばた</div></div> <div style="width:4em;float:left;"><div style="font:0.71em/100% 'ＭＳ 明朝',serif;">ほう</div></div> <div style="width:2em;float:left;"> <div style="font:0.71em/100% 'ＭＳ 明朝',serif;">たた</div></div> <div style="clear:both;"> 龍爪山の南の麓に御池あり。浅 畑 の池と名付けたり。方一里に余り、水たんたん湛え、底深く、あたかも湖水に異ならず。</div> わりにくい質問ですが上記のように表示されて困っていますが 老化予防にホームページ勉強していますがお分かりの方教えて下さい。
- k0021
- お礼率89% (33/37)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- izmtotk_nature_
- ベストアンサー率0% (0/0)
今日もいい天気ですわ
関連するQ&A
- IE6だと表示がおかしく表示される。
添付写真の上がIE9での表示で、下はIE6(IETesterで表示)ですが。 殆んど同じ記述で「写真」の無いページは、正しく表示しています。 必要と思われるタグは、下記の内容です。なお親ホントは100%です。 <div style="width:32%;float:left;"><img src="省略></a></div> <div style="width:59%;float:left;"><img src="省略"></a></div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:clear:both;"> <div style="margin-left:9.52em;font-weight:bold;clear:both;">九月十八日</div> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;">省略</div> 省略 </div> <div style="font:1em/2.8em 'ＭＳ 明朝',serif;width:27.9em;float:"> <div style="clear:both;width:27.9em;"> <div style="width:11.63em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:5.81em;font:1em/1.4em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> <div style="width:10.34em;font:1em/2.8em 'ＭＳ 明朝',serif;float:left;margin-top:1.5em;">省略</div> 省略 </div> 誤り内容を教えて下さい。 http://ryuso.info/test/ryu180_250.htm
- ベストアンサー
- CSS
- 同じ内容をフレーム分割と対象ページで異なる
ルビーもFirefoxでも表示しようと作成しましたがＩＥ９で下記の写真のように表示されました。 下の写真は、左側がフレーム分割の表示 右側が対象ページの内容です。 なおＭＡＣブラザーでも縦書きは、ＩＥ6のみ 1文書を除いて問題なく表示していますが。 ソース <div style="margin-left:9em;"><div style="margin-bottom:-0.6em;font-size:0.71em;">うえ</div></div> <div style="width:9.2em;float:left;margin-top:0.4em;">１駿州庵原之郡樽野</div><div style="width:1.2em;float:left;margin-top:0.4em;">上</div><div style="width:25em;float:left;vertical-align:top;">村武田甚右<sup>衛</sup>門子ニ、兄に左次右衛門</div></div> <div style="width:57em;clear:both;margin-top:0.4em;"><div style="margin-left:7em;width:9em;float:left;vertical-align:top;">額</div><div style="width:6em;float:left;vertical-align:top;"><div style="font-size:0.71em;">おなじく</div></div><div style="width:7em;float:left;vertical-align:top;">房</div></div> <div style="width:57em;clear:both;"> て、しゝのひたゐしろく、せすじ 同 <a href="javascript:gk_c1('t-03');">しゝふさ</a>のことく成</div> お分かりの方いましたら教えて下さい。 フレーム分割ページ http://ryuso.info/h/h002e5m.htm 対象ページ http://ryuso.info/h/heng2da.htm
- 締切済み
- CSS
- 超段組で作成の文字ずれの対応
文字サイズを大にすると下記写真の表示されますが何か対策がありますか。 写真の上が文字サイズを大です。下が文字サイズを中です。 .up {font-size:0.82em;vertical-align:super;} .wmx {width:57em;clear:both;} .s05 {margin-left:5em;} .l03 {width:3em;float:left;} .l08 {width:8em;float:left;} .l18 {width:18em;float:left;} .l20 {width:20em;float:left;} .s009 {margin-left:0.9em;} .rz {font:0.9em/110% "ＭＳ 明朝",serif;letter-spacing:0.1em;} .m_f {margin-top:0.3em;} .rt {font:0.71em/100% "ＭＳ 明朝",serif;} .c_b {clear:both;} .mtf {margin-top:0.2em;} <div class="wmx"> 駿州庵原郡樽の上村、武田甚右エ門の子に、兄に左次右エ門、弟に権兵衛といふ者あり、かの権兵衛２５の年、<span class="up">(今より)</span>３ <div class="s05 l18"><div class="s009 rz">辛 未</div></div><div class="s009 l08"><div class="rz">狩り</div></div></div><div class="l20"><div class="m_f rt">けんぞくかえ</div></div><div class="l03"><div class="m_f rt">しし</div></div> <div class="c_b">０年以前、かのとひつじの年正月１７日に、竜爪山に殺生に出て、我が眷 属 鹿のしし１６匹連れて遊びゐる中に、鹿の額白く</div> <div class="c_b"><div class="mtf">背筋同じく白房の如くなるを、<span class="up">(彼の者が)</span>鉄砲にて撃ちとむる。それによって我、彼の者に乗り移る。<span class="up">(その結果彼の者は)</span>言葉乱</div> 超段組で作成の文字ずれの対応方法を教えて下さい http://ryuso.info/rk/rk275_277.htm
- 締切済み
- CSS
- absoluteで重なるとき右に避けて表示したい
より賢い解決策を探しています。 "float: left"などでは、横に並ぶ要素のwidthが親を超えると下段にずれると思います。例えば下記のように。 <div style="width:100px"> <div style="width:40px;float:left">test</div> <div style="width:40px;float:left">test</div> <div style="width:40px;float:left">test</div> <div style="clear:both"><!--とりあえず--></div> </div> これは横並びですが、訳あって"position:absolute"を使って表示し、要素が重なる場合は、右に避けて表示をしたいのです。(もちろん各要素のtopとleftを指定します) これを行うために、JavaScriptで配置状態を管理する配列を用意しました。下記のようなテーブルです。 [ [0,0,0,0,0,0,0,0,0], [0,0,0,1,1,0,0,0,0], [0,0,0,1,1,1,1,0,0], [0,0,0,0,0,1,1,0,0], [0,0,0,0,0,1,1,0,0] ] "bottom - top"または"right - left"のいずれかの位置に"1"があるとき、"0"の場所まで右にずれる、というものです。 このうち"1"と"0"を for で探しているのですが、最大で要素のサイズ分だけ調べる回数がある、ただの力技です。 for(var i=y, j; i<y1; i++){ for(j=x; j<x1; j++){ if(table[i][j]){ // どうのこうの } } } もしかすると賢い解決策があるんじゃないかということで、質問させていただきました。 よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSとHTMLのページ。IEとFirefoxでデザインが崩れてしまいます；；
Firefoxだと、右上のフォーム部分がバナーの隣に来るのですが IEだとなぜかフォーム部分が下に来てしまいます。原因と対処法を教えてください。 FirefoxはCSSに厳格だと聞いたのですが、IEが曖昧なためになってしまったのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel=stylesheet type="text/css" href="1.css"> <link rel="shortcut icon" href="favicon.ico"> <title>aaaaa</title> </head> <body> <div class="box"> <div class="top1"> <img src="aaa.jpg" width="468" height="60" alt="バナー"> </div> <div class="top2"> ああ <form method="get" action="あああ" style="margin-top:0em; margin-bottom:1em"> <input type="text" name="word" size=40 value=""><input type="submit" value="検索"><input type="hidden" name="line" value="10"> <input type="hidden" name="indi" value="0"><input type="hidden" name="act" value="search"></form> </div><div class="end"></div> <div class="bar"> <div class ="menu"><a href="./">HOME</a></div> <div class ="menu"><a href="about.htm">ABOUT</a></div> <div class="end"></div></div><div class="end"></div> <div class="side"> サイド </div> <div class="main"> メイン </div><div class="end"></div> </div></body> </html> 以下CSS @charset "utf-8"; /* ------------------------------ 基礎設定 ------------------------------ */ body {font-size:0.875em; margin:0; padding:0; line-height:1.4; color:#c0c0c0; background:#000000; background-image: url("back.jpg"); background-repeat: no -repeat; background-position: 99% 95%; background-attachment:fixed; text-align:center; margin:0 auto 0 auto;} img {border:0;} address {font-style:normal;} /* ------------------------------ ページ枠組み設定 ------------------------------ */ .box {width:800; margin:0 auto 0 auto; text-align:left;} .main {width:80%; float:left; text-align:left; font-size:0.875em;} .side {width:20%; float:left; text-align:left; font-size:0.875em;} .top1 {width:50%; float:left; text-align:left; font-size:0.875em;} .top2 {width:50%; float:left; text-align:right; font-size:0.875em;} .bar {width:100%; height:41; text-align:center;} /* ------------------------------ クリアの設定 ------------------------------ */ .end {clear:both;} .end hr {display:none;} /* ------------------------------ メニューの設定 ------------------------------ */ .menu a{display:block; width:96px; color:#c0c0c0; background:url(menu-img/menu1.jpg) no-repeat; height:41px; line-height:43px; text-decoration:none; text- align:center; font-size:0.9em; font-weight: bold; float:left; font-family:verdana,arial,sans-serif;} .menu a:hover{color:#e9e9e9; background:url(menu-img/menu2.jpg) no-repeat;}
- ベストアンサー
- HTML
- リキッドレイアウトについて
リキッドレイアウトについて、メイン部分だけ可変するようにして、サイド部分は固定することは可能でしょうか？ <div style="float:left;width:？%;"></div><!--main--> <div style="float:left;width:200px;"></div><!--side1--> <div style="float:left;width:200px;"></div><!--side2-->
- ベストアンサー
- その他（インターネット・Webサービス）
- レイアウト崩れ
前回、同じような質問をさせて頂きましたが、質問の意図がわかり辛いのか、回答が付かないので、改めて質問させて頂きます・・・。 <div style="width:80%;" id="parent"> <div style="width:20%; float:left;"> タイトル </div> <div style="width:80%; float:left;" id="wrap"> <div style="padding-right:1em;" id="child"> 内容 </div> </div> </div> とあった場合、一部のアンドロイド端末のブラウザで、表示がおかしくなります・・・。 PCのブラウザで見ると、 parent→728 wrap→583 child→570 というwidthが取得できています。 レイアウトが崩れるブラウザでは、 parent→691 wrap→552 child→293 となってしまいます・・・。 この293という値がどこから来るのか？ 何故block要素（div）なのに、親要素のwidthを継承しないのか？ が謎です・・・。 childを「padding-right:1em」としたいため、width指定するのが難しく、 敢えてdivを二重にしたのですが・・・。 何故こうなるのか、どのように書けば正しく表示されるのか、 ご存知の方がおられましたら、何卒ご教示下さいますよう、お願い致します。
- ベストアンサー
- CSS
- firefoxでdivタグの体裁崩れ
お世話になります。 以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。 ・これはIE or FireFoxのバグになるのでしょうか？ ・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？ 申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 【Javaxcript CSS】擬似フレームサイズをマウスで変更したい
擬似フレームのサイズをマウスで変更したいです。 以前「CSSで指定したwidthをマウスで変更したい」 （http://oshiete1.goo.ne.jp/qa3849904.html） で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。 これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } #space { float:left; width:5px; background-color : #ffffff; cursor:E-resize; } </style> </head> <body> <script> window.onload = function(){ var Drag = 0, i = function(id){ return document.getElementById(id) }; i('space').onmousedown = function(){ Drag = 1; } document.onmouseup = function(){ Drag = 0; } document.onmousemove = function(e){ if(!Drag){ return false; } var ev = window.event || e; var W = document.body.offsetWidth || document.documentElement.offsetWidth; var L = parseInt( ev.clientX/W *100, 10); var R = 100 - L; if(L >1 && R > 1){ i('f1').style.width = L + '%'; i('f2').style.width = R + '%'; } } } </script> <div id="f1">f1</div> <div id="f2"> <div id="space"> </div> f2</div> </body> </html>
- ベストアンサー
- JavaScript
- css 各divの内容を上に揃えたいです。
こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"ＭＳ 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }
- ベストアンサー
- HTML
