- 締切済み
レイヤーの位置を固定しない方法
こんにちわ、CSSのレイヤーについて質問させていただきます。 レイヤーをセンター寄せのホームページに使うのですが、普通に記述すると、 #Layer1 { position:absolute; left:499px; top:537px; width:130px; height:107px; z-index:1; } となり、絶対位置になります。 これをrelativeを使うと、ウィンドウサイズを変更した際、その場にレイヤーの内容が残り、ページをリロードさせないと相対位置になりません。 これをリロードしなくとも相対位置になるような方法が書かれているホームページをご存知ではないでしょうか？ （ウィンドウのリサイズとレイヤーの位置連動してほしいのです・・・） どうぞよろしくお願いいたします。
- yamatoneko
- お礼率87% (143/164)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
今のcssだと縦方向のセンタリングができないみたいだからjavascriptによってresizeを検知して微調整するしか無いと思う。
関連するQ&A
- レイヤーを背景だけ透過させたい
お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- HTML
- Layerの中にあるリンクがmacで動作しません
以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>
- ベストアンサー
- HTML
- 配置方法してするpositionの相対位値。
positionの相対位置の意味がわかりません。 position:relative; top:30px; left:50px; とした場合。 どこからの距離を言っているのでしょうか？ position:absolute; top:30px; left:40px; にすると、画面の上から３０ピクセル、左から４０ピクセルの位置ですよね？ これを position:relative;にすると、どこからどこまでの距離なのかがわからないのです。 よろしくお願いします。 また、HTMLなどによく出てくる「相対」という言葉がいまいちわかりません。 もちろん「絶対」という言葉もわからないのですが・・・。
- 締切済み
- CSS
- このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、
このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、、 <BODY> <DIV style="top : 56px;left : 95px; position : absolute; z-index : 1; width : 336px; height : 21px; " id="Layer1" align="center"><FONT size="+4">テキスト</FONT></DIV> </BODY>
- ベストアンサー
- HTML
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- センタリングのＨＴＭＬの挿入場所
お世話になっております。 前回の質問の追加をしようとしたのですが、うまくできず、新たにスレッドを立てました。すみません。 以下のＨＴＭＬは横並びに写真を載せたもの（数行あります）です。（上部に文章を載せるための式がありますが、カットしています。）このプログラムのどこにセンタリングの式を入れたらいいのか、私の知識ではわかりませんでした。またご教示もらえると助かります。 よろしくお願いします。 </DIV> <DIV style="top : 1313px; </DIV> <DIV style="top : 1473px;left : 327px; position : absolute; z-index : 3; " id="Layer8"><IMG src="button2.gif" width="81" height="35" border="0" alt="Ｂａｃｋ"></DIV> <DIV style="top : 1060px;left : 21px; position : absolute; z-index : 8; width : 698px; height : 123px; " id="Layer6"> <IMG src="DSC_19711.jpg" border="0" width="160" height="106"> <IMG src="DSC_20401.jpg" border="0" width="160" height="106"> <IMG src="DSC_20541.jpg" border="0" width="160" height="106"> <IMG src="DSC_21231.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 883px;left : 15px; position : absolute; z-index : 7; width : 649px; height : 165px; " id="Layer5"> <IMG src="DSC_19311.jpg" border="0" width="160" height="106"> <IMG src="DSC_19381.jpg" border="0" width="160" height="106"> <IMG src="DSC_19411.jpg" border="0" width="99" height="149"> <IMG src="DSC_19631.jpg" border="0" width="160" height="106"></DIV> <DIV style="top : 572px;left : -3px; position : absolute; z-index : 5; " id="Layer3"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_17481.jpg" border="0" width="160" height="106"> <IMG src="DSC_18051.jpg" border="0" width="160" height="106"> <IMG src="DSC_18151.jpg" border="0" width="160" height="106"> <IMG src="DSC_18351.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 729px;left : 12px; position : absolute; z-index : 6; " id="Layer4"> <DIV> <TABLE border="0" cellpadding="15" width="725" height="147"> <TBODY> <TR> <TD height="113" width="549" align="center" style="position : relative;table-layout : auto;"> <IMG src="DSC_18421.jpg" border="0" width="160" height="106"> <IMG src="DSC_18641.jpg" border="0" width="160" height="106"> <IMG src="DSC_18941.jpg" border="0" width="160" height="106"> <IMG src="DSC_19201.jpg" border="0" width="160" height="106"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY>
- ベストアンサー
- ホームページ作成ソフト
- 音楽連続再生と歌詞カード（サブウインドウ）の連動表示
音楽の連続再生に連動した歌詞カード（サブウインドウ）の表示方法について、教えてください、お願いします。 現在は下記に書きました様にして 音楽の連続再生（Media Player)及び曲名をクリックする事により歌詞カードの表示を行っています。 しかし、再生と自動的に連動する事は出来ません、可能な方法が有れば教えて下さい。 現在のプログラム例 <BODY> <DIV style="width : 351px;top : 58px;left : 421px; position : absolute; z-index : 5; height : 17px; " id="Layer3"> <P><B><I><FONT size="+2" color="#0000ff"><A href="テスト.wpl">連続再生を開始します</A></FONT></I></B></P> </DIV> <DIV style="width : 224px;height : 16px;top : 129px;left : 25px; position : absolute; z-index : 1; " id="Layer1"><A href="javascript:void(0)" onclick="window.open('曲-1.html','subwin','width=300,height=300,left=310,top=250')"><B><I>曲-1歌詞</I></B></A></DIV> <DIV style="width : 186px;height : 16px;top : 159px;left : 25px; position : absolute; z-index : 1; " id="Layer1"><A href="javascript:void(0)" onclick="window.open('曲-2.html','subwin','width=300,height=300,left=310,top=250')"><B><I>曲-2歌詞</I></B></A></DIV> <DIV style="width : 157px;height : 16px;top : 190px;left : 27px; position : absolute; z-index : 1; " id="Layer1"><A href="javascript:void(0)" onclick="window.open('曲-3.html','subwin','width=330,height=300,left=310,top=250')"><B><I>曲-3歌詞</I></B></A></DIV> </BODY> テスト.wpl (メディアプレーヤファイル) <?wpl version="1.0"?> <smil><head> 以上よろしくお願い致します。
- ベストアンサー
- JavaScript
- レイヤーの固定の方法
レイヤーの対して、「position:absolute」を指定すると、親要素の位置を 基準に配置場所が決まりますよね。 ある画像を画面のセンター揃えにした場合、自動的に画面のセンターに表示 されるようになります。これだと画面のサイズによって画像の座標が変わって しまいます。 今は<BODY>タグが親要素となっているため、レイヤーの位置が画面のサイズに よって違ってしまいます。（つまり画面の上から40px、横から100pxという指定） 画面のサイズによって座標が変わる親要素からレイヤーの位置を指定したいのですが、その方法がわかりません。 解決策を教えてください。 果たしてこの説明で意味が伝わったでしょうか？？心配…。
- 締切済み
- CSS
- ■IE表示 位置ずれ
■IE表示 位置ずれ お世話になっております。あるサイトから無料のテンプレートを入手しましたが IEでは「left」が画面の中央に表示されてしまいますが解決方法はありますでしょうか？ body{ min-width: 412px; width:985px; margin:0 auto; font-family:Tahoma; font-size:11px; color:#565656; position:relative #container { padding-left: 172px; padding-right: 238px; height:100% #left { width: 172px; right: 172px; margin-left: -100%; #right { width: 238px; margin-right: -238px; 初心者で申し訳ございませんが宜しくお願いいたします。
- ベストアンサー
- HTML
- positionについて
positionについて教えてください box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか？ また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか? #box { position: relative; } #box2 { position: relative; top :50px; left: 100px; width: 100px ; height: 100px ; background-color: #F90; }
- ベストアンサー
- CSS
お礼
なるほど、、そうなのですか・・・。ありがとうございます。 もしご存知でしたら、そのサンプル等があるサイトをお教えいただけないでしょうか？