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

締切済

質問者：caxoxna
質問日時：2014/03/18 16:36
回答数：2件

サイトを作成してるのですが透明divの下に長い余白ができてしまう【HTML・CSS】

opacityを使って背景色を透過、文字は透過しないで
コンテンツを配置する方法
（http://detail.chiebukuro.yahoo.co.jp/qa/question …）を
参照して組んだのですがこの透明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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/03/20 19:41

それでも・・・何をされたいかがさっぱり不明。

透明なブロックと言うのが、そもそもわかりません。
例えば、次のように説明していただくとわかります。
・本文内のナビゲーションを本文の開始位置と同じ高さからはじまるようにしたい。
・ナビゲーションは半透明の白の背景にしたい。
というのでしたら、スタイルシートは
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">

＿</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">

＿</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>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/03/18 18:21

＞top:-550px; /550pxできっちり合うはずなのですが5pxほどずれます /

ずれません。きちんと-550px移動してます。
8.1 ボックスの寸法( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　relativeでなくabsoluteのほうが確実です。relativeだと、その要素が本来あった位置--スペースが残るため、後続の要素はそれが移動していないとして配置されます。
9.3.1 位置決め方式の選択: 'position'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　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>
だけですむはずです。

この回答への補足

回答ありがとうございます
HTMLがデザイン…画像を絶対位置で
おいてる部分があるんですが
そのことでしょうか…

レイアウトが全面背景でその真ん中にコンテンツ、
ナビはその下にwidth100%で横幅を決めないように
したいのでheaderの中に全部入れるとできないような
気がします…
普段DTPでWebは殆どしたことがなかったので
拙い説明ですみません

現在ポジションを変更して

#contents_area2{
position:absolute;
top:250px;
width: 870px;
min-height:550px;
margin: 0 auto;

}

にしたんですがこのdivが真ん中に
来てくれません…
どうすれば良いのでしょう