ベストアンサー

サイトが崩れてしまう。

2012/01/05 12:12

サイトを作ったのですが、リンク、自己紹介などを position:relativeをつかって上に引き上げたのですが、下の方に余白が出来てしましました。 position:relativeでボックスを移動すると余白がどうしても出来てしまうのでしょうか？余白が出来ない方法などがありましたら教えてください。また、ナイーブメイクオフローションの広告を張った所、下の線が広がらずに崩れてしましました。なぜなのでしょうか？

noname#252495

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/01/05 19:18 回答No.1

position:relative 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからボックスの位置はまず通常フローにて計算され（この計算で得られた位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position )］より　前後のHTMLや文書構造、およびどのように表現したいかがわかりませんが、通常はposition:absoluteを使います。下記見本では、続く<address>の上に隙間は開いていませんね。 [例]HTML4 いずれもタブは＿に置換してあるので戻すこと。 <!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"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>記事</p> ＿＿<div class="section"> ＿＿＿<h3>項目見出し</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<div class="section" id="AuthorProfile"> ＿＿＿<h3>自己紹介</h3> ＿＿＿<h3>自己紹介</h2> ＿＿＿<p>私は・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="./">トップ</a></li> ＿＿＿＿<li><a href="./books">著書</a></li> ＿＿＿＿<li><a href="./Blog">ブログ</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<address>連絡先</address> ＿</div> </body> </html> [例}HTML5 <!doctype html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿<link rel="stylesheet" href="css/style.css"> <style media="screen">  </style> </head> <body> ＿<header> ＿＿<h1>サンプル</h1> ＿</header> ＿<section> ＿＿<h2>本文見出し</h2> ＿＿<p>記事</p> ＿＿<section> ＿＿＿<h3>項目見出し</h3> ＿＿＿<p>記事</p> ＿＿</section> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<section id="AuthorProfile"> ＿＿＿<h3>自己紹介</h3> ＿＿＿<h3>自己紹介</h2> ＿＿＿<p>私は・・・</p> ＿＿</section> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="./">トップ</a></li> ＿＿＿＿<li><a href="./books">著書</a></li> ＿＿＿＿<li><a href="./Blog">ブログ</a></li> ＿＿＿</ul> ＿＿</nav> ＿＿<address>連絡先</address> ＿</footer> </body> </html>

質問者