• 締切済み

透明divの下に長い余白ができてしまう

サイトを作成してるのですが透明divの下に長い余白ができてしまう【HTML・CSS】 opacityを使って背景色を透過、文字は透過しないで コンテンツを配置する方法 （http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1154742441）を 参照して組んだのですがこの透明dｉｖを閉じた後、長い空白（余白？）が 出来てしまいます。contents_area2のdivが閉じたすぐ下に ナビゲーションメニューを入れたいのですが どうすればいいのでしょうか？ 見にくいですが一番下の深緑がナビゲーションメニューです 【ＨＴＭＬ】 <!--透明ボックス--> <div id="contents"></div> <!--コンテンツ--> <div id="contents_area2"> コンテンツ～～～（フロート使ってます） <!--フロート解除--> <div id="clear"></div> </div> <!--メニュー--> <div class="nav"> <ul> <li>＃＃＃</li> <li>＃＃＃</li> <li>＃＃＃</li> </ul> </div> 【ＣＳＳ】 /* --- 透明ボックス --- */ #contents{ width: 870px; min-height:550px; margin: 5px auto 0; background-color:#FFF; opacity: 0.4; filter: alpha(opacity=40); /* IE6、IE7対応 */ -moz-opacity: 0.4; /* Firefox1.5以前対応 */ } /* --- コンテンツ --- */ #contents_area2{ position:relative; top:-550px; /*550pxできっちり合うはずなのですが5pxほどずれます */ width: 870px; min-height:550px; margin: 5px auto 0; } /* --- フロート解除 --- */ #clear { clear: both; } /* --- ナビ（メニュー） --- */ .nav{ width: 100%; background-color: #093; height: 60px; } .nav ul{ list-style:none; } .nav li{ display:inline; width:100px; font-size: 14px; font-weight: bold; color: #FFF; } DreamWeaverCS3 Windows7

画像を拡大する
  • CSS
  • 回答数2
  • ありがとう数6

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

それでも・・・何をされたいかがさっぱり不明。 透明なブロックと言うのが、そもそもわかりません。 例えば、次のように説明していただくとわかります。 ・本文内のナビゲーションを本文の開始位置と同じ高さからはじまるようにしたい。 ・ナビゲーションは半透明の白の背景にしたい。 というのでしたら、スタイルシートは div.section{position:relative;} div.section div.nav{position:absolute;tio:0;background-color:rgba(255,255,255,0.4);} と、そのままスタイルシートを書けば良いです。 　セレクタ間の [半角スペース]は子孫セレクタです。後方互換を考えないなら子供セレクタを使います。 後方互換でしたら、半透明GIF画像を使用するほうが無難です。opacityでも出来ます。 [サンプル] ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATAでチェック済みのHTML4.01strict ★タブは＿に置換してあるので戻す。 ★http:はhttp：と全角に置換してあるので戻す。 ★リキッドですからスマホでも幅広ディスプレイでも利用可能 ★印刷にはこのままは適用されない。(印刷プレビューで確認) ☆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"> ＿<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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} --> ＿</style> ＿<style type="text/css" media="screen"> div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /* ここから */ div.section{position:relative; min-height:300px;/*ナビゲーションに最低限必要な高さはここで */} div.section div.nav{ position:absolute; top:0;right:0;/* borderの内側0 paddingを含まない */ /*paddingの内側にするときは・・ */ /* top:5px; right:5px; */ width:160px;background-color:rgba(255,255,255,0.4); } /* ナビゲーションのための余白 */ div.section div.section{min-width:0;width:auto;margin:0 170px 0 0;} div.section h2, div.section p{margin:0 170px 0 0;} div.section div.section p{margin-right:0;} div.section div.nav h3{margin:0;line-height:2em;} /*ページの背景 */ body{background:url(http：//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Mt_fuji%28R469_Yuno%29.jpg/1280px-Mt_fuji%28R469_Yuno%29.jpg) 50% 50%;} /* 位置の目安 */ div.section{border:solid 1px red;} div.section div.section{border-color:green;} div.section div.section{border:blue solid 1px;} div.section h2, div.section p{border:lime solid 1px;} div.section div.nav h3{background-color:lime;} --> ＿</style> ＿<style type="text/css" media="print"> <!-- div.section div.nav a{color:black;text-decoration:none;} div.section div.nav a:after{content:" URL( http：//hoge.com"attr(href)" )\A\A";white-space:pre;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>ナビゲーション</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/books">Books</a></li> ＿＿＿＿<li><a href="/contactUs">ContactUs</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

＞top:-550px; /*550pxできっちり合うはずなのですが5pxほどずれます */ 　ずれません。きちんと-550px移動してます。 8.1 ボックスの寸法( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#box-dimensions ) 　relativeでなくabsoluteのほうが確実です。relativeだと、その要素が本来あった位置--スペースが残るため、後続の要素はそれが移動していないとして配置されます。 9.3.1 位置決め方式の選択: 'position'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#choose-position ) 　HTMLがデザイン目的で書かれている部分があるらしいのですが、具体的な文書構造が分からないのでこれ以上は無理です。 <!--透明ボックス--> <div id="contents"></div> <!--コンテンツ--> <div id="contents_area2"> コンテンツ～～～（フロート使ってます） <!--フロート解除--> <div id="clear"></div>こんな物要らない!! </div> <!--メニュー--> <div class="nav"> <ul> <li>＃＃＃</li> <li>＃＃＃</li> <li>＃＃＃</li> </ul> </div> じゃなくて <div class="header"> 　コンテンツ～～～（フロート使ってます） 　<div class="nav"> 　　<ul> 　　　<li>＃＃＃</li> 　　　<li>＃＃＃</li> 　　　<li>＃＃＃</li> 　　</ul> </div> だけですむはずです。 　

caxoxna
質問者

補足

回答ありがとうございます HTMLがデザイン…画像を絶対位置で おいてる部分があるんですが そのことでしょうか… レイアウトが全面背景でその真ん中にコンテンツ、 ナビはその下にwidth100%で横幅を決めないように したいのでheaderの中に全部入れるとできないような 気がします… 普段DTPでWebは殆どしたことがなかったので 拙い説明ですみません 現在ポジションを変更して #contents_area2{ position:absolute; top:250px; width: 870px; min-height:550px; margin: 0 auto; } にしたんですがこのdivが真ん中に 来てくれません… どうすれば良いのでしょう

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する