画面を拡大すると横幅が切れる
- 画面を拡大すると、横幅が880ピクセルの所で右端が切れてしまいます。
- 縮小画像を添付いたしました。拡大すると一番外の背景に指定した赤い画像が表示されません。
- 拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？
- ベストアンサー
画面を拡大すると横幅が切れる
<style type="text/css"> *{ margin:0; padding:0; color:#ffffff; } #global_nav_bg{ background:url(img/nav_area.gif) repeat-x 0 0; } #global_area{ background:url(img/nav_bg.gif) no-repeat top center; } #global_nav{ width:880px; margin:0 auto; } </style> </head> <body> <div id="global_nav_bg"> <div id="global_area"> <ul id="global_nav"> <li>aaa<br />aaaa<br />aaa</li> </ul> </div> </div> </body> </html> 画面を縮小してもきちんと指定通り表示されるのですが、 画面を拡大すると横幅が880ピクセルの所で右端が切れてしまいます。 縮小画像を添付いたしました。 拡大すると一番外の背景に指定した赤い画像が表示されません。 [注意点] ・#navのwidthは外しません。 ・背景は画像です。 拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？ ご教授願います。
- mark28
- お礼率64% (44/68)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
まず、わかりやすいようにDOMで考えて見ます。firefoxをお使いならデフォルトでインストールしていればDOM Inspectorが入っていますので、[ツール]→[Dom Inspector]を起動します。 すると body div section div header h1 #TEXT div section などと見えるはずです。幅やborderは継承されないプロパティですが、親となるブロックの内寸を基準にしますから、 div.sectionで880pxにしていると、その下位にあるdiv.headerは100%といわれると880pxのdiv.sectionのborder辺の内側いっぱいの幅を取ります。 しかし、 div.header{/* 詳細度11 */ background:url(img/black.gif) no-repeat top center; width:880px;margin:0 auto; } div.section{/* 詳細度1 */ background:url(img/red.gif) repeat-x 0 0; width:100%; } というCSSの場合、あなたの下の現象にはなりません。逆ではないですか？ ＞現在、上記コーディングでは、通常時・縮小時はウィンドウの幅いっぱいに 表示されるのですが、？？？？何が？？？？ ＞画面を拡大した時、sectionの背景画像が右端で切れて真っ白になってしまいます。 ということは起きないはずです。 div.section>div.sectionは880pxになりますけど・・ ＞その際、headerの背景に設定した「black.gif」は逆にウィンドウの幅いっぱいに表示されています。 これもおかしい。width800pxと指定しているので880pxより広くならない。 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )でCSSをチェックすると記述間違いが指摘されるかも・・ 書かれているCSSとHTMLだと、あなたが言われる形にはならないはずです。もう一度HTMLとCSSを見直してください。 ちょっとだけテクニックを・・ HTMLが出来上がったら、CSSに div{border:solid 1px blue;} div.section{border-color:red;} div.section{border-color:green;} div.section div.section{border:color:purple;} とか指定して、配置を見てみると良いです。 ＞sectionにposition:fixを設定すると、拡大しても「red.gif」もウィンドウの ＞幅いっぱに表示されるようになるのですが、 fixやabsoluteは使いにくいので極力使わないほうが良いでしょう。 ★背景を前面黒 画像のみ中心に880px; 内容も中心部860px程度 ★ヘッダー部分も100%幅 でしたら 注意・・読みやすいようにタブを全角スペースに置換してあります(以下同様） <body> <div class="header"> <h1>見出し</h1> <p>文章</p> </div> <div class="section"> <h2>見出し</h2> <p>・・・・</p> </div> </body> だけでも良いのです。h1もpもブロックですから実質divと同じですよ!! ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ この場合、 body{ background:url(img/black.gif) no-repeat top center; } div.header{ background:url(img/red.gif) repeat-x 0 0;width:100%; padding-top:4px; /* 赤画像をh1と重ねたくない場合は画像高さ */ } div.header h1,div.header p,div.section{ width:860px;margin:0 auto; } で背景は黒、背景画像は中心に画像の幅 red.gifも画面いっぱい しかし、div.header h1とdiv.header p、div.sectionは860px幅で表示される。 ★不必要にdivを書く事はないように・・・
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
やりたいこと一つ一つについて質問してそれをコピーペーストしていたら完成するまでに何年もかかる。そして一つ変えようとしたら何をしたら良いかわからなくなる。 あなたの画像名からはどれが黒くて赤いのかわからないのです。できるだけファイル名から画像が推測できるものにしておくと良いです。 最初の質問の意味がまったく理解できてないのです。ご自身で width:880px; margin:0 auto; /* 上下が0で左右は自動 */ と指定しておきながら「画面を拡大すると横幅が880ピクセルの所で右端が切れてしまいます。」と書かれている。これは問題ないということですね。だとしたら次の「拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？」の答えは div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ とかになる。 第三者には「拡大しても同じように、指定通り表示されるためにはどうすれば良いでしょうか？」と言われてもあなたの指定したいことと指定されていることが聖子ヴうしているので？？？？？になる。 まず、HTMLの正しい文書構造をお示しください。 【例】 <body> <div class="header"><!-- ヘッダー部分 --> <h1>見出し</h1> <div class="nav">!-- ナビゲーション --> </div> <div class="section"> <h2>本文見出し</h2> <p>・・・段落・・・</p> </div> <div class="footer"> <h2>文書情報(フッター見出し)</h2> </div> </body> その上で、 ・本文は幅広のウィンドウでは両サイドを空けて最大幅1000pxで表示したい ・red_bar_880_10.gif(赤い880px×10pxの画像)を<h1>の背景としてウインドウの幅いっぱいに置きたい とか具体的に誰でもわかるように書いてください。 でないと、何度繰り返しても期待のものは得られません。 ただ、 ★HTMLは文書構造だけを記述すること--デザインは一切考えない--必要なら回答時に言います。 プレゼンテーションをHTMLから解き放つことがスタイルシートの目的ですから、プレゼンテーションのためにHTMLを書くと失敗する。
お礼
ORUKA1951さん ご返答ありがとうございます。 上記確認いたしました、 順序が悪く申し訳ありません。 一度話を整理いたします。 ------------------------------ ◆html <body> <div class="section"> <div class="header"> <h1>見出し</h1> </div> </div> </body> ◆css body,htm{margin:0;padding:0}/* 詳細度1 */ div.header{background:url(img/black.gif) no-repeat top center;width:880px;margin:0 auto;}/* 詳細度11 */ div.header h1{ color:#ffffff;margin:0;} div.section{background:url(img/red.gif) repeat-x 0 0;width:100%;}/* 詳細度1 */ sectionの背景に設定した「red.gif」をheaderの背景としてウィンドウの幅いっぱいに置きたいです。 現在、上記コーディングでは、通常時・縮小時はウィンドウの幅いっぱいに表示されるのですが、 画面を拡大した時、sectionの背景画像が右端で切れて真っ白になってしまいます。 その際、headerの背景に設定した「black.gif」は逆にウィンドウの幅いっぱいに表示されています。 headerにはwidth:880pxを設定しているのでそのせいだと思いますが。 sectionにposition:fixを設定すると、拡大しても「red.gif」もウィンドウの幅いっぱに表示されるようになるのですが、他の文字などと被さってしまう恐れがあるため得策ではありません。 または、sectionの背景をflashで表示させてしまい、headerの背景をpositionでその上に置くという方法もありますが、できればflashなしで解決したく思います。 以上、長々と申し訳ありませんでした。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞赤い画像ですが、デザイン上、bodyに設定できません。 ・・・【中略】・・・ ＞※理由はbodyには別の背景画像を設定するからです。 なら全体を<div class="section">で囲む。 <body> <div class="section"> <div class="header"> <h1>見出し</h1> <div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div> ・・・・ </div><!-- body>div.section//end --> body,htm{margin:0;padding:0}/* 詳細度1 */ body{ div.header{background:url(img/nav_bg.gif) no-repeat top center;}/* 詳細度11 */ div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ div.header div.nav ul li{display:block;list-style:none;・・・}/* 詳細度24 */ div.section{background:url(img/nav_area.gif) repeat-x 0 0;}/* 詳細度1 */ div.section div.section{margin:0;background-image:none;} ひとつのbody内に複数の同じsectionが登場しても継承される。 HTMLはプレゼンテーションと切り離すと、先でメンテナンスのときCSSを見るだけで修正できる。いちいち一意セレクタで指定していたらたまりません。 HTMLを書くときはプレゼンテーションは一切考えないこと。CSSを書く段になってどうしても必要ならそのときに、今回のようにHTMLをちょっと手を加える。 プレゼンテーションとHTMLを切り分けることこそ、スタイルシートの最大の目的なのですから、プレゼンテーションにHTMLのマークアップを縛られていたらスタイルシートを使う意味がないです。
お礼
ORUKA1951さん ご返事ありがとうございます。 画面を拡大すると、「nav_area.gif」が途中で途切れてしまいます。 ◆画面通常 ---------------------- （赤） ※画面いっぱい ---------------- （黒） ※画面いっぱい ◆画面縮小 ---------------------- （赤） ※画面いっぱい ---------- （黒） ※画面いっぱい ◆画面拡大 ----------- （赤） ※画面右側が途切れて残りは真っ白 ----------- （黒） ※画面右側が途切れて残りは真っ白 拡大時は画像の右側が途中で切れてしまい、残りが真っ白になってしまいます。 これを拡大しても途切れないよう、画面いっぱいに表示できるようになればと思います。
補足
失礼しました。 上記の、画面通常時と縮小時の（黒）はいっぱいではありません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザインのためにHTMLをマークアップしようとするからそうなる。 HTMLをプレゼンテーションの負担から開放するためにスタイルシートはある。・・これ忘れてませんか？もっと重要かつ忘れてならないこと それを忘れると不必要なリンク先でもないのに不必要なid--こうするとカスケーディングが使えなくてすべて指定しなくてはならない。 やったらめったら<div>ばっかりになってしまう。HTML5になったらどうするんでしょう。 *{margin:0;padding:0;color:#ffffff;}←こんなことするとブラウザデフォルトのすべてのmargin,paddingを指定しなおさなくてはならない。colorは継承されるプロパティなので全称セレクタではなく親要素に指定すべきです。たとえばbody{color:white;}とか。 <body> <div class="header"> <h1>見出し</h1> <div class="nav"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div> ・・・・ とかになるはず・・・ body,htm{margin:0;padding:0}/* 詳細度1 */ body{background:url(img/nav_area.gif) repeat-x 0 0;}/* 詳細度1 */ div.header{background:url(img/nav_bg.gif) no-repeat top center;}/* 詳細度11 */ div.header div.nav{margin:0 auto;width:880px;}/* 詳細度22 */ div.header div.nav ul li{display:block;list-style:none;・・・}/* 詳細度24 */ とか、詳細度が高いと同じ要素であっても優先されますし、先で同じ要素が登場しても詳細度を上げればそこだけ上書きできる。id(一意セレクタ)のように詳細度を高くしすぎるとそれもままならず、いちいち設定しなきゃならない。
お礼
ORUKA1951さん ご教授ありがとうございます。 赤い画像ですが、デザイン上、bodyに設定できません。 上記に記したのは、全てコードの一部のサンプルです。 たしかにbodyに赤い画像を設定すると縮小しても画像が途中で切れることがなくなるのですが、 あくまでもbody以外に設定しなければなりません。 ※理由はbodyには別の背景画像を設定するからです。
関連するQ&A
- IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・
XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。 一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。 センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。 ためしに、headとnavだけのスリムな状態にしても同じでした。。。 解決方法に心当たりのある方はお願いします。 【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body> <!-- ********* ヘッダー ******** --> <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div> <!-- ***** nav ****** --> <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div> <!-- ***** main ****** --> <div id="main"><img src="img/main.jpg" /></div> <div id="wrap"> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <br style="clear:both" /> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </body>
- ベストアンサー
- HTML
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- CSS
- 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
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。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
- WinIE5でリストに隙間ができる
WinIE5で下記のCSSを実行すると、なぜか文字の下に隙間が出来てしまいます。 WinIE5.5、WinIE6等では隙間は出来ません。 なにかうまく解決する方法はありませんでしょうか。 よろしくお願いします。 ------------------------------ #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { margin: 0; padding: 0; background: #e0861e; width: 100px; } <div id="nav"> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </div> ------------------------------
- 締切済み
- HTML
- CSSでボックス内の隙間が消えない
MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。 Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。 しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず… ulタグをdivで括り、divのpaddingもmarginも0としています。 お助けください。 ====XHTML===== <div id="nav"> <ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul> </div> ======CSS===== #nav{ width:705px; height:30px; margin:0; padding:0; } #nav ul{ list-style-type:none; margin:0; padding:0; height:30px; } #nav ul li{ display:inline height:30px; margin:0; padding:0; height:30px; } #nav ul li a{ display:block; margin:0; font-size:6px; height:30px; float:left; background:url(../i/g/nav.gif) no-repeat 0 0; text-indent:-5000px; line-height:10px; }
- 締切済み
- HTML
- CSS、IE6-7で要素が消えてしまいます。
CSS初心者です。 過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！ お願い致します。 当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。 シンプルな構造のページのはずなのですが、以下の HTML / CSS で リストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { width: 100%; text-align: center; position: absolute; bottom: 30px; } #nav { position: static; width:700px; height: 50px; text-align:left; margin:0px auto; } html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; } #nav ul li { float:left; width: 140px; } #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; } #nav ul li a:hover { color: #000; background-position: bottom; } .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！
- 締切済み
- CSS
- リスト表示を左に寄せたい
いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト（全体）が左に寄らないので困っています。 できたらボックス（id-=navi）の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ （ちなみに3段組みの一番左のボックスです） 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>
- ベストアンサー
- HTML
- cssで、一枚の画像でロールオーバーができない。
一枚の画像でロールオーバーさせたいのですが、 どうしてもうまくいきません； 全体 幅495px,高さ60px の画像。 幅99x30pxのボタンで、縦2,横5つ並んでいます。 縦１行目に、通常ボタンが横5つ。 縦２行目に、オンマウスボタンが横5つ。 nav1~nav5のボタンに、 通常は、１行目、１つ目のボタンが表示されていて、 オンマウスすると、画像が消えてしまいます。 わかる方、回答お願いします。 ■html <div id="globalnav"> <ul> <li id="nav1"><a href="#">a</a></li> <li id="nav2"><a href="#">b</a></li> <li id="nav3"><a href="#">c</a></li> <li id="nav4"><a href="#">d</a></li> <li id="nav5"><a href="#">e</a></li> </ul> </div> ■css #globalnav{ width:495px; height:30px; margin-left:305px; margin-top:70px; padding:0; } #globalnav ul{ list-style: none; margin:0; padding:0; } #globalnav li{ float:left; width:99px; margin:0; padding:0; text-indent:-9999px; } #globalnav li a{ display:block; text-decoration:none; width:99px; height:30px; background: url(rollover.gif) no-repeat; } /*通常*/ #nav1 a { background: 0 0; } #nav2 a { background: -99px 0; } #nav3 a { background: -198px 0; } #nav4 a { background: -297px 0; } #nav5 a { background: -396px 0; } /*オンマウス*/ #nav1 a:hover { background: 0 -30px; } #nav2 a:hover { background: -99px -30px; } #nav3 a:hover { background: -198px -30px; } #nav4 a:hover { background: -297px -30px; } #nav5 a:hover { background: -396px -30px; }
- ベストアンサー
- その他（プログラミング・開発）
- 【CSS】firefoxで背景が表示されない－ナビゲーション（画像置換リンク）
「li」に背景画像を指定して、ナビゲーションをつくってみたところ・・・ Firefox、Operaで表示されません。 （IEでは表示されます。） ヘッダー左にロゴ（これはどのブラウザでも表示される）、右側にナビゲーションを配置した作りです。 ハックなど色々調べてみたのですが、解決できず・・・。 力をお貸しいただけないでしょうか。 g_nav.gif・・・グローバルナビゲーション一枚画像550px×30px。（上部：ロールオーバー前、下部：ロールオーバー時） 【HTML】 <!--headerここから--> <div id="header"> <!--logoここから--> <div id="logo"> <h1><a href="aaa.html">logo</a></h1> </div> <!--logoここまで--> <!--naviここから--> <div id="nav"> <ul> <li id="nav01"><a href="aaa.html">あああ</a></li> <li id="nav02"><a href="aaa.html">あああ</a></li> <li id="nav03"><a href="aaa.html">あああ</a></li> <li id="nav04"><a href="aaa.html">あああ</a></li> <li id="nav05"><a href="aaa.html">あああ</a></li> </ul> </div> <!--naviここまで--> </div> <!--headerここまで--> 【CSS】 #header{ width:800px; height:70px; margin:0 auto; padding:0; } #logo { width:216px; height:70px; background-image:url(../cmn_img/logo.gif); float:left; } #nav{ width:550px; height:30px; float:right; margin:40px 0 0 0; padding:0; text-indent:-999em; } #nav ul{ margin:0; padding:0; list-style-type:none; } #nav li{ display:inline; } #nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{ display:block; background-image:url(../cmn_img/g_nav.gif); overflow:hidden; float:left; } #nav li#nav01 a{width:110px; height:30px; background-position:0 0;} #nav li#nav02 a{width:110px; height:30px;background-position:-110px 0;} #nav li#nav03 a{width:110px; height:30px;background-position:-220px 0;} #nav li#nav04 a{width:110px; height:30px;background-position:-330px 0;} #nav li#nav05 a{width:110px; height:30px;background-position:-440px 0;} #nav li#nav01 a:hover{width:110px; height:30px;background-position:0 -30px;} #nav li#nav02 a:hover{width:110px; height:30px;background-position:-110px -30px;} #nav li#nav03 a:hover{width:110px; height:30px;background-position:-220px -30px;} #nav li#nav04 a:hover{width:110px; height:30px;background-position:-330px -30px;} #nav li#nav05 a:hover{width:110px; height:30px;background-position:-440px -30px;} 【下記ハック使用】 #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header {display: inline-table;} /* Hides from IE-mac \*/ * html #header {height: 1%;} #header {display: block;} /* End hide from IE-mac */
- 締切済み
- CSS
お礼
ORUKA1951さん ご返事ありがとうございます。 >div.header{/* 詳細度11 */ > background:url(img/black.gif) no-repeat top center; > width:880px;margin:0 auto; >} >div.section{/* 詳細度1 */ > background:url(img/red.gif) repeat-x 0 0; > width:100%; >} >というCSSの場合、あなたの下の現象にはなりません。逆では>ないですか？ 逆ではなく上記の通りです。 W3C的にも問題ないようでした。 ただ、 >body{ > background:url(img/black.gif) no-repeat top center; >} >div.header{ > background:url(img/red.gif) repeat-x 0 0;width:100%; > padding-top:4px; /* 赤画像をh1と重ねたくない場合は画>像高さ */ >} >div.header h1,div.header p,div.section{ > width:860px;margin:0 auto; >} 上記でわかったことですが、 bodyの背景に置いた画像は画面をズームしても、縮小しても、 いつでもウィンドウの幅いっぱに表示されるということでした。 これらをふまえて、横幅いっぱいに表示したいものをbodyに置くことで解決しようと思います。 ためになることを教えていただきありがとうございました。