- 締切済み
relativeでtop:0pxで配置したのですが、どうしても上に余白ができます。
cssでレイアウトをしていますが、bodyの上にブロックをひとつrelativeでtop:0pxで配置したのですが、どうしても上に余白ができます。 absoluteなら余白はできませんが、中央に配置する方法がわかりません。 よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ran_2323
- ベストアンサー率43% (32/73)
- twinhourse
- ベストアンサー率45% (5/11)
関連するQ&A
- CSSで左側の余白
CSS本を見ながら苦闘しています。 下のようなCSSを書いたのですが、全体のレイアウトが左寄せから10pxほど余白が出て表示されてしまいます。 HTMLではそのような指定はしていません。 どうしてなのでしょうか。 また、どのようにしたら良いのでしょうか。 レイアウトは div#top div#top1 で２段上下にブロックしたあと、左右のブロックで分けています。 ※また、:と;の間にスペースを入れる、入れないは本によってマチマチなのですが、どのような書き方が正しいのでしょうか。 <style type="text/css"> <!-- body { font-size:10pt ; line-height:20px ; background-color:white; color : black ; } td { font-size:10pt; line-height:16px ;} div#top { position: absolute; top:0px; } div#top1 { position:absolute; top:95px ; } div#menu { float:left; } div#content { float:left; border-left:1px solid #666666 padding-top:10px; padding-left:20px; width:580px; } // --> </style>
- ベストアンサー
- HTML
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- 要素の配置方法について・・・
要素を直接配置する方法として、 CSSのpositionで指定する方法がありますよね。 今、XHTML1.0Trasionalでホームページを作っているのですが、 position:relative; top:0px; left:0px; と指定してもうまくいきません。（ピクセルは今だけ0にしました） position:absolute;でもやってみたのですが、 変わりませんでした。 だれか、この解決策を知っている方はおらっしゃるでしょうか？ 知っていたのなら、ぜひお教えください。 ただ単に、私が間違っていたと言う事もありえますので、 うちでは、ちゃんとなったよ！ という人もおられましたら、 是非ご回答お願いします。
- 締切済み
- HTML
- 最上部の余白の原因
こんばんは、質問させてください。 XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいてはまっています。 コードは抜粋です。現在の書き方だと タイトル部分の上に対してのマージンによって <div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまいます。 想定ではヘッダーの中で中央ぐらいにTitleという文字がくると思っていたのですが。。 原因はなんでしょうか？ 宜しくお願い致します。 -index.html <body> <div class="header"> <p class="title">Title</p> </div> </body> -style.css *{ margin:0; padding:0; } .header{ background-color:blue; width:800px; height:250px; } .title{ width:200px; height:50px; background-color:red; color:white; margin-left:210px; margin-top:100px; }
- ベストアンサー
- CSS
- CSSで左右の中央配置
CSSでのレイアウトを考えております。 ┌──────────────┐ │MainBox(W760px) │ │┌─────┐┌─────┐│ ││boxA ││boxB ││ ││(W300px) ││(W300px) ││ │└─────┘└─────┘│ │ │ └──────────────┘ ↑このようなかんじなのですが、 boxAとboxBの配置はabsoluteを使って成功したのですが、MainBoxごとプラウザの横幅を変えても左右の中央配置にしたいのですが、どのようにしたらよろしいのでしょうか？ 同じような質問を参考にしてみたのですが、うまくいきませんでした。すいませんが、どなたか助けてください。
- ベストアンサー
- HTML
- webページの上余白をなくす方法
お世話になります。 webページ作成について困っております。 htmlで、ページ内の表中に画像を配置しています。表中の画像がそのページの一番上にくっついた状態(上部マージンなし)にしたくて、下記のようなタグをつけてみたのですが、わずかにまだ上に余白が残ってしまいます。 この余白を消して、ページの一番上から画像を表示させる方法を教えてください。 １．<body topmargin="0" marginheight="0"> この方法と、 ２．スタイルシートで <style type="text/css"> <!-- body { margin: 0px; } --> </style> この２つを試してみましたが、わずかに上部に余白がのこってしまいました。 よろしくご回答お願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- ネットスケープで上に余白があいてしまいます
お忙しいところすみません。どうしたら良いのか分からないので、教えていただけると大変うれしいです。 ＩＥだと上の余白がなくちゃんと表示されるのですが、ネスケで見ると上にかなりの余白があいています。マージンを２パターンで指定しているのですが、なぜなのでしょうか？ body { margin-left: 0px; margin-top: 0px; margin-height: 0px; margin-right: 0px; margin-bottom: 0px; } 何かタグが足りないのでしょうか？ どうぞよろしくお願いします。
- ベストアンサー
- HTML
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- blogのwrapperの上下に余白が10pxほど空いていますが、つめるにはどうしたらいいでしょうか？
wordpressを使用してブログを作成していますが、wrapperの上下の部分に、10pxほど余白ができてしまっています。 IE5 IE6 FireFoxのいずれでも、余白があるのですが、この余白をつめるには、どうしたらいいのでしょうか？ cssの定義は以下の通りなのですが、これは、cssでは、余白を埋めることはできないのでしょうか？ .wrapper { background: url(images/wrapper.png) repeat-y; position:relative; width:1000px; margin:0px auto 0px auto;
- ベストアンサー
- HTML
- テーブルの上に余白ができてしまいます
パソコンから見たときはなんともないのですが、携帯から見ると大きい余白がでてしまって困っています。 解決方法を教えていただけませんか？ それと、できれば下記のHTMLの添削をしてもらいたいです。 <html> <head> <meta http-equiv="Content-type" content="text/html; charset=shift_JIS"> <style type="text/css"> <!-- a:hover { position: relative; top: 1px; left: 1px; text-decoration: none; } a img { border: none; } --> </style> </head> <body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="FFFFFF" text="#000000"> <center> <Table style="margin:-84px 0px 0px 0px" border="0" bgcolor="#336666" cellpadding="10"><tr><td> <div align=center><font size="2">タイトル</font></div> <font size="1"><font color="#000000">本文</font> </body></html>
- 締切済み
- HTML
補足
ありがとうございました。 bodyのmarginとpaddingを0にしたらできたのですが、ボックスにborder 1px solid と指定しないと（borderをなしにすると）また余白ができてしまいます。なぜでしょうか？