CSSテクニックコミュの●うまくレイアウトできずに困っています！

初めまして。CSS超初心者です。
独学で勉強しているのですが、なかなか思うように行かず困っています。

どなたかお知恵を貸してください！！

添付イメージのようなレイアウトをしたいと思っていますが、
ヘッダー内の2つのボックスがちゃんとならばなかったり、
全体が左寄せになってしまったり・・・何をどう解決したらいいのかもわからなくて書き込みしてしまいました。
皆様にとっては愚問だとは思いますが、どなたかお知恵を拝借できませんでしょうか。

どこをどう質問したらよいのかもわからないでいます。
いろいろなサイトや本も参考に、あれこれやっているのですが混乱するばかりです。

自分で書いたソースはこんな感じです。

--------------------------------------------
【CSS】
body {
text-align: center;
width: 100%;
}

.header {
height:100px;
background-color:#827264;
margin: auto;
}

.head_logo {
width: 120px;
float:left;
margin:auto;
}

.head_sub {
width: 680px;
float:left;
}

.content {
height:300px;
background-color:#CFCD9F;
border-top:#FFFFFF 2px solid;
margin:0px;
padding:0px;
}

.navi_area {
height:30px;
background-color:#CFB59F;
border-top:#FFFFFF 2px solid;
margin:0px;
padding:0px;
}

.footer {
height:50px;
background-color:#828164;
border-top:#FFFFFF 2px solid;
margin:0px;
padding:0px;
}

【HTML】
<body>
<div class="header">#Header
<div class="head_logo">#logo</div>
<div class="head_sub">#Headline_area</div>
</div>
<div class="content">#Content</div>
<div class="navi_area">#Vani</div>
<div class="footer">#Footer</div>
</body>

--------------------------------------------

どうぞ、よろしくお願いいたします。

コメント(32)

最初
全て
最新の40件

[3] mixiユーザー 08月12日 02:18

背景を考慮したいなら、

<div id="innerheader">
<div class="head_logo">#logo</div>
<div　ｃlass="head_sub">#Headline_area</div>
</div>

みたいな感じで新しいdivで囲んで、そのスタイルに

#innerheader {
width:800px;
margin:0 auto;
}

ってやれば、一応いいんじゃないかなと・・・。
ただ、全体の幅を揃えたいならcontentやnavi_areaなど、すべてのdiv内に同じことをするべきだと思います。

[5] mixiユーザー 08月12日 02:33

body {
text-align: center;
width: 100%;
}

の中にmargin:0 auto;
を加えてあげると横全体が中心、上下がマージン0になります。

.content にclear:both;
を加えると良いかと思います。

簡単にしかチェックしていないのですが、、header内のボックス幅指定を間違えると左並びにならずに下に落ちてしまうので、気をつけて下さい。

[6] mixiユーザー 08月12日 02:36

携帯からなんでソースは記入できませんが、センター寄せにしたい場合は対象のボックスにwidthの設定(pxでもemでも%でも良いのでほしい幅)をし、左右のマージンをautoで設定してあげればセンター寄せで表示できます。
但し、IE5.5やxml宣言を行ったIE6はセンター寄せにはならないので、対処法として親要素(この場合はBodyタグなど)にtext-align:centerを設定してあげればセンターに来るはず。

良く失敗は幅の設定をしてなかったり、XML宣言していて、IE６でブラウザチェックしてるケースが多いかと。。。

[7] mixiユーザー 08月12日 02:54

既に沢山の方がアドバイスして下さっていますが、
初心者さんとのことなので、恐らく意図しているであろうソースを全て記載します。

まず図中の一番外側の黒枠を「.wrap」とし、bodyはブラウザ全体とお考え下さい。
そしてCSS。配置に関わる箇所だけ記載・不要なプロパティは削除しています。

body {
　text-align: center;
}

.wrap {
　width: 800px;
　margin: 0 auto;　//上下marginが0、左右marginがautoという指定です
　text-align: left;　//ボックスの中身は中央寄せにしたくない場合、左に戻します
}

.header {
　height: 100px;
}

.head_logo {
　width: 120px;
　float: left;
}

.head_sub {
　width: 680px;
　float: left;
}

.content {
　height: 300px;
　clear: both;
}

HTMLは、wrapで全体をくくるだけです。
<body>
<div class="wrap">#Wrap
<div class="header">#Header
<div class="head_logo">#logo</div>
<div class="head_sub">#Headline_area</div>
</div>
<div class="content">#Content</div>
<div class="navi_area">#Navi</div>
<div class="footer">#Footer</div>
</div>
</body>

こんな感じで、どうでしょうか。

それと一つ気になったのですが、これらはレイアウトの大元になる
それぞれ名前を持つはずのボックス（div）なので
classではなくidによる指定が一般的だと思うのですが、
classにしていらっしゃるのは何か意図があるのでしょうか？

[8] mixiユーザー 08月12日 03:56

.head_logo のwidth が120px で、 .head_sub の width が680px なので、ブラウザの表示幅が800pxよりも狭くなると .head_sub は .head_logo の右側に回りこめずに下に落ちてしまいます。

もし .head_sub の幅が680pxの固定幅じゃなくてもいいのであれば

.head_sub {
margin-left: 120px;
}

とすれば、ヘッダー内の2つのボックスが並ばない問題は解決するんじゃないかと。あと body の width: 100%; は Firefox とかだと若干ブラウザからはみ出してしまうみたいなので指定しない方がいいと思います。

[9] mixiユーザー 08月12日 07:45

すでにたくさんの方がアドバイスされていますが、
自分も添付イメージをもとにマークアップしてみました。

ポイントは
横幅いっぱいに背景色を敷いている部分とコンテンツ部分を分離し、
コンテンツ部分は背景部分で包みます。

余分な条件として、
高さに依存されないようにしました。
確かに構造部分にはid属性を使うのが一般的かと思うのでそのようにしました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【html】
<body>

<div id="header-wrap">
<div id="header">
<div id="logo">#logo</div>
<div id="headline_area">#headline_area</div>
</div>
</div>

<div id="content-wrap">
<div id="content">#content</div>
</div>

<div id="navi-wrap">
<div id="navi">#navi</div>
</div>

<div id="footer-wrap">
<div id="footer">#footer</div>
</div>

</body>

【CSS】
body{
text-align:center;
}

#header-wrap,
#content-wrap,
#navi-wrap,
#footer-wrap{
width:800px;
margin:0 auto;
text-align:left;
}

#header-wrap{
background-color:#827264;
}

#content-wrap{
background-color:#CFCD9F;
}

#navi-wrap{
background-color:#CFB59F;
}

#footer-wrap{
background-color:#828164;
}

#logo{
width:120px;
float:left;
}

#headline_area{
width:680px;
float:right;
}

#content-wrap{
clear:both;
}

[10] mixiユーザー 08月12日 09:21

＞ルッチさん
ご回答ありがとうございます。
試してみたのですが、Headre部分のみがセンタリングされ、
思うような結果が得られませんでした。
でも、widthを指定すると、きちんとセンタリングできることがわかりましたので、
とても勉強になりました。
ありがとうございます。

[11] mixiユーザー 08月12日 09:23

＞Junさん
「一気に全部かこんじゃって」
というのは、
＃wrapperでということでしょうか？
初歩的な質問ですみません（汗）

[12] mixiユーザー 08月12日 09:25

＞對馬さん
コメントありがとうございます。
試してみます！

[13] mixiユーザー 08月12日 09:26

＞ませうさん
そうなんですか！？ずっと知らずにアンダースコア多用していました。
以後気をつけます。
ありがとうございます。

[14] mixiユーザー 08月12日 09:30

＞のぶさん
コメントありがとうございます。
教えていただいた部分は理解できました。
ありがとうございます。

[15] mixiユーザー 08月12日 10:22

＞みやちんさん
コメントありがとうございます。
そうですね、幅を指定しないと失敗することがわかりました。
ありがとうございます。

[16] mixiユーザー 08月12日 10:31

＞Akinaさん
コメントありがとうございます。
とても、自分のイメージに近い感じになってきました。
１つ違ったのは、色がついている部分は、すべて背景色（背景画像含む）なので、
背景は画面の横いっぱいにしたいという部分です。

うまく説明できずにすみません。
でも、とても勉強になりました。
ありがとうございます。

[17] mixiユーザー 08月12日 10:32

＞ボッチ＠さん
コメントありがとうございます。
細かいところも気を使わないと、いろいろなブラウザに対応できないのですね。
勉強になりました。
ありがとうございます。

[18] mixiユーザー 08月12日 10:49

＞たけたけさん
コメントありがとうございます。
ソースを確認させていただき、とても理解が深まりました。
ありがとうございます。
1つ質問なのですが、
contentとnaviの部分は、800pxの枠外（どう説明したら伝わるでしょうか？汗）も
横いっぱいに背景を同じ色にしたいのです。

よく、海外のサイトなどで見られるような感じなのですが・・・
説明が下手ですみません。

base.cssなどでbodyやすべてのページに関連すること（リンクの色とか背景とか）を指定して、
中身（ヘッダーからフッターまで）のレイアウトを1つのCSSで指定する
という方法で解決できますでしょうか？

[19] mixiユーザー 08月12日 12:18

>>tomobooさん

たけたけさんのソースのうち、、、、
◆「各パーツ-wrap」のwidthを削除して横幅いっぱいにする
◆各パーツ本体に「width」を設定し、センター寄せにする

って方向性はいかが？

[20] mixiユーザー 08月12日 12:33

＞さいとうさん

ありがとうございます！

なんとか解決できました。
皆さんのアドバイスを参考に、出した答えが・・・

---------------------------------------------
【CSS】
body {
　text-align: center;
margin:0px;
padding:0px;
}

#wrap {
　width: 100%;
　margin: 0 auto 0 auto;
　text-align: left;
}

/*ヘッダーエリア*/
#header-wrap{
background-color:#FFFFFF;
text-align:center;
margin: 0 auto;
}

#head {
width: 800px;
background: #FFFFFF;
text-align:left;
}

.head-logo {
width: 120px;
height: 70px;
background-image:url(images/sa.gif);
background-repeat:no-repeat;
float:left;
}

.head-sub {
　float:right;
width:auto;
height:70px;
text-align:right;
}

/*コンテンツエリア*/
#content-wrap{
background-color:#3D7F9F;
text-align:center;
}

.content {
width: 800px;
height: 300px;
background: #3D7F9F;
background-repeat:repeat-x;
text-align:left;
margin:0 auto;
}

/*ナビエリア*/
#navi-wrap{
background-color:#003366;
text-align:center;
margin: 0 auto;
}

.navi {
width: 800px;
height: 30px;
background: #003366;
background-repeat:repeat-x;
text-align:left;
margin:0 auto;
}

/*フッターエリア*/
#footer-wrap{
background-color:#FFFFFF;
text-align:center;
margin: 0 auto;
}

.footer {
width: 800px;
height: 50px;
background: #FFFFFF;
text-align:left;
margin:0 auto;
}

【HTML】
<body>
<div id="wrap">
<div id="header-wrap">
<div id="head">
<div class="head-logo">#logo</div>
<div class="head-sub">#text</div>
</div>
</div>
<div id="content-wrap">
<div class="content">#Content</div>
</div>
<div id="navi-wrap">
<div class="navi">
#Navi </div>
</div>
<div id="footer-wrap">
<div class="footer">
#Footer </div>
</div>
</div>
</body>

-------------------------------
これで、IEではほぼ解決したのですが、
（添付の画像は
　1枚目：Dreamweaverのデザインビュー
　2枚目：IEでのプレビュー　　　　　　　です）
FairFoxでは全体が左寄せになってしまいます。
これは何が原因なのでしょうか？？

また、ヘッダの#textを右下に配置したいのですが、
うまくいきません。

何度も申し訳ありませんが、あと少しでできそうなので、
ぜひぜひ、ご指導お願いいたします！！！！！

[21] mixiユーザー 08月12日 12:53

トピ主さんのソースを借りるとこんな感じかなと思います。
（ざっと書いたので、どこか間違いがあったらすみません）

テキストの入るdivは、px単位でheightを指定していると、
テキストサイズに応じて伸びなくなっちゃうので、
あんまりheightを指定しない方がいいと思います。

あと、それぞれ1ページに一箇所しか使わないであろうところは、
クラスじゃなくてidの方がいいと思います。
--------------------------------------------
【CSS】
body {
text-align: center;
width: 100%;
}

.header {
width: 800px;
height:100px;
background-color:#827264;
margin: auto;
text-align: left;
}

.head_logo {
width: 120px;
float:left;
}

.head_sub {
width: 680px;
float:left;
}

.content {
width: 800px;
height:300px;
background-color:#CFCD9F;
border-top:#FFFFFF 2px solid;
margin:0px;
padding:0px;
text-align: left;
}

.navi_area {
width: 800px;
height:30px;
background-color:#CFB59F;
border-top:#FFFFFF 2px solid;
margin:0px;
padding:0px;
text-align: left;
}

.footer {
width: 800px;
height:50px;
background-color:#828164;
border-top:#FFFFFF 2px solid;
margin:0px;
padding:0px;
text-align: left;
}

.headerWrap,
.contentWrap,
.naviWrap,
.footerWrap {
width: 100%;
margin: 0 auto;
text-align: center;
}
.headerWrap {background: 指定したい背景;}
.contentWrap {background: 指定したい背景;}
.naviWrap {background: 指定したい背景;}
.footerWrap {background: 指定したい背景;}

【HTML】
<body>
<div class="headerWrap">
　<div class="header">#Header
　<div class="head_logo">#logo</div>
　<div class="head_sub">#Headline_area</div>
　</div>
</div>

<div class="contentWrap">
　<div class="content">#Content</div>
</div>

<div class="naviWrap">
　<div class="navi_area">#Vani</div>
</div>

<div class="footerWrap">
　<div class="footer">#Footer</div>
</div>

</body>

[22] mixiユーザー 08月12日 12:55

fxでのセンタリングは
body {
　text-align: center;
margin:0 auto;
padding:0px;
}
でクリアできるかと。

[23] mixiユーザー 08月12日 13:10

自分の書いたところ解決しちゃってましたね（苦笑
今度はFireFoxで問題ですか

[24] mixiユーザー 08月12日 13:15

head にmargin: 0 auto;　がありませんね

#head {
width: 800px;
background: #FFFFFF;
text-align:left;
}

[25] mixiユーザー 08月12日 13:19

>また、ヘッダの#textを右下に配置したいのですが、
>うまくいきません。

CSSで右下という位置指定はできないと思います。
text-align: right; で右だけ指定して、上からの距離はpaddingで取るなどで
対処するしかないのではないでしょうか。
（tableのセル内にしかvertical-alignが効かないので）

[26] mixiユーザー 08月12日 19:41

◆「Firefoxで左寄せなっちゃう」不具合は、#wrap で　text-align: left;　しているせいではないでしょうか？
◆「text右下寄せしたい」の部分は、D8さんの25の手法に一票です。

[28] mixiユーザー 08月12日 22:35

ごめんなさい。
>9 ですが、一部間違いがありました。

#header-wrap,
#content-wrap,
#navi-wrap,
#footer-wrap{
width:800px;
margin:0 auto;
text-align:left;
}

は、

#header,
#content,
#navi,
#footer{
width:800px;
margin:0 auto;
text-align:left;
}

です。

[29] mixiユーザー 08月13日 14:45

面白そう？なので、試しに。。　検証はしていません＾＾；

<div id="header" >　<div class="section">
　<p class="logo">#logo（画像？）</p>
　<div><p>#text</p><p>#text</p></div>　</div></div>
<div id="contents">　<div class="section">
　#Contents　</div></div>
<div id="nav">　<div class="section">
　#Vani　</div></div>
<div id="footer">　<div class="section">
　#Footer　</div></div>

*{ margin: 0; padding: 0 }

#header, #contents, #nav, #footer{
　text-align: center } /* IE centering */
.section{
　width: ○px;
　text-align: left; /* centering 解除 */ }

#header{
　height: 100px;
　background-color: #827264 }
#header .logo,
#header div{ float: left }
#header div{
　width: 680px;
　text-align: right }
#contents{
　height: 300px;
　background-color: #cfcd9f }
#nav{
　height: 30px;
　background-color: #cfb59f }
#footer{
　height: 50px;
　background-color: #828164 }

#contents .section,
#nav .section,
#footer .section{ border-top: 2px solid #fff }

/* clearfix …内容は端折ります */
#header .section:after{ …

[30] mixiユーザー 08月14日 12:49

#textの右下寄せは可能ですよ。
デザイン次第で一工夫必要になるかもしれませんが。

以下サンプル

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#header-wrap {
background: #ccc;
}

#head {
width: 800px;
margin: 0 auto;
}

div.head-sub {
margin-top: -1em;
text-align: right;
}
</style>
</head>

<body>
<div id="header-wrap">
<div id="head">
<div class="head-logo"><img src="http://img.mixi.jp/img/basic/common/mixilogo002.gif" alt="" width="181" height="41" /></div>
<div class="head-sub">#text</div>
</div>
</div>
</body>

[31] mixiユーザー 08月18日 02:03

トピ主さんから解決したのかどうかレスがありませんね。。。。

ログインすると、残り5件のコメントが見れるよ