- 締切済み
floatしたdivの高さを画面いっぱいにした際の質問です。
下記のTIPSを利用してfloatさせたdivを画面いっぱいの高さに表示したいのですが、 FireFoxだとうまく表示されますが、IEだとものすごく縦長のページとして認識されてしまいます。 (div#catsideが長く表示されてしまうようです） IEでもうまく表示させるにはどうすればいいでしょうか。 もしこのTIPSではなく別のTIPSで同じ表示が可能でしたらそちらを教えていただければ幸いです。 よろしくお願いいたします。 ※デザイン上添付の画像のようにレイヤー化する必要があるため、z-indexは必須です。ここが邪魔しているのかなとも思うのですが・・・ ＜HTML＞ <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> ＜CSS＞ div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul , div#catsidemenu ul li{ 略 } div#catSidePhotoBg{ background:url(images/sidebarbg.png) repeat-y; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }
- soari
- お礼率100% (5/5)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
いいえ、dreamweaverとfirefox IE6で確認しましたが、画像とは程遠いものでした。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> でやりましたが、手に負えません。。
報告します： 提示された画像と、コーディングによる表示結果の関連性がわからず、手がつけられませんでした。
お礼
報告ありがとうございます！ すごく急いでいるのでとてもありがたいです。 コーディング上は添付画像と同じような結果が得られたということでしょうか？ 内容を書いてある部分などはごっそり省いてあるのですが、ダミーでも入れたほうがいいのでしょうか？ 画像に関しては、z-indexの関係上このようにレイヤー表示するため、 position:rerative;およびz-indexが必須であるという参考で出しました。 表示させたい結果はcatsidemenu(およびその中いっぱいに表示されるcatsidePhotoBg）、catbodyが 画面いっぱいの高さに表示される状態です。
関連するQ&A
- ヘッダーのみ固定について
ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ margin: 0px; padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>
- ベストアンサー
- HTML
- CSSのposition:fixed;に関する質問です。
position:fixed;で画面下部に固定表示させたdivの中にメニュー画像を入れているのですが、 表示領域・窓サイズがこのdivより小さくなった場合、 ある大きさ以下からスクロールバーを表示させることは可能でしょうか？ 現状画面右端からどんどん消えていってしまいます。 下記がソースになります。 ＜HTML＞ <div id="wrapper"> <div id="main"> 割愛 </div> <div id="topmenu"> <ul> <li id="topmenu01"><a href="">link01</a></li> <li id="topmenu02"><a href="">link02</a></li> <li id="topmenu03"><a href="">link03</a></li> <li id="topmenu04"><a href="">link04</a></li> <li id="topmenu05"><a href="">link05</a></li> </ul> </div> </div> ＜CSS＞ div#wrapper{ z-index:100; background:url(images/bg.png) no-repeat left top; width:1004px; margin:0 auto; } div#topmenu{ position:fixed; bottom:0; vertical-align:bottom; margin:0 auto; overflow:hidden; width:1105px; height:332px; display:block; } div#topmenu ul{ margin:0 auto; overflow:hidden; position:relative; top:-120px; /* 略した部分の要素に関連して上にあげています*/ } div#topmenu ul li{ float:left; position:relative; } div#topmenu ul li a{ display:block; }
- 締切済み
- 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
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- 【CSS】li要素をfloatした際のブラウザ表示
はじめまして。 現在CSSでwebサイトを作成しています。 ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。 思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。 お手数おかけしますが、どなたかご教授お願いします。 ■参考 【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。
- ベストアンサー
- CSS
- ブロック表示すると重なってしまいます！！
下記のｃｓｓとHTMLでWEBサイトを昔作りました 上部に■いねずみ色のブロックを並べて表示しその下に左に 縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる 形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり 何かブロックを足そうとするとブロックが重なってしまい、 上手くできませんでした。 どのようにすればうまく行きますか？教えて下さいよろしくお願いします。 /* mycss.css */ html { background-color: aqua; height: 100%; } body{ height: 100%; font-family: Verdana, Arial; font-size: 14px; } body > #container{ height: auto; } #container { min-height: 100%; height: 100%; width: 90%; margin: 0 auto; padding: 0 10px; background-color: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5); } #header { width: 100%; height: 80px; background: skyblue; border-radius: 20px; } #menu{ margin-bottom: 15px; overflow: hidden; } #main{ overflow: hidden; margin-bottom: 15px; } #contents{ float: left; width: 25%; font-size: 14px; } #contents ul { margin-bottom: 15px; padding: 10px; } #contents dl{ border-bottom: 10px; border-top: 2px solid #ccc; } #contents dd{ border-top: 2px solid #ccc; } #contents ul>li>a{ text-decoration: none; } #contents ul>li:hover { background: orange; } #sidebar { float: right; width: 70%; } #sidebar ul>li { float: left; width: 230px; height: 25px; font-size: 13px; text-align: center; padding: 4px; background: #ffd8ff; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #sidebar ul>li:hover { background: #ddd; } #sidebar ul>li>a{ text-decoration: none; display: block; } #footer{ font-size: 12px; color: #ccc; text-align: center; border-top: 1px solid #ccc; padding: 10px 0 20px; } #menu ul>li { float: left; width: 120px; height: 25px; font-size: 13px; text-align: center; padding: 2px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } #menu ul>li:hover { background: #ddd; } #menu ul>li>a{ text-decoration: none; display: block; } ----------以下HTML------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta chraset="shift-jis"> <title>ああああ</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <div id="container"> <div id="header"> <h1>テストページ<A></h1> </div> <div id="menu"> <h2>便利リンク</h2> <ul> <li><a href="">Google</a></li> <li><a href="">Youtube</a></li> <li><a href="">【amazon】</a></li> </ul> </div> <div id="main"> <div id="contents"> <dl> <dt>検索エンジン・リアルタイム</dt> <dd> <ul> <li><a href="">CEEK.JP</a></li> <li><a href="">Google</a></li> <li><a href="">buzztter</a></li> </ul> </dd> </dl> <dl> <dt>SNS/検索エンジン/メール/質問サイト</dt> <dd> <ul> <li><a href="">Facebook</a></li> <li><a href=""">Excite</a></li> <li><a href="">Baidu</a></li> </ul> </dd> </dl> </div><!-- #contents --> <div id="sidebar"> <ul> <li><a href=""_blank">BOOK・OFF Online</a></li> <li><a href="" target="_blank">イーブックオフ</a></li> <li><a href="">infoseekニュース</a></li> </ul> </div><!-- #sidebar --> </div><!-- #main --> <div id="footer">Copyright 2018</div> </div><!-- #container --> </body></html>
- ベストアンサー
- CSS
- floatすると親要素より横にずれてしまいます
#contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li> </li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li> </li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30"> </td></tr></table></div> </div> </div> </body>
- 締切済み
- HTML
- 幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・
お世話になります。 メニュー（リスト）のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。 マウスオーバーすると、画像がかわるようにしたいです。 どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。 マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。 【HTML】 <div id="gNavi"> <ul> <li id="01"><a href="#">メニュー１</a></li> <li id="02"><a href="#">メニュ－２</a></li> <li id="03"><a href="#">メニュ－３</a></li> <li id="04"><a href="#">メニュ－４</a></li> <li id="05"><a href="#">メニュ－５</a></li> <li id="06"><a href="#">メニュ－６</a></li> </ul> </div> 【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover { background-position: 0 0;} #gNavi li#02 a:hover { background-position: -52px 0;} #gNavi li#03 a:hover { background-position: -123px 0;} #gNavi li#04 a:hover { background-position: -228px 0;} #gNavi li#05 a:hover { background-position: -321px 0;} #gNavi li#06 a:hover { background-position: -414px 0;} （何か、他に必要な情報があれば、言ってください！）
- ベストアンサー
- CSS
お礼
親要素(この場合catwrapper)にもpositionを設定することで回避出来ました！ ありがとうございました。
補足
画像のような背景色などは指定していませんでしたので、再添付いたします。 よろしくお願いいたします。 クリアCSSは添付していませんが、YUIベースのものを使用しています。 因みに、FireFoxでは問題がなく、IE7のみ表示がおかしくなるようです。 **** 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" /> <title>無題ドキュメント</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="catwrapper" class="cl"> <div id="catsidemenu" class="cl"> <div id="catSidePhotoBg"> <div id="catSidePhoto"> <span>サイドバー写真</span> </div> </div> <ul> <li><a href="menu01">menu01</a></li> <li><a href="menu02">menu02</a></li> <li><a href="menu03">menu03</a></li> <li><a href="menu04">menu04</a></li> <li><a href="menu05">menu05</a></li> </ul> </div> <div id="catbody"> 略 </div> </div> </body> </html> **** style.css **** html,body { margin: 0; padding: 0; height: 100%; } div#catwrapper{ background:#e6e6e4; overflow: hidden !important; overflow: visible; min-height: 100%; height: auto !important; height: 100%; width:1004px; z-index:-100; } div#catwrapper div#catSidePhotoBg , div#catwrapper div#catsidemenu{ float:left; padding-bottom: 32767px !important; margin-bottom: -32767px !important; padding-bottom: 0; margin-bottom: 0; overflow:hidden; height: 100%; } div#catsidemenu{ height: 100%; width: 400px; } div#catsidemenu div#catSidePhoto{ display:block; width:217px; height:800px; overflow:hidden; } div#catsidemenu ul { display:block; margin:0 0 0 230px; padding:300px 0 0; background:#FF9900; } div#catsidemenu ul li{ display:block; width: 400px; margin:5px 0; } div#catSidePhotoBg{ background:#33CC00; width:257px; display:block; position:relative; z-index:150; overflow:hidden; } div#catSidePhoto{ background:#006600; display:block; width:217px; overflow:hidden; } div#catbody{ width:auto; padding:90px 0 0; margin:0 0 0 420px; height:100%; text-align:left; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; }