CSSのpositionについて質問です

このQ&Aのポイント
  • 質問は、HTML内でテーブルを作成し、その中で表示させるための方法です。
  • positionプロパティをstatic、relative、absolute、fixedのいずれかに変更することで、要素の表示位置を指定できます。
  • しかし、質問者はこれらの値の違いや使い方について理解ができず、思ったような結果が得られないとしています。
回答を見る
  • ベストアンサー

CSSのpositionについて質問です。

下記のサンプルについてですが、このソースは、ジャバスクリプトなど CSSなどを含んだプロフラムの一部(CSS)の部分です。 場所の指定を変更したいだけなので、CSSの部分だけを抜粋しました。(全て抜粋すると、ソースが多くなるので) 質問は、下記のソースを、HTML内で、テーブルを作ってその中で 表示させるための質問ですが、positionをstatic | relative | absolute | fixed に変えればいいだけの話だと思うんですが、 ちっと理解できません。色々思考錯誤しましたが、いまいち理解できないし、上手くいきません。 /* dock2 - bottom */ #dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px; } .dock-container2 { position: absolute; height: 50px; background: url(images/dock-bg.gif); padding-left: 20px; } a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; } .dock-item2 span { display: none; padding-left: 20px; } .dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; } こちらが質問のソースです。これだけで分からないかもしれませんが、 お願いします。もしあれでしたら、ソース全体と、外部ファイルなどを HPにアップロードして質問したいとも考えています。 参考サイトは http://coliss.com/articles/build-websites/operation/javascript/295.htmlの「CSS Dock Menu」です。 質問が雑ですが、お願いします

noname#57880
noname#57880
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.1

html部分がないと、 「何をどこにどう配置したいのか」 「何がどう上手くいかないのか」 が分かりません。

noname#57880
質問者

お礼

また改めて質問します。 ありがとうございました。

関連するQ&A

  • CSSレイアウト positionについて

    下記のタグにてpositionタグを使って指定した場合 IEの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか? お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body {    margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px;       width:900px padding-bottom:10px; padding-top:10px; } HTML <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>

    • ベストアンサー
    • HTML
  • CSS backgroundが反映されません

    CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }

    • ベストアンサー
    • CSS
  • CSS アクティブタブの仕組み

    CSS アクティブタブの仕組み 閲覧ありがとうございます。説明下手ですがお付き合い宜しくお願い致します CSS勉強も兼ねて擬似フレームのサイトを作っているCSS初心者です 解らないことは本やリファレンスサイトで調べ、忘れた時の為にコメントを書きこみ少しずつですが理解しながらサイトを作っています。 現在テンプレートサイト様が配布されている http://10prs.com/material/samples/cdp/mono-vivid/index.html を参考にメニュータブごとに背景色を変え、アクティブになったタブの背景色もタブと同じ色にしようと考察してます。 タブがアクティブになった時にメニューとメイン部分の境界のボーダーが消えるのですが、この仕組みがいまいちよく解りません。 恥ずかしながらアクティブになった時にボーダーが消える部分の記述があるのがどこにあるのか発見できずにいます。 無知なのに無謀な試みと思われるでしょうが御教示頂けないでしょうか、宜しくお願い致します ■以下テンプレートのCSSを抜粋 /* 各#ID&.class */ div#PAGETOP { height: 100%; overflow: auto; } div#HEADER { position: fixed !important; position: absolute; top: 0; left: 0; width: 100%; height: 70px; color: #fff; background: #000; } ul#PAN { display: none; } div#MENU { position: fixed !important; position: absolute; top: 80px; left: 30px; width: 130px; } div#MENU h2 { display: none; } div#MENU ul { margin-top: 20px; margin-left: 0; list-style: none; position: absolute; z-index: 100; height: 100%; } div#MENU ul li a { margin: 5px 0 5px 10px; padding: 5px 0; border: 1px solid; display: block; width: 119px; color: #333; background: #f1f1f1; font-family: 'Book Antiqua', 'MS P明朝', serif; font-size: 116%; text-align: center; text-decoration: none; } div#MENU ul li a:hover { margin-left: 0 !important; width: 129px !important; } li.menu-on a, li.menu-on a:link, li.menu-on a:visited { margin-left: 0 !important; border-right: 1px solid #fff !important; width: 129px !important; background: #fff !important; } div#KIZI { margin-left: 160px; padding: 80px 50px 30px 50px; border-left: 1px solid #333; background: #fff; } ul.modori { display: none; } div#FOOTER { position: fixed !important; position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; color: #fff; background: #000; } div#FOOTER h2, div#FOOTER ul.modori { display: none; } div#FOOTER ul { text-align: center; } div#FOOTER ul li { display: inline; }

    • ベストアンサー
    • HTML
  • safariだけCSSが崩れてしまいます

    safariだけCSSが崩れてしまいます。 初心者ですが、教えて下さい。 コンテンツ部分の中に、画像(説明文付き)を横並びに3列並べて表示するためにfloatで指定してあります。 下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と3が下に落ちて崩れてしまいます。 1 2 3 4 5 6 どのようにしたら横に並んでくれるのか、わかりません。。 どうかお詳しい方、ご教授下さい。 ______________________________________ #secondary { float:left; width:705px; padding:10px 0 0 15px; margin:0; } .index .module { float:left; width:210px; margin:0 17px 0 0; padding:0 4px; text-align:left; } .galleries { background:#eee; float:left; width:100%; margin:0 0 15px; position:relative; } .gallery .galleries { float:left; position:relative; width: 720px; margin:0 0 15px; padding:0; list-style:none; padding-top:10px; line-height:1.4em; } .gallery .galleries .thumb { float:left; margin:0 10px 10px 0; } .index .galleries { margin-bottom:5px; } .galleries ul { float:left; margin-left:0; margin-bottom:0; list-style:none; text-align:left; } .galleries li { background-image:none; float:left; position:relative; width:220px; height:6.4em; overflow:hidden; margin-bottom:0; padding:75px 0 1.6em 15px; } .archive .galleries li { height:10.5em; } .galleries h3 { margin:0 10px 0 4px; font-size:100%; } .galleries h3 a, .galleries a.img, .galleries h3 a:visited { border-width:0; } .galleries .img { position:absolute; top:4px; left:15px; } .galleries .img img { display:block; } .galleries p { margin:0 10px 0 4px; } .galleries div { margin:0 4px; } .gal { background:url("../images/bg_gal.gif") 11px 0px no-repeat; margin:0; } html>body .gal { background-image:url("../images/bg_gal.png"); }

    • 締切済み
    • CSS
  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

  • このHTMLとCSSをひとつにするのはどうすれば?

    WordpressのAddQuickTagを使うために別れたままでは使うことができません>< https://saruwakakun.com/html-css/reference/box ちなみに19番のカギカッコを使いたいと思っています。 何卒よろしくお願いいたします!! HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }

  • position:absoluteなのにセンター合わせができるのは何故?

    CSSです。 うまく表示されているのですが、何でうまくいっているのかわからないことがあります。 というのも、コンテンツをセンター合わせのレイアウトにしているというのにposition:absoluteのパーツがちゃんとセンター合わせがなぜかできてしまっているんです。 ユーザがブラウザの横幅を拡げようとも狭めようとも、常に左右をセンター合わせするつくりになっています。 以下が成功ソースです。 ※下記のlinkboxは、headerというIDセレクタに包含されている。 div#linkbox { position: absolute; top:50px; padding-left: 300px; width: 500px; _width: 800px; } div#header { background: #333333; text-align: left; width:800px; height:100px; margin-left: auto; margin-right: auto; } なぜこのソースでうまくいってしまうんでしょうか。 absoluteでも、左右を設定しない場合、自動で包含ブロック内に収まるとでもいうのでしょうか。

    • ベストアンサー
    • HTML
  • CSSの優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。(外部CSS) ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。(外部CSSよりヘッダーを優先するとテキストに書いてありました) しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか?? 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

  • CSSに追加した、footer記述が不完全か 

    footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。 どうかご教示のほどお願いします。 (例題を参考にして記述したものです。) html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px;  (例題は、 left: 0; であるが、大幅に左にずれる。) bottom: 0; width: 960px; (例題は、width: 100%; であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。) height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }

    • ベストアンサー
    • CSS

専門家に質問してみよう