XHTMLとJavascript・CSSで表示位置の固定方法について
- HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。
- <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。
- XHTMLの知識が殆どなく、原因が判りません。修正方法、もしくは代替案をお願いします。宜しくお願いいたします
- ベストアンサー
XHTMLとJavascript・CSSで表示位置の固定方法について
HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 Javascriptを別ファイルにしても動きませんでした。 修正方法、もしくは代替案をお願いします。 宜しくお願いいたします <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>
- yuchi-co
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
頭に、 <?xml version="1.0" encoding="utf-8"?> そして、 ×<div id="msg"> ○<div id="msg" style="position:absolute;">
関連するQ&A
- XHTML のタイトルが表示されません ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
- 外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう
Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。
- ベストアンサー
- HTML
- javascriptでちゃんと表示されない。
javascriptの参考書通りに書いてるのになぜか出ません。 なぜか、新製品と価額だけしかでません。 リラックスチェアとか価額４０００とかが出ません。 何が原因かわかりません。 何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
- javascriptでgooglemapを表示させたいのですが、fir
javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます。 IEでは問題なく表示できています。何が問題でしょうか。 html部分です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxx" type="text/javascript"></script> <script type="text/javascript" src="http://xxxxx.xxx/test.js"></script> </head> <body> <div id="map" style="width: 450px; height: 300px"></div> </body> </html> test.js部分です。 window.onload = function() { var map = null; var geocoder = null; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } if (geocoder) { geocoder.getLatLng( "東京都xx区xx", function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("ここが目的地です。"); } } ); } }
- ベストアンサー
- JavaScript
- ランダムにメッセージを表示させる方法
メッセージページに書いたものをIFRAMEを使ってスクロール表示させるスクリプトですが、これを改造して 一番先頭からスクロールするのではなく、ランダムに 3行目とかからスクロールさせる方法を教えてください。（スクロールしなくてもランダムに表示されれば良いのですが） ##メッセージ表示ページ 1.html ## <BODY> <P align="center"><iframe id="datamain" src="2.html" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe></P> </BODY> ######メッセージデータページ 2.html ####### <BODY> <DIV id="datacontainer" style="position:absolute;left:5;top:0;width:100%" onmouseover="scrollspeed=0" onmouseout="scrollspeed=cache"> <div>1 メッセージ。</div> <div>2 メッセージ。</div> <div>3 メッセージ。</div> <div>4 メッセージ。</div> </DIV> <DIV> <SCRIPT language="JavaScript1.2"> //<iframe> script by Dynamicdrive.com //Specify speed of scroll. Larger=faster (ie: 5) var scrollspeed=cache=3 function initialize(){ marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height") dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer") dataobj.style.top=5 thelength=dataobj.offsetHeight scrolltest() } function scrolltest(){ dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed if (parseInt(dataobj.style.top)<thelength*(-1)) dataobj.style.top=5 setTimeout("scrolltest()",50) } window.onload=initialize </SCRIPT> </DIV> </BODY>
- ベストアンサー
- JavaScript
- javascriptで画像の切替えとCSSの指定
javascriptで画像の切替えとCSSの指定でわかりません 以前、以下のhtmlを雑誌を見ながらやってみたのですが、わからないことが２点あります。 回答を頂ければ大変助かります。 １つ目の質問です。最初の画像が切り替わるのに１０秒かかってしまうのですが、これを最初の画像とともにすべての画像の切替を５秒にしたいのですがわかりません。 ２つ目の質問です。CSSで指定してある画像にあてはめたいのですが、書き方がわかりません。 以下のimgs[0] = "http://www.●.com/●1.jpg"; この部分に <div id="▲img"></div> を付けていいものなのか、 別な書き方があるのかがわかりません。 ＣＳＳ側→ #▲img { background-image: url(..●1.jpg); } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <script type="text/javascript"> var imgs = new Array(); var links= new Array(); imgs[0] = "http://www.●.com/●1.jpg"; imgs[1] = "http://www.●.com/●2.jpg"; links[0]="http://www.■.co.jp" links[1]="http://www.■.co.jp" i = 0; function Blend(){ document.getElementById("imgframe").filters.blendTrans.apply(); document.all.item("imgframe").src = imgs[i++]; document.getElementById("imgframe").filters.blendTrans.play(); document.getElementById("link").href=links[i]; if(i>=imgs.length) i=0; } onload = function(){setInterval(Blend,5*1000)} </script> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE></TITLE> </HEAD> <BODY> <a href="http://www.■.co.jp" id=link> <img src="http://www.●.com/●1.jpg" id="imgframe" style="filter:blendTrans(duration=2);"></img> </a> </BODY> </HTML> 以上です。 何卒よろしくお願い致します。
- ベストアンサー
- JavaScript
- GoogleMapAPIで初期位置の表示
<?php $DBaddress = "大阪市北区芝田" ; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKeodYAh1Nwl_nAMXwxLMtBSC5B7_MxPtqlxCQwd0QI3Cuv7JOxTp8TCJGdhudgycU3vU3mjNTZ5vhQ" type="text/javascript" charset="utf-8"></script> </head> <body onload="initAddress()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); function showAddress(address) { geocoder.getLatLng( address, showTheLatLng ); } function showTheLatLng (latlng) { var address = document.getElementById("address").value; // 入力欄のidはaddress if (!latlng) { alert("ご指定の住所（" + address + "）はジオコーディングできませんでした。"); } else { map.setCenter(latlng, 13); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var marker = new GMarker(latlng); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } //]]> </script> </body> </html> としてDBから値を受け取って初期の地図を表示したいです。 どのようにしたら良いでしょうか？
- ベストアンサー
- JavaScript
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- jsについて
html外部ｊｓファイルを読むとき１行目と２行目違う内容を同時読み取る場合どうしたらいいですか html <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <style media="screen" type="text/css"></style> <SCRIPT type="text/javascript" src="1.js"></SCRIPT> <body bgcolor="aliceblue" onLoad="dismsg1(0)"> <SCRIPT language="Javascript"> <!-- //イメージ、文章の切り替え function dismsg1(num){ document.all("mymsg").innerHTML=eval("msg"+[num]); document.all("mymsg1").innerHTML=eval("msg"+[num]); }; // --> </SCRIPT> <div id="mymsg"></div> <div id="mymsg1"></div> </body> </html> jaデータ var msg0="<font style='color:#800000;font-size:10pt'> 一行目</font>"; var msg1="<font style='color:#800000;font-size:10pt'> 二行目</font>"; ブログラム終了 上記の場合は"一行目"二回繰り返し表示するだけ msg1とmag2の内容を一行目と二行目表示したいです よろしくお願いします
- 締切済み
- ブログ
お礼
動作しました。ありがとうございました。