• 締切済み

透明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

  • CSS、width100％でもできる余白

    CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}

    • ベストアンサー
    • CSS
  • 上部の余白をなくしたいのですが・・・

    Dreamweaver CS5でホームページを作成しています。 デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。 <body> <div id="headWrap"> <div id="header"> <h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1> <ul> <li><a href="#">**</a></li> <li><a href="#">**</a></li> </ul> </div> </div> <div id="menu"> <div id="button"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">HOME</a> </li> <li><a href="#">**</a> </li> </ul> </div> </div> <div id="contents"> <p>id "contents" の内容<!--/#contents--></p> </div> <div id="footer"> <div id="footerMenu"> <ul><li><a href="#">ホーム</a></li> <li><a href="#">**</a> </li> </ul> <address>Copyright &copy; All Rights Reserved.</address> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> CSS部分 * { font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333; } body {background: #FFF url(imges/bg_body.gif) repeat-x left top; margin: 0px; padding: 0px; } a {text-decoration:none; } #headWrap {width: 100%; background: url(imges/bgimgHead.jpg) repeat-x left top; margin: 0px auto; padding: 0px 10px; } #header {height: 90px; width: 850px; margin: 0px auto; } #menu {height: 100px; width: 100%; background: url(imges/bgimgMemu.jpg) repeat-x left top; clear: both; } #button {height: 40px; width: 850px; margin: 0px auto; } #contents {width: 850px; background: #FFF; margin: 0px auto; clear: both; } #footer {width: 100%; background: url(imges/bgimgFoot.jpg) repeat-x left top; margin: 0px; } #footerMenu {margin: 0px auto; width: 850px; } #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; ｝ どうぞよろしくお願いします。

  • 縦型 レスポンシブ対応 多階層プルダウンウンリスト

    www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定（可変でも可）、右は可変　にしたい。 ＜HTML＞ <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> ＜ＣＳＳ＞ ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1）これだと2階層目が上から下までの全幅にならない 2）画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。

    • ベストアンサー
    • CSS
  • 大divの中に小divを配置して回り込ませる方法。

    大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div　clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか？ ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • <div>この余白は・・・

    <div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> 　<div class="title"> 　　<img src="img/title.jpg" width="700" height="75" border="0"> 　</div> 　<div class="main"> 　　<img src="img/main.jpg" width="700" height="375" border="0"> 　</div> 　<div class="menu"> 　　<img src="img/home_a.jpg" width="100" height="35" border="0"> 　　<img src="img/first.jpg" width="100" height="35" border="0"> 　　<img src="img/info.jpg" width="100" height="35" border="0"> 　　<img src="img/order.jpg" width="100" height="35" border="0"> 　　<img src="img/support.jpg" width="100" height="35" border="0"> 　　<img src="img/link.jpg" width="100" height="35" border="0"> 　　<img src="img/question.jpg" width="100" height="35" border="0"> 　</div> 　<div class="area"> 　　<div class="box"> 　　　<h5>AAAAAAAAA</h5> 　　　<img src="img/kari.gif" width="250" height="100" border="0"> 　　</div> 　　<div class="box2"> 　　　<h5>BBBBBBBBB</h5> 　　　<img src="img/kari2.gif" width="250" height="100" border="0"> 　　</div> 　</div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } 　どなたか知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FFにおけるDIVタグ間の隙間について

    たびたびお世話になります。 自分なりにあちこち検索したのですが、解決できるものが見つかりませんでしたので、質問させていただきます。 今回初めてCSSを使ってHPを作成しているのですが、部分的に<DIV>～</DIV>と<DIV>～</DIV>の間に10px程の隙間が発生します。 IE系のブラウザでは特に問題ないのですが、Mozila系で再現されるようです。 どのようなタグを挿入、あるいは削除すれば解決できるでしょうか？ 以下、該当部のタグになります。 【html】 <body> <div id="header"> <a href="http://****.jp/"> <img src="../img/images/images/title.jpg"width="207"height="33"> </a> </div> <div id="topphot1"> <div id="topphot2"> <!-- TOP画像入れ替える時はここのファイルを変更。横711px縦150pxのもののみ --> <img src="../img/topphoto.jpg" width="711px" height="150px" /> <!-- ↑↑↑ --> </div> <div id="q_menu"> <ul class="q_menu"> <li><a href="#"><img src="../img/icon_m.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_s.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_r.gif" width="23" heigh="23" /></a></li> </ul> </div> </div> <div id="m_menu"> <ul class="m_menu_ro"> <li><a href="#" class="bbs"></a></li> <li><a href="#" class="battle"></a></li> <li><a href="#" class="event"></a></li> <li><a href="#" class="hunt"></a></li> </ul> </div> 【css】 #header{ padding:0 auto 0 auto; margin:0 auto 0 auto; background-color:#7fd137; color:#ffffff; width:800px; height:33px; } #topphot1{ margin:0 auto 0 auto; padding:0 auto 0 auto; position:relative; background-color:#edf2e9; background-image:url(../img/images/HP_03.jpg); background-repeat:no-repeat; background-position:center; color:#696969; width:800px; height:220px; text-align:center; } #topphot2{ margin-top:8px; padding-top:8px; margin-left:auto; margin-right:auto; position:relative; color:#696969; width:711px; height:150px; text-align:center; } #q_menu{ position:absolute; left:50px; bottom:10px; } ul.q_menu{ width:69px; height:23px; margin:0px; padding:0px; } ul.q_menu li{ float:left; } 不慣れなもので、タグ自体がちょっと滅茶苦茶なカンジもするのですが…。 aタグ周囲の改行の削除、vertical-alignをbottomに設定するなどでは解消できませんでした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • idかclassか どっちが良いでしょうか？

    A.htmlページ <div> <ul><li>A</li><li>B</li><li>C</li></ul> </div> B.htmlページ <div> <ul><li>A</li><li>B</li><li>C</li></ul> </div> の様に各ページが同じHTMLで、各ページで別画像にする場合、 どの様なCSSで書いていますか？ また、理想ですか？　何故そうしますか？ ページ数＝各画像数がこれより多い場合や管理面も含めてご回答をお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ パターン１ <div class="nav" id="nav1"> <ul><li>A</li><li>B</li><li>C</li></ul> </div> /* 共通CSS */ .nav{height:200px; width:600px; background:no-repeat 50% 50%;} #nav1{background-image:url(～A.jpg);}/* A.html用 */ #nav2{background-image:url(～B.jpg);}/* B.html用 */ #nav3{background-image:url(～C.jpg);}/* C.html用 */ パターン２-１ <div id="nav1"> <ul><li>A</li><li>B</li><li>C</li></ul> </div> /* 共通CSS */ #nav1,#nav2,#nav3 {height:200px; width:600px; background:no-repeat 50% 50%;} #nav1{background-image:url(～A.jpg);}/* A.html用 */ #nav2{background-image:url(～B.jpg);}/* B.html用 */ #nav3{background-image:url(～C.jpg);}/* C.html用 */ パターン２-２ #nav1/* A.html用 */ {height:200px; width:600px; background:url(～A.jpg) no-repeat 50% 50%;} #nav2/* B.html用 */ {height:200px; width:600px; background:url(～B.jpg) no-repeat 50% 50%;} #nav3/* C.html用 */ {height:200px; width:600px; background:url(～C.jpg) no-repeat 50% 50%;}

    • ベストアンサー
    • CSS
  • <div>と<div>の隙間を無くす方法

    ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？ また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか？ とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header"> 　　 　<div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa--> 　　　　<div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;

    • ベストアンサー
    • CSS
  • IE6,IE7だとメニューが写真の裏に表示される

    こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }

  • cssのみ使用したプルダウンメニュー

    はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する