- 締切済み
要素の配置方法について・・・
要素を直接配置する方法として、 CSSのpositionで指定する方法がありますよね。 今、XHTML1.0Trasionalでホームページを作っているのですが、 position:relative; top:0px; left:0px; と指定してもうまくいきません。（ピクセルは今だけ0にしました） position:absolute;でもやってみたのですが、 変わりませんでした。 だれか、この解決策を知っている方はおらっしゃるでしょうか？ 知っていたのなら、ぜひお教えください。 ただ単に、私が間違っていたと言う事もありえますので、 うちでは、ちゃんとなったよ！ という人もおられましたら、 是非ご回答お願いします。
- kabin2000
- お礼率13% (45/334)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- steel_gray
- ベストアンサー率66% (1052/1578)
「要素を直接配置」の意味がわかりません。 どんな結果を期待していて、それと、どう違っていたのでしょうか？ あと、書いたxhtml+cssをもう少し詳しく書いてください。 本来(x)htmlとセットでないとcssの動作は不明です。
関連するQ&A
- 配置方法してするpositionの相対位値。
positionの相対位置の意味がわかりません。 position:relative; top:30px; left:50px; とした場合。 どこからの距離を言っているのでしょうか？ position:absolute; top:30px; left:40px; にすると、画面の上から３０ピクセル、左から４０ピクセルの位置ですよね？ これを position:relative;にすると、どこからどこまでの距離なのかがわからないのです。 よろしくお願いします。 また、HTMLなどによく出てくる「相対」という言葉がいまいちわかりません。 もちろん「絶対」という言葉もわからないのですが・・・。
- 締切済み
- CSS
- 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
- positionについて下記の認識で正しいでしょう
positionについて下記の認識で正しいでしょうか？ ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです） ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか？
- ベストアンサー
- CSS
- 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
- 要素の配置
outlineをセンター配置に、 outlineの中の画像とh1要素をセンターに、最新の更新を右寄せに配置したいのですが、うまくできません。 どのようにしたらよいか教えてください。 http://www.asahi-net.or.jp/~gc4t-iwt/test/ cssソース body { margin-left: auto; margin-right: auto; color: black; } #outline { width: 750px; border: 2px solid silver; } h1 { color: blue; margin-left: auto; margin-right: auto; } div.center { padding-left; auto; padding-right: auto; } div.right { position: relative; right: 10px }
- ベストアンサー
- HTML
- CSSの配置 absolute について
自身の運営するウェブサイトにて、画像の保存・転載を防止したいと考え、以下のjQueryプラグインを導入しようと試みておりますが、自らの知識では解決できない問題が生じたため、お力をお借りできればと思います。 配布元：http://davidwalsh.name/image-protector-plugin-for-jquery 参考：http://www.css-lecture.com/log/javascript/dwimageprotector.html このプラグインは画像の上に透過画像の載せることで元画像の保存等を防止するものですが、自身のウェブサイトに導入した結果、下記のページのように透過画像(分かりやすいように色付きの画像で表示しています)が元の画像からズレて表示されてしまいました。適用しているのは記事本文の最初の2枚の画像(800px×531px)と下から2枚目の画像(531px×800px)です。 http://www.disneycolors.net/blog/easter-in-newyork-2013-01.html position:absoluteを今まで使用したことがなく、この問題の原因がよくわからずにいます。 なお、abosoluteに対してtopやleftなどで位置を指定することは理解しています。このjQueryプラグンにおいても配布の段階で top: position.top, left: position.left, position: 'absolute', とcss設定されています。 また、 margin:'706px 0px 0px 410px', を加えれば私のブラウザ上では元画像の上にぴったり重なりますが、スマートフォン等で見た場合にはそうはならならいためブラウザに依存しない形で配置したいというのが質問の意図です。 absoluteであればrelativeを与えた親要素を基準に配置され、このようなブラウザによって異なる表示にはならないと理解しているのですが、imgにrelativeを与えても目的の形にできません。 解決方法についてご教授をお願い致します。 この手の質問に対して保存・転載防止はムリ、またそのような考えに対して異を唱える回答がよくなされますが、そのような回答は不要です。 今回の対策を行っても避けられる方法がいくらでもあることはわかっています。その上で、右クリックやスマートフォンの長押しによる画像の保存、それに伴う無断転載というライトユーザーの行為を防ぎたいという意図です。 また、画像保存・転載防止についての他の方法の提案も不要です。
- ベストアンサー
- CSS
- アメブロｃｓｓ 画像を好きなところに配置
アメブロをやっています。 新cssを使用しているんですが、画像を好きなところに配置（添付画像の水色のハートの位置とかに）しようとするため各サイトをまわり、探しています。 画像はリンクなし、固定にしたいです。 新ｃｓｓ用の画像を好きなところに配置するタグを見つけて実行したんですがF５を押しても、何回やっても画像の半分が記事欄の後ろに行きます。 そこから位置をいじっても動きません。 貼り付けているのはこのタグです。 ｃｓｓへは↓ /* ------------------------------------------------------- */ /* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */ /* ------------------------------------------------------- */ .skinFrame2{ width:1000px;/* コンテンツ幅を設定 */ margin:auto;/* 自動中央寄せ */ position:relative;/* 起点指定 */ } #bk001{ position:absolute; top:220px; left:200px; z-index:99;/*重なりの順序*/ } #aifurex1{ position:absolute; top:220px; left:200px; width:130px; height:150px; overflow:auto; background-color:transparent; z-index:100;/*重なりの順序*/ } フリースペースには↓ <img src="画像のＵＲＬ" id="bk001"> <div id="aifurex1"> 文章 </div> 画像URLはアメブロの画像フォルダ→画像URLをコピーからペーストしています。 今までいろんなタグでやってきましたがいい加減できないので詳しく教えていただけると助かります。
- 締切済み
- ブログ
- position:fixedが親要素に準じて表示してくれません。。
position:fixedが親要素に準じて表示してくれません。。 <div id="relative"> <div id="flashContent"><img></div> <div id="TopBnr"><img></div> </div> ーーCSS－ーーーーーーーーーーーーーーーーーーーーーーーーーーーー #relative { position:relative; width:990px; height:374px; margin:0px auto; } #flashContent { width:990px; height:374px; margin:0px auto; z-index:0; } #TopBnr { position:fixed; width:260px; height:90px; right:90px; top:30px; z-index:1; } Ie6対応済みです。。 なぜかIeでの配置はできているのですが、 それ以外のブラウザでは、親要素に準じて配置してくれません。 どなたか解決策を教えてください。。
- 締切済み
- HTML
- Firefoxで見るとli要素レイアウトが崩れます
http://thai-kosiki.net/のサイトです。 フッターメニュー（リンク集～お問い合わせ）の部分がIEやchromeでは思ったように表示されるのですが、FirefoxやiPhoneで見ると、li要素の一番最後の文字（リンク集だと集）が下に落ちてしまいます。 ブラウザーの倍率はどちらも100％でみています。li要素やul要素の文字の大きさを小さく設定してみたり、li要素の間隔を開けてみたり試してみたのですが、うまくいきません。 フッター部分に設定したCSSです。 div#footer { width: 100%; height: 105px; background-repeat: repeat; background-position: left top; background-color: #FFF; border-top-width: thin; border-top-style: solid; border-top-color: #DFDBDC; clear: both; font-size: 75%; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } div#footer-inner { width: 1000px; height: 105px; text-align: left; position: relative; margin-right: auto; margin-left: auto; } .footer-nav { position: absolute; left: 308px; top: 30px; width: 508px; } .footer-nav li { float: left; list-style-position: inside; list-style-image: url(../img/common/arrow.png); } .copyright { position: absolute; display: inline-block; width: 177px; left: 823px; top: 30px; } absoluteを使っているのが問題なのでしょうか？ FirefoxやiPhoneで見てもレイアウトが崩れないようにするにはどうしたらいいのでしょうか？ 間違っている点や追加した方がいい点などがありましたら教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- CSS
- relativeでtop:0pxで配置したのですが、どうしても上に余白ができます。
cssでレイアウトをしていますが、bodyの上にブロックをひとつrelativeでtop:0pxで配置したのですが、どうしても上に余白ができます。 absoluteなら余白はできませんが、中央に配置する方法がわかりません。 よろしくお願い致します。
- 締切済み
- HTML
