トップページの横幅を画面いっぱいに表示させたい。

締切済

質問者：kanaflan
質問日時：2013/05/20 20:57
回答数：2件

トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。
色々試してみたのですがどうしてもできません。
よろしくお願いします。
<body>
<div class="back_color">
<div class="wrapper">
<p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p>
</div>
</div>

<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>
<p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p>
</div>
</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;
}

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2

回答者： ORUKA1951
回答日時：2013/05/24 10:08

ごく簡単な例をHTML4.01strictとHTML5で上げておきます。

ウィンドウ幅は、スマホの480px以上だと追随します。幅広ディスプレイでは1200px幅で中央
★ウィンドウ幅を変化させて確認
白文字なので印刷では適用されません。印刷プレビューで確認
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA
　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
HTMLには文書構造しか書かない!!

★タブは＿に置換してあるので戻すこと!!
[HTML4.01]
<!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 http-equiv="Content-Style-Type" content="text/css">
＿<style type="text/css" media="screen">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ページタイトル</h1>
＿＿<p>メッセージ</p>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>本文記事</p>
＿</div>
＿<div class="footer">
＿＿<ul>
＿＿＿<li id="top"><a href="index.html">top</a></li>
＿＿＿<li id="profile"><a href="profile.html">profile</a></li>
＿＿＿<li id="audition"><a href="audition2.html">audition</a></li>
＿＿＿<li id="news"><a href="news.html">news</a></li>
＿＿＿<li id="contact"><a href="mail.html">mail</a></li>
＿＿＿<li id="link"><a href="link.html">link</a></li>
＿＿</ul>
＿＿<address>00000000000000</address>
＿</div>
</body>
</html>

[HTML5]
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">

<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1>ページタイトル</h1>
＿＿<p>メッセージ</p>
＿</header>
＿<section>
＿＿<h2>本文見出し</h2>
＿＿<p>本文記事</p>
＿</section>
＿<footer>
＿＿<ul>
＿＿＿<li id="top"><a href="index.html">top</a></li>
＿＿＿<li id="profile"><a href="profile.html">profile</a></li>
＿＿＿<li id="audition"><a href="audition2.html">audition</a></li>
＿＿＿<li id="news"><a href="news.html">news</a></li>
＿＿＿<li id="contact"><a href="mail.html">mail</a></li>
＿＿＿<li id="link"><a href="link.html">link</a></li>
＿＿</ul>
＿＿<address>00000000000000</address>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございました

通報する

お礼日時：2013/05/29 18:25

No.1

回答者： ORUKA1951
回答日時：2013/05/21 09:28

そもそも矛盾しているような

＞トップページの横幅を画面いっぱいに表示させたいのですが、
最も多い1024px幅やスマホじゃはみ出るし、1680pxとかの幅広ディスプレイじゃいっぱいにならないし。

　HTMLもCSSも煩雑で複雑で、詳しく見る気になりません。本人ですら分からないのですから・・

　基本的には
html,body要素のmargin,paddingを0とした上で、ルート要素はウィンドウ幅を参照しますから、幅をwidth:100%にする。
　IMG要素は置換インライン要素ですから、画像サイズに依存するのでスタイルシートでこりらその要素に変えて親ブロックのサイズを参照する。CSS3でよければbackground-sizeを利用できます。--その画像(images/ｘｘｘ.jpg)が背景だったらそうすべきですが、後方互換を考えるならIMG要素でも仕方ないでしょう。
　ナビゲーションは、その上で%指定すると親ブロック(直近のstaticでないコンテナブロック)の幅に追随させることが出来ます。
　なお、IEには互換モードがありますから、必ず標準モードで動作するようDOCTYPEを記述してください。