「CSS」 POSITION:absoluteの値を参照する
- 「CSS」 POSITION:absoluteの値を参照する方法はあるのか
- 【解決方法あり】CSSのPOSITION:absoluteの値をjavascriptで参照する方法
- CSSのPOSITION:absoluteで設定した値をjavascriptで取得する方法
- ベストアンサー
「CSS」 POSITION:absoluteの値を参照する
いくつかの画像を <div STYLE="POSITION:absolute; LEFT:***px; TOP:***px;"> <img src=""・・・・> </div> のようにして表示させているのですが、 このLEFTの「*** px」という値をjavascriptなどで参照するというのはできるのでしょうか。 100px以上に位置する画像に何か効果を持たせるというようなことをやりたくて、 いろいろ調べては見たのですがわかりません。 そもそもできるかどうかという事も含めて、何かご存知の方よろしくお願いします。 環境は何を載せたらいいかわかりませんが、一応・・・ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ブラウザはIE7で表示させようとしています。
- yukisin19
- お礼率75% (21/28)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<div id="hoge" STYLE="POSITION:absolute; LEFT:***px; TOP:***px;"> に対して、DIV表示後に var element = document.getElementById("sample"); alert(element.style.left); alert(element.style.top); のように取得できます。 <div id="hoge" STYLE="POSITION:absolute; LEFT:***px; TOP:***px;">
関連するQ&A
- positionの設定の仕方について
中央に1つの大きな画像を配置。 そしてその画像の左右の任意の位置に、リストを配置しようと考えています。 しかし、以下のような表記にしましたがリストが思うように配置されません。 職場ではリストの配置まではうまく行きました。 が、自宅の環境で見ると、職場とはどこかの設定が違っているのか、DW8上では配置されているのですが、ブラウザ上(IE、Ff)ではリストが全く動いていません。 画像はきちんと配置されています。 どうしてこういう違いがでるのかさっぱり分からず、質問させてもらいました。 よろしくお願いします。 <!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>ポジションタグ練習用ページ </title> <link href="css/position2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="position"> <ul> <li id="01"><a href="1.htm">あいうえお</a></li> <li id="02"><a href="2.html">かきくけこ</a></li> </ul> <img src="images/flower.jpg" alt="花" width="260" height="402" id="img"> </div> </body> </html> -------------------- #position { position: relative; left: 0px; top: 0px; } #img { position: relative; height: 402px; width: 260px; left: 85px; top: 0px; } #01 { position: absolute; height: 20px; width: 100px; left: -11px; top: 0px; background: #FFFFCC; } #02 { position: absolute; height: 20px; width: 100px; left: 360px; top: 26px; background: #FFCC99; }
- ベストアンサー
- HTML
- CSSでのセンタリング
いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!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"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。
- ベストアンサー
- HTML
- IE5*でもCSSで画像を横に並べる方法を・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。
- 締切済み
- HTML
- CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!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" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
- CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- ベストアンサー
- CSS
- cssに関して
<!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"> <!-- #box { height: 100px; width: 700px; border: 1px solid #996600; } .comment { height: 50px; width: 300px; float: left; margin-top: 10px; border: 1px solid #993366; } --> </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。 しかし疑問が残ります。 本来はboxにpadding-top:10pxとすべきなんでしょうか。 それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px） ある程度経験のある方か、お詳しい方にご判断願いたいと思います。 なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・） よろしくお願いします。
- ベストアンサー
- HTML
- jqueryのスライドショー実現方法を教えて下さい
多くのサイトで見られるスライドショーですが、それをjqueryを使い実現したいです。 ぜひ実現したい内容は、 (1)前の画像から次の画像へと変わる様子は、前の画像が徐々に透明化し、 次の画像が前の写真と重なり合うように浮き出てくるような感じにしたいです。 IEとFirefox、Chorome、Safariで同じ様に動作させたいです。 (2)使用する画像は900px×400pxのJPGで、15枚(01.jpg ～ 15.jpg)あるので、 ページの読み込みが重くならないようにしたいです。 (3)サイトに訪れた際に、最初に表示される画像は15枚中1枚をランダムで選択される (4)2枚目、3枚目もランダムに選択される (5)代替用の画像も用意したいです。 上記(1)～(5)を満たすには、下記コードの<script>こちらを教えて下さい</script>に どのようなプログラムを作ればいいのでしょうか？ <!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" xml:lang="ja" lang="ja"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <style type="text/css"> #sample { margin: 0px; padding: 0px; width: 900px; height: 400px; float: left; position: relative; } #sample img { position: absolute; left: 0; top: 0; } </style> <script src="jquery-1.5.1.min.js"></script> <script>こちらを教えて下さい</script> </head> <body> <div id="sample"> </div> <noscript> <img src="01.jpg"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- CSSのposition：fixedでIE6にも対応させたい Part.2
前回の質問でアドバイスを元に作ってみました。 <!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"xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>XYXYXYXYXY</title> <style type="text/css"> * { margin:0; padding:0; color:#FFFFFF; } body { background-color:#000000; text-align:center; } div#pagebody { width:684px;margin:25px auto; } span#a1 { position: fixed; bottom:50px; left:0px; right:0px; } h1 { font-size:44px; font-weight:bold; padding:25px; } div#left { width:342px; float:left; } div#right { width:342px; float:right; } </style> <!--[if lt IE 7]> <style type="text/css"> html {overflow: hidden;} body { height: 100%; overflow: auto; } span#a1 { position: absolute; } </style> <![endif]--> </head> <body> <div id="pagebody"> <h1>XXXXXXXXXX</h1> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <div id="left">XYXYXYXYXY</div> <div id="right">XYXYXYXYXY</div> <table width="480" height="2000" border="1" cellspacing="5" cellpadding="5"> <tr> <td> </td> <td> </td> </tr> </table> <span id="a1"><a href="#"><img src="3top.jpg" width="240" height="95" border="20"></a></span> </div> </body> </html> 上記でFirefoxはほぼ完璧のようです。 jpgが見れませんが実際jpgを用意すると見れます。 （tableが何故かセンタリングしていませんが、、、スクロールバーで確認するためにtableを入れただけです。） 問題のIE6です。 IE6ではセンタリングが全く作用していません。 （tableは何故かセンタリングが作用しています、、、スクロールバーで確認するためにtableを入れただけです。） かなりの初心者なので何故XHTMLが出てきたのかさっぱり理解できませんが あとはIEのセンタリングだけなのでアドバイスお願いします！
- 締切済み
- 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> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ie6で画像のpaddingを表示させたい
seesaaブログユーザーです。 seesaaはxhtmlで記述しているようでソースの先頭は 1:<?xml version="1.0" encoding="Shift_JIS"?> 2:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (1:は一行目, 2:は二行目であることを表しています) のようになっています。 これを 1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> もしくは 1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2:<?xml version="1.0" encoding="Shift_JIS"?> としても問題ないのでしょうか？ と、質問させていただいた理由は 画像に枠をつけたいと思って、cssでimgにpaddingを指定したのですが ie6では表示されないのでこれを何とかしたいからです。 http://www.koikikukan.com/archives/2006/03/11-015552.php の記事を参照してわかったのですが、 この状態ですと画像のpaddingがie6では適用できないのですね。 そこで、記事にあるようにdoctype宣言を先頭に持っていくと ie6でも表示されるようになりました。 ということで、 「<?xml version="1.0" encoding="Shift_JIS"?>」 の扱いについて質問させていただきます。
- ベストアンサー
- XML
お礼
早速の回答ありがとうございます。 前回の質問ではお世話になりました。 早速試してみたところ、上手く動きました。 要素をつなげていくんですね。 あっさりと解決できて、すっきりしました。 とても早く回答がいただけて助かりました。 ありがとうございました。