CSSがうまくレイアウトできない。。

質問

こんにちは。

この度、ホームページを一新しようとCSSに挑戦中です。
いろいろな書籍等を参考にしながら、やってみているのですが、
出だしでつまずいています。

現在、下記のCSSにて http://www.masudaclub.com/newsite/
でテスト運用中なのですが、ヘッダー部分のロゴと、
その下のメニューがどうしてもずれます。

CSSは書籍のものをベースに改変していったのですが、
部分部分を編集してもいっこうに揃ってくれません。

ご教示願えましたら幸いです。
※CSSを関連部分を載せました。(全文は文字制限で無理でした)

@charset "utf-8";

/* All Layout
-------------------------------------------------*/
body,div,ul,li,h1,h2,p
{
margin: 0;
padding: 0;
}

h1,h2,h3,h4,ul,li,p,address {
font-style: normal;
font-weight: normal;
font-size: 100%;
}

img {
border: 0;
vertical-align: bottom;
}

a {
text-decoration: none;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #b6b5b5;
}
a:active {
color: #000000;
}

body {
font: 62.5% Verdana ,sans-serif;
letter-spacing: 0.2em;
color: #464646;
}

.clear:after {
content: ".";
display: block;
height: 0;
clear :both;
visibility: hidden;
}
.clear {
display: inline-table;
}
/* MacIE begin \*/
* html .clear {
height: 1%;
}
.clear {
display: block;
}
/* MacIE end */

#header,
#contents,
#gnavi ul {
margin: 0 auto;
width: 80em;
max-width: 100%;
min-width: 730px;
text-align: left;
}

/* Wrapper
-------------------------------------------------*/
#wrapper {
text-align: center;
}

/* Header
-------------------------------------------------*/
#header {
padding: 0 0 0 0;
text-align: center;
}

/* Gnavi
-------------------------------------------------*/
#gnavi {
clear: both;
margin: 0 0 0 0;
}
#gnavi ul li {
float: left;
list-style-type: none;
font-size: 1.2em;
}
#gnavi ul li a {
/* float: left;*/
/* display: block;*/
}

#gnavi ul li a:hover {
color: #b0b0b0;
}

回答No.12

abril · ベストアンサー

> CSSを、base.css index.css history.css players.css と分割しました。base.css は全てにおいて使用しているので、全てのページで読み込、各ページにしか使用していないCSSを各ページの名前で新たに分割して作成しました。

どんどん整理されて行きますね。良いことです。メンテナンスの際も効率的だと思います。

> 寝屋川クラブ
> マジシャン
> ミレニアム
> の部分が、
>
> ・寝屋川クラブ
> ・マジシャン
> ・ミレニアム
>
> となるイメージだと思っていたのですが、
> なっていないのでは正常でしょうか？

ここは、最初のコンテンツの状態をそのまま再現する為に、classセレクタで<ul>のリストマークを敢えて「なし」と定義しています。
なので、この表示結果は正しいです。リストマークを付けたいのであれば、以下の様に変更して下さい：
----------------------------------------------------------------------
index.css
----------------------------------------------------------------------
dl#topics dd.contents ul.group {
list-style: none;
}
↓
dl#topics dd.contents ul.group {
list-style-type: disc;←初期値がこれなので、なくてもかまいません。
margin-left: 1.5em;←最初に<ul>のマージンも0に初期化してしまっているので、リストマークを表示させる為には左マージンが有る程度必要になります。ここの値はお好みで加減して下さい（リストマークの位置はブラウザによって若干の違いはありますが、気にする程のものではありません）。
}
----------------------------------------------------------------------

> ＣＳＳの例外表記の件も承知致しました。この場合、ＣＳＳ準拠をうたうのはまずいでしょうか。。

前回お答えした時はhackなので無視して下さい、と書いたのですが、改めて現在のスタイルを見てみると、最初の段階から随分と整理されてコンテンツ全体の幅も708pxでセンタリングする、というレイアウトに落ち着いている様ですので、これであればもうhackを使わずともお望みのレイアウトができる状態ですので、この際、変えてしましましょう。base.css上でのちょっとした継承の入れ替えで済みます。以下の様に変更してみて下さい：
----------------------------------------------------------------------
base.css
----------------------------------------------------------------------
body {
font: 12px "Verdana", sans-serif;
letter-spacing: 0.2em;
color: #464646;
text-align: center;
background: url(../img/background.gif) repeat 0 0;←#wrapperの背景をこちらへ移動。
}
/* Wrapper
-------------------------------------------------*/
#wrapper {
width: 708px;←コンテンツの幅をここで定義して子要素に継承。
margin: 0 auto;
text-align: left;←テキストの左寄せをここで定義して子要素に継承。
}

/* Header, Contents, Gnavi ul
-------------------------------------------------*/
#header,
#contents,
#gnavi ul {
width: 100%;←#wrapperの幅を継承
margin: 0;←708pxという幅一杯で展開される為、左右マージンも0に。
}
※継承関係を視覚的に分かり易くする為、これら子要素の定義の順番を#wrapperの後に移動させています。現在の位置のままでも支障はないですが。
----------------------------------------------------------------------

あと、現在のレイアウトでちょっと崩れてしまっている部分がありますので、そこも修正されると宜しいかと思います：
----------------------------------------------------------------------
base.css
----------------------------------------------------------------------
#link_list{
width: 100%;←削除（理由は後述）
height: 20px;←同上
（以下省略）
}
widthやheightを指定した上でpaddingを併用すると、IE以外ではpadding分が更に幅・高さにプラス、と解釈されてしまいますのでW708pxとH20pxをはみ出す事になってしまいます。ここはブロック要素である<div>でマークアップされているので、長さを明示しなければ幅は自動的に100%と解釈されますし、高さは内包するデータが可変要素であるテキストなので、文字の高さで自動的に広がるのが自然です。更にIE以外では文字サイズが閲覧者側の環境・操作でheightを超える様な大きさで表示されてしまった場合、その分ははみ出してしまいレイアウトが崩れます。
----------------------------------------------------------------------

> 選手データと、違うページを分ける程のデータ量がありませんので、http://dragons.jp/teamdata/players/　のような組みかたで、全て表示できればと考えました。現在どのように実現しようか思案中です。

えーと、これは、

> 現在選手データのコンテンツを移行中で、とりあえずデータは入れてみたのですが、内容として、背番号　名前　となっており。例えば、
> ＊桝田典和 （ますだのりかず）　となっています。
> これを全て選手について、現在のページの、http://www.masudaclub.com/players.shtmlのように揃えたいのですが、やはり、それには、現在のページ同様、テーブルを組む事が最良・最適な方法でしょうか？

こちらをやめて、ということですか？
いずれにせよ、この選手やチームのデータは内容からしても「表」が相応しいと思いますので、マークアップは<table>で構わないと思います。
ちなみに参照先の中○ド○○○ズの選手リストのコンテンツは選手データ毎にdivをひたすら入れ子にして組んでいますが、失礼ながらこちらはあまりスマートな設計ではないですね。リストかテーブルでのマークアップが妥当だと思いますので…<table>でマークアップする事は別に「悪」ではありません、「表」として相応しい内容であればそうすべきです。<div>はそれ自体が論理的意味を持たないブロック要素ですので、他に適切なマークアップの方法があるにも関わらず何でもかんでも<div>でレイアウトすると、逆に「div病」と揶揄されかねないので、注意が必要です。まず適切な論理構造を備えたマークアップありきで、スタイルはそれに付随するもの、という考えを常に頭において設計するのが大切ですね。

ところで、今後もお役に立てるのであれば（時間のある時に）アドバイスをさせて頂くのは構わないのですが、気がつけば1対1での長いスレッドになってしまった様ですので、とりあえずこの場でのお答えはいったん終了させて頂いた方がよろしいかと…
もし差し支えなければ、drufyiさんのブログの方からでもコンタクトを取らせて頂きますが、いかがでしょうか。

お礼

abril様、いつもお世話になっています。
ありがとうございます。

選手紹介以外の分は反映させました。

継承とは奥深いですね。
ご説明を聞いてなるほど！と理解ができるまでのスキルがまだまだ
ありませんが、説明を受け、反映させるとその通りに
ページが反映してくれるので、なんとも面白いと感じています。

私事ですが、インフラの世界で仕事をしていますが、
WEBデザインの世界に惹かれている今日この頃ですｗ

選手紹介の件ですが、ドラ○○ズのような組み方にしたいと思っています。
＃阪神ファンですがｗ

さて、ブログの存在を気づいて頂いてなんともお恥ずかしいやら嬉しいやら。

おっしゃる通り、お世話になりっぱなしでサイトとしては締めた方がよさそうです。

もしよろしければ、ひとまずの完成まではブログに進捗を書こうと思っていますので、
またアドバイス頂ければ幸いです。

ひとまず締めます。
本当にありがとうございました！

回答No.1

abril

拝見したところ、ずれているのはIE6.0上のみの様ですね。
下記の箇所：
----------------------------------------------------------------------
#header,
#contents,
#gnavi ul {
margin: 0 auto;
（以下省略）
}
----------------------------------------------------------------------
を
----------------------------------------------------------------------
#header,
#contents,
#gnavi ul {
margin: 0;
（以下省略）
}
----------------------------------------------------------------------
と、左右マージンを0にしてみて下さい。こちらの環境では#gnaviに関するズレは解消されています。

お礼

早速のご回答ありがとうございます。
実際に評価までして頂いて誠に恐縮です。

早速ご教示の箇所を訂正致しました。

さっそくwwwを通して確認してみたところ、
IE6とFirefoxでもずれてしまいました。
※仰るとおり変更前は
Firefoxではヘッダーとメニューはずれていませんでした。

CSSは、http://www.masudaclub.com/newsite/css/main.css　にて
改行コードが正しく認識して頂けるエディター(例：秀丸)等に
貼り付けて頂ければ全行を確認して頂けるかと思います。

続けてになりますが、ご教示願えれば幸いです。
※ブラウザ依存って難しいですね。。