• 締切済み

ワイドのモニターだとズレます

下記のような記述を用いてオンマウスでメニューが現われるようにしているのです。 仕事で使っている15インチモニターでは正常に表示できるのですが、家にあるワイドモニターで見るとズレが生じてしまいます。 これを直すにはどうしたら良いのでしょうか? <style type="text/css"> <!-- #menu1{ position:absolute; top:22px; left:0px; visibility:hidden; } #menu2{ position:absolute; top:22px; left:90px; visibility:hidden; } #menu3{ position:absolute; top:22px; left:180px; visibility:hidden; }} --> </style>

みんなの回答

  • zxcv0000
  • ベストアンサー率56% (111/196)
回答No.2

どうすれば良いかを知る為には、原因が判る必要があります。 まず、両方のパソコンで使用しているブラウザの種類やバージョンが同じかどうかを教えてください。 これが重要な事だと言うのを No.1の回答から読み取って書いて頂けたら、やりとりが 1回減ったと思います。 この問題は、このあと長い長いやりとりが必要になる可能性があります。 回答を良く読んで、必要になりそうな情報を催促される前に提示する方が解決が早いですよ。

  • zxcv0000
  • ベストアンサー率56% (111/196)
回答No.1

モニターサイズでは無く、ウィンドウフレームの大きさ(ピクセル数)やフォントサイズ、あるいはブラウザの種類やバージョンが変るからずれてるんじゃあ無いでしょうか?

ots_tatuya
質問者

補足

そうなんですか!? それは、どうすれば良いのでしょう?

関連するQ&A

  • CSSで左側の余白

    CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で2段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>

    • ベストアンサー
    • HTML
  • ホームページビルダー16 ページセンター表示

    現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。 調べて色々試してみましたがセンターに表示されません。 どのようにするのでしょうか? 以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css"> <!-- body{ text-align : center; margin-left : auto; margin-right : auto; } --> </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>

  • IEでのポップアップ画像の位置「fixed」

    オンマウスでポップアップする画像を、左上に固定したいのですが、 HTMLとCSSだけでは難しいのでしょうか? HTMLとCSS以外の知識はほとんどありませんので、なんとかこの2つでとも思っているのですが… firefox・googleChromeでは下記のCSSで左上でポップアップ画像が固定されています。 IE8で確認したところ、どうしても画像の下に出てしまいます。 .thumbnail{ z-index: 0; font-size:12px; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: #FFFFFF; padding: 5px; left: 10px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; position: fixed; top: 10px; left: 10px; } ご教授いただければと思います。

    • ベストアンサー
    • CSS
  • javascriptの質問です。表示が残ってしまう

    オンマウスでサブメニューを出すjavascriptを組んでいます。 Firefox、Safari、Operaで次の行動を起こすとサブメニューが残ったままになります。 IEだと特に問題は有りませんでした。 OSはXPです。 ・オンマウスでサブメニューが開く ・サブメニューのリンクをクリックし、マウスは動かさずサブメニューが表示されたまま次のページへ ・ブラウザの戻るで元の画面に戻る ・サブメニューが残ったままになっている 原因が分かりません。アドバイスお願いします。 ソース <style type="text/css"> .mainmenu{ visibility : visible; width:200px; position : relative; z-index: auto; } .submenu{ visibility : hidden; width : 200px; top : -10px; left : 100px; position : absolute; background-color:#FFF; padding:10px; border:1px solid #CCCCCC; z-index: 1; line-height:1.5em; } </style> <SCRIPT language="JavaScript"> <!-- function showMenu(ss){ var getStyle = document.getElementById(ss); getStyle.style.visibility = "visible" } function hiddenMenu(tt){ var getsStyle = document.getElementById(tt); getsStyle.style.visibility = "hidden" } //--> </SCRIPT> <div class="mainmenu" onmouseover="showMenu('treeMenu1')" onmouseout="hiddenMenu('treeMenu1')"> <a href="URL1">■ <strong>メインメニュー1</strong></a> <div class="submenu" id="treeMenu1"> <div><a href="URL1-1">サブメニュー1</a></div> <div><a href="URL1-2">サブメニュー2</a></div> <div><a href="URL1-3">サブメニュー3</a></div> </div> </div>

  • innerTextで文字を変えたいのですが

    配列imに入っている数値が1なら"ok"と表示、0なら"-----"と表示したいのです。 以下のソースなのですが <html> <head> <style type=text/css> .im{ font-size:1.5em; font-weight:500; color:#ffffff; text-dacoration:none; text-decoration:blink; z-index:3; } </style> <script langage="JScript"> var im=new Array(30); var haba=0; //初期設定 function Preferences(){ for(i=1;i<=30;i++){ obj=document.getElementById("num"+i); obj.style.posTop+=haba; haba+=25; } for(f=1;f<=30;f++){ im[f]=0; im[2]=1; im[5]=1; if(im[f]==0){ num="num"+f; num.innerText="----------"; }else{num.innerText="ok";} } } </script> </head> <body bgcolor="#0000000" onLoad="Preferences()"> <div id="num1" class="im" style="position:absolute;top:25px;left:240px;">A1</div> <div id="num2" class="im" style="position:absolute;top:25px;left:240px;">A2</div> <div id="num3" class="im" style="position:absolute;top:25px;left:240px;">A3</div> <div id="num4" class="im" style="position:absolute;top:25px;left:240px;">A4</div> <div id="num5" class="im" style="position:absolute;top:25px;left:240px;">A5</div> <div id="num6" class="im" style="position:absolute;top:25px;left:240px;">A6</div> <div id="num7" class="im" style="position:absolute;top:25px;left:240px;">A7</div> <div id="num8" class="im" style="position:absolute;top:25px;left:240px;">A8</div> <div id="num9" class="im" style="position:absolute;top:25px;left:240px;">A9</div> <div id="num10" class="im" style="position:absolute;top:25px;left:240px;">A10</div> <div id="num11" class="im" style="position:absolute;top:25px;left:240px;">A11</div> <div id="num12" class="im" style="position:absolute;top:25px;left:240px;">A12</div> <div id="num13" class="im" style="position:absolute;top:25px;left:240px;">A13</div> <div id="num14" class="im" style="position:absolute;top:25px;left:240px;">A14</div> <div id="num15" class="im" style="position:absolute;top:25px;left:240px;">A15</div> <div id="num16" class="im" style="position:absolute;top:25px;left:240px;">A16</div> <div id="num17" class="im" style="position:absolute;top:25px;left:240px;">A17</div> <div id="num18" class="im" style="position:absolute;top:25px;left:240px;">A18</div> <div id="num19" class="im" style="position:absolute;top:25px;left:240px;">A19</div> <div id="num20" class="im" style="position:absolute;top:25px;left:240px;">A20</div> <div id="num21" class="im" style="position:absolute;top:25px;left:240px;">A21</div> <div id="num22" class="im" style="position:absolute;top:25px;left:240px;">A22</div> <div id="num23" class="im" style="position:absolute;top:25px;left:240px;">A23</div> <div id="num24" class="im" style="position:absolute;top:25px;left:240px;">A24</div> <div id="num25" class="im" style="position:absolute;top:25px;left:240px;">A25</div> <div id="num26" class="im" style="position:absolute;top:25px;left:240px;">A26</div> <div id="num27" class="im" style="position:absolute;top:25px;left:240px;">A27</div> <div id="num28" class="im" style="position:absolute;top:25px;left:240px;">A28</div> <div id="num29" class="im" style="position:absolute;top:25px;left:240px;">A29</div> <div id="num30" class="im" style="position:absolute;top:25px;left:240px;">A30</div> </body> </html> innrTextで表示する文字を変えるところがおかしいんだと思いますがどう直せばいいのか分かりません。 どなたか教えてください。

  • 疑似フレームがIEだと成り立たない

    疑似フレームがIEだと成り立たない 以下のようなCSSですが、FIREFOXやクローム等では反応するのですが、 IEだと処理されません。 どうすればいいのでしょうか? 教えてください。お願いします。 ちなみにCSSというものは初心者です。申し訳ありません。 <STYLE> <!-- BODY .menu1 { width : 12%; height : 100%; left : 0px; top : 100px; position : fixed; overflow: auto; } .menu2 { width : 12%; height : 100%; right : 0px; top : 100px; position : fixed; overflow: auto; } .main { position : absolute; z-index : 1; } --> </STYLE>

  • Netscape4でスタイルシートを設定すると、スクリプトが動作しません。

    お世話になっています。 現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。 しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。(「#この部分が~」のところです) 原因が分かれば、教えていただきたいと思います。 ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>  <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題? <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>

  • スタイルシートでスクロールは可能ですか?

    以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>   <TITLE>Test</TITLE>   <STYLE type="text/css">   #left {    position:absolute;    top: 130px;    left: 100px;    width: 300px; overflow: scroll;   }   #main {    position:absolute;    top: 130px;    left: 400px;   }   #right {    position:absolute;    top: 130px;    left: 700px;   }   #footer {    position:absolute;    bottom: 0px;    left: 100px;   }   </STYLE> </HEAD> <BODY> <div id="left">  left<br/> <br/>  left<br/> </div> <div id="main">  main </div> <div id="right">  right </div> <div id="footer">  footer </div> </BODY> </HTML>

  • style.visibility="hidden";

    下記は画面にJavaScriptで碁盤の目に区切り 左上の一区切りの下地を表示するコードです <html> <head> <title>タイル</title> <script language="JavaScript"> <!-- var block = [0]; function setTile() { num = 100; w = Math.floor(document.body.clientWidth / num); h = Math.floor(document.body.clientHeight/ num); wTag = ""; n = 1; for (j=0; j<=h; j++) { for (i=0; i<=w; i++) { wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>"; block[n] ='abc' + n; n++; } } document.all["tile"].innerHTML = wTag; document.body.style.visibility = "visible"; abc1.style.visibility="hidden"; } // --> </script> </head> <body onLoad="setTile()" style="visibility:hidden"> <div id="tile" style="position:absolute;top:0px;left:0px;"></div> </body> </html> 下地を表示する abc1.style.visibility="hidden"; を下記に直すと動かなくなります block[1].style.visibility="hidden"; よろしくお願いします。

  • Navimenuについて

    NaviMenuなのですが、XPだとうまく表示されるのですが、それ以外だと駄目みたいなのです。 <STYLE TYPE="text/css"> <!--  A:link { color:Black;}  :visited { color:Black;}  A:hover { background-color:Black;      color:white ;}  BODY { background-color:black; }  .title { position:relative;      text-align:center;      font:bold 50pt Times ;}     #NaviMenu { position:absolute;       width:150px;       border:DimGray 0.5em ridge;       background-color:GainsBoro;       z-index:1;       visibility:hidden ;} --> </STYLE> <SCRIPT LANGUAGE="JavaScript">  var flag = true;  unction Menu() {   if(flag) {    NaviMenu.style.posLeft = event.clientX;    NaviMenu.style.posTop = event.clientY;    NaviMenu.style.visibility = "visible";    flag = false;   }  else {    NaviMenu.style.visibility = "hidden";    flag = true;     }  }  document.ondblclick = Menu; </SCRIPT> -------------------------------------------------- <DIV id="NaviMenu" style="position:absolute;width:150px;z-index : 5;visibility:hidden;"> <SPAN STYLE="width:150px;background-color:Silver;text-align:center;color:Black;font:14pt Times new roman">Navigate Menu</SPAN><BR> メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 </DIV> どのようにすれば、Winユーザー全てに対応出来るのでしょうか? (林檎USERの方、ごめんなさい) アドバイス宜しくお願いいたします。

    • 締切済み
    • CSS

専門家に質問してみよう