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.11

abril

> ご教示頂きました通り、h1 の要素を盛り込みました。メニューボタンの各ページの部分にすることにしました。

あ…、ちょっと説明不足だったかもしれませね、すみません。
メニューボタンはあくまで「メニュー」なので、リストのまま、そのままで良かったのです。

サイトの構造の理想としては、
----------------------------------------------------------------------
<h1>現在のコンテンツ（ページ）の内容の大見出しとして相応しい文言</h1>

<ul>
<li>サイトナビ1</li>
<li>サイトナビ2</li>
</ul>

※<h1>～</h1>はこのあたりでも可（必ず<h2>より先）。

<h2>小見出し1</h2>

<p>詳細（<p>に限らずケースバイケースでテーブル、リストなど色々）</p>

<h2>小見出し2</h2>

<p>詳細（同上）</p>
----------------------------------------------------------------------
…の様な感じです、ごく大雑把に言えば。

ただ、現在の内容だと【ホーム】には直接<h1>に適切なものはちょっと見当たらないですよね。
なので、そういう場合は「見えない大見出し」を置いて文章構造を理屈に合う様にしたりします。

<h1 id="home">マスダクラブ公式ホームページ</h1>
とか、<title>タグ内と同じ内容ですが
<h1 id="home">マスダクラブ公式ホームページ | トップページ</h1>
とか、あるいはちょっとした説明でも付けて、
<h1 id="home">マスダクラブ公式ホームページ：○○○で△△△をする□□□のご案内</h1>
とかとか…（すみません、文章のセンスがないのでニュアンスだけ汲み取って下さい）

これを、HTML上の妥当な箇所、今回であれば（後述しますが、実際には表示されないので）いっそ<body>のすぐ下でもかまわないと思いますので、挿入します。

その上で、CSSでは
h1#home {
display: none;
}
と、非表示にするかもしくは、
h1#home {
position: absolute;
text-indent: -9999px;
}
という様に事実上の表示範囲から描画領域を追いやってしまうか、といったスタイルを定義しておけば通常見える部分のコンテンツに変更なく、文書構造を整える事が可能となります。

一度、できあがったコンテンツ（HTMLファイル）を、CSSを参照しないで表示させて見て下さい。そうするとブラウザ上にはHTML文書の構造が素のままで表示されますので、文書構造がきちんと論理的になっており、結果として「その（装飾的要素がない）状態でも」基本的な情報を閲覧者が理解する事ができるか、ということを視覚的にチェックするのに役立ちます。

ということで、

> h1部分のCSSは下記の通りですが、
> h1 {（省略）}

せっかく試行錯誤されたのに申し訳ないのですが、今回は不要ということで…ナビ部分は前回の形に戻して下さい。

> CSSのチェッカーで現在ご教示頂きました、_margin の記述が引っかかります。しかし、これを外せばIEでのメニューボタン行がずれます。
> これは、チェッカーでエラーを出されても気にせずとも良いでしょうか？

元々これはIE6.0が「不正な記述にも関わらず有効なものとして解釈してしまう」というバグを利用したhackですので、CSSの文法チェッカーでは引っかかるのは当然なんですよね。…まあhackとはそういうものなので、例外として無視して下さい。

> <br /><br />と記載すると、無視されるようで、改行されません。１行の空間を空ける為(連続改行)したい場合の推奨される解決策はございますでしょうか？

その場その場で適切なマークアップをした上で、それぞれにマージンによる余白を与える様にしましょう。
例えばこの部分ですよね？
----------------------------------------------------------------------
<dd class="contents">
当チームは、Eグループと決定しました。<br />
同グループの他チームは、下記の通り。(順不同)<br />
<br />
寝屋川クラブ<br />
マジシャン<br />
ミレニアム<br />

<a href=""><img src="./img/design04.jpg" alt="甲子園カップリンク" width="115" height="50" /></a>
</dd>
----------------------------------------------------------------------

上記の内容であれば、パラグラフかリストが妥当かと思いますので、サンプルをいくつか。

(1)対戦相手のグループをリストとし、リストの上下に余白を与える。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<dd class="contents">
当チームは、Eグループと決定しました。<br />
同グループの他チームは、下記の通り。(順不同)

<ul class="group">
<li>寝屋川クラブ</li>
<li>マジシャン</li>
<li>ミレニアム</li>
</ul>

<a href=""><img src="./img/design04.jpg" alt="甲子園カップリンク" width="115" height="50" /></a>
</dd>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
dl#topics dd.contents ul.group {
margin: 1em 0;
list-style: none;
}
----------------------------------------------------------------------

(2)対戦相手のグループをリスト、前後のコンテンツをパラグラフとし、リストにのみ余白を与える。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<dd class="contents">
<p>当チームは、Eグループと決定しました。<br />
同グループの他チームは、下記の通り。(順不同)</p>

<ul class="group">
<li>寝屋川クラブ</li>
<li>マジシャン</li>
<li>ミレニアム</li>
</ul>

<p><a href=""><img src="./img/design04.jpg" alt="甲子園カップリンク" width="115" height="50" /></a></p>
</dd>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
(1)と同じ。
----------------------------------------------------------------------

(3)対戦相手のグループをリスト、前後のコンテンツをパラグラフとし、リストには余白を与えず、前後のパラグラフにclassセレクタを儲けそれぞれ異なる方向へ余白を与える。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<dd class="contents">
<p class="before_list">当チームは、Eグループと決定しました。<br />
同グループの他チームは、下記の通り。(順不同)</p>

<ul class="group">
<li>寝屋川クラブ</li>
<li>マジシャン</li>
<li>ミレニアム</li>
</ul>

<p class="after_list"><a href=""><img src="./img/design04.jpg" alt="甲子園カップリンク" width="115" height="50" /></a></p>
</dd>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
dl#topics dd.contents ul.group {
list-style: none;
}
dl#topics dd.contents p.before_list {
margin-bottom: 1em;
}
dl#topics dd.contents p.after_list {
margin-top: 1em;
}
----------------------------------------------------------------------
※いずれの場合も、<p>/<ul>/<li>のmarginとpaddingは予め四方向"0"に初期化されているので、必要な部分だけの定義で済みます。

「トピックス」にはどういう内容がよく掲載されるのか、によってどのスタイル設定が使いやすいか、というのは変わってきますと思いますので、お好みで検討されて見て下さい。勿論、上記サンプル以外でも、内容に適切なマークアップとそれに付随した妥当なスタイルの組み合わせであればかまいません。

お礼

こんばんは。

早速 色々パターンでやってみました。
ご教示頂きました通りで、うまくレイアウトすることができました。

ただ、
寝屋川クラブ
マジシャン
ミレニアム
の部分が、

・寝屋川クラブ
・マジシャン
・ミレニアム

となるイメージだと思っていたのですが、
なっていないのでは正常でしょうか？
それともまたニヤミス・・・。

おかげさまでトップページはとても綺麗になったと思います。

続けて、チームデータページは作成しました。

重ね重ね申し訳ないと思いつつ・・・・
ノウハウを教えて頂ければ幸いなのですが、、
現在選手データのコンテンツを移行中で、
とりあえずデータは入れてみたのですが、

内容として、

背番号　名前　となっており。

例えば、
＊桝田典和 （ますだのりかず）　となっています。

これを全て選手について、

現在のページの、
http://www.masudaclub.com/players.shtml
のように揃えたいのですが、
やはり、それには、現在のページ同様、
テーブルを組む事が最良・最適な方法でしょうか？

P.S.
少しファイル構成変えまして、
CSSを、base.css index.css history.css players.css と分割しました。
base.css は全てにおいて使用しているので、全てのページで読み込、
各ページにしか使用していないCSSを各ページの名前で新たに分割して作成しました。

パスに変更はありません。

補足

いつもながら、ご丁寧にありがとうございます！！

h1 について・・・
全く見当違いな解釈をしてしまい先走りすいませんでした。
お恥ずかしい限りです。

早速元に戻し、ＣＳＳを適用する前にページに表示されていることを
確認し、適用しました。

ＦＦでも問題無いことを確認しました。

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

さて、<br />　についてですが、ご想像の通りのです。
そのポイントが気になっていました。

本日はいまからこつこつできそうですので、
それより以下のご教示を早速やってみたいと思います。

取り急ぎのお礼を補足からで失礼致します。
それでは失礼致します。

回答No.10

abril

最後の問題点について、検証してみました。
微妙に左右にずれてしまって見える原因は、実際には708pxというコンテンツ幅を超えてしまっている部分がある為です。
現在「トピックス」「スケジュール」「5月」等の見出しとして挿入されている画像ですが、これが実寸でW708pxあります。しかし、先の2つの画像をマークアップした部分のスタイルとして更に1pxのボーダーで囲んでしまってる為、<div id="main" class="clear">～</div>の幅が710pxまで押し広げられてしまっています。

これを修正する方法としては、3通りほど方法が考えられます。
(1)もしどうしても幅一杯の画像を作成して更に1pxのボーダーで囲みたいのであれば、画像の幅を実際には2px減らして706pxとする。
(2)画像としてスライスするのは、実際の文字部分だけにし透過GIFとする。その上で、それぞれの背景色をCSS側で設定する。
(3)見出しを画像にせず、テキストとし、相応しいスタイルをCSSで設定する。

何といってもメンテナンスが楽なのはいちいち画像を作成・修正しなくて済む(3)です。重要な「見出し」部分が画像ではなくテキストとしてコーディングされる事はSEO対策の面でもマイナスにはなりませんし。

それからあと一つ、フォント関連の指定なんですが、ちょっと定義の順番と単位の関係に矛盾が見られる為、継承関係が混乱してしまっている様です。そちらも今後コンテンツを増やして行く前に整理された方が宜しいかと思います。

ということで、下記はフォント関連を修正＋(3)の方法＋ANo.9で挙げたメイン部分のマークアップの一例を使ったサンプルです。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!-- global code start -->←XML宣言は文書の先頭でなければいけないので、これは削除して下さい。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">←システム識別子を訂正してあります。

（以下省略）

<p class="print">最終更新日：
<script type="text/JavaScript">←languageは非推奨、typeは必須です。ただし、できれば外部ファイルで読み込んで下さい（参考：http://openlab.ring.gr.jp/k16/htmllint/explain.html#comment-in-stylescript）
<!--
document.write(y,"/",t,"/",d," (",day[w],") ",h,":",m);
//-->
</script>
</p>

（以下省略）

<div id="main" class="clear">
<h2>トピックス</h2>

<dl id="topics">
<dt>（掲載日付）</dt>
<dd class="period">掲載期間：○○まで</dd>
<dd class="contents">記事</dd>

<dt>（掲載日付）</dt>
<dd class="period">掲載期間：○○まで</dd>
<dd class="contents">記事</dd>
</dl>

<h2>スケジュール</h2>

<dl id="schedule">
<dt class="may">5月　May</dt>
<dd>05/dd　【ほげほげ】スケジュール</dd>
<dd>05/dd　【ほげほげ】スケジュール</dd>

<dt class="jun">6月　June</dt>
<dd>06/dd　【ほげほげ】スケジュール</dd>
<dd>06/dd　【ほげほげ】スケジュール</dd>

<dt class="jul">7月　July</dt>
<dd>07/dd　【ほげほげ】スケジュール</dd>
<dd>07/dd　【ほげほげ】スケジュール</dd>

<dt class="aug">8月　August</dt>
</dl>

</div><!--//main-->

（以下省略）
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
/* All Layout
-------------------------------------------------*/
body {
font: 12px "Verdana", sans-serif;←ベースのサイズを決めておく。個別フォント名は""で囲む。
letter-spacing: 0.2em;
color: #464646;
text-align: center;
}
↑まずはこれをトップに持って来て下さい
body,div,dl,ul,li,h1,h2,p {←何かと便利なのでdlも加えて初期化。
margin: 0;
padding: 0;
}
↑2番目
h1,h2,h3,h4,dl,ul,li,p,address {←同上
font-style: normal;
font-weight: normal;
font-size: 100%;←ベースのサイズを継承
}
↑3番目

※img {}～#header,#contents,#gnavi ul {}はそのまま
※h3 {}、p.border {}はこのサンプルでは不要となりますのでとりあえず削除。

※以下は今回の修正＆サンプルの為に新たに付け足した部分です。
h2 {
margin: 0;
padding: 2px 7px;
border: solid 1px #333333;
font-size: 120%;
font-weight: bold;
color: #ffffff;
text-align:left;
background: #222222;
}

dl#topics {
border: solid 1px #333333;
color: #000000;
background: #cccccc;
}
dl#topics dt {
margin: 0;
padding: 2px 7px;
border-top: solid 2px #333333;
}
dl#topics dd.period {
margin: 0 0 1em 0;
padding: 0 7px;
}
dl#topics dd.contents {
margin: 0;
padding: 2px 7px;
}

dl#schedule {
border: solid 1px #333333;
border-bottom: none;
color: #000000;
background: #cccccc;
}
dl#schedule dt {
margin: 0;
padding: 2px 7px;
font-size: 120%;
font-weight: bold;
color: #ffffff;
border-bottom: solid 2px #333333;
}
dl#schedule dd {
margin: 0;
padding: 2px 7px;
border-bottom: solid 2px #333333;
}
dl#schedule dt.may {
background: #00a0c6;
}
dl#schedule dt.jun {
background: #a9775d;
}
dl#schedule dt.jul {
background: #ff7f00;
}
dl#schedule dt.aug {
background: #f0037f;
}

※以下WrapperからMain Contentsまではそのまま

/* Fnavi
-------------------------------------------------*/
#fnavi {
（省略）
※font-size: 1.2em;のみ削除。もしベースサイズより大きくしたいのであれば%で調整して下さい。
}

※以下はそのまま

/* Footer
-------------------------------------------------*/
（省略）
↓以下を追加。
#footer address {
font-size: 80%;←これでどの環境でもベースサイズより若干小さめのサイズで統一されます。
}
----------------------------------------------------------------------
これで主要モダン・ブラウザでの表示はほぼ同様になります。

(2)の場合は、テキスト部分を画像に置き換えるだけですのでこのスタイルをそのまま流用可能です。(3)の場合は画像が幅一杯になる分、h2とdl#schedule dtのpaddingの定義を削除する必要があります。

いかがでしたでしょうか？とりあえずこのサンプルを試して頂ければ幸いです。
※それでは頑張って下さい。あとは適切なh1を設けるのを忘れずに…。

お礼

・・・感謝しかありません。
ありがとうございました。

ほぼご教示頂いた内容を反映させただけですが、
すっきりとした良い感じになりました。

画像を使わず、画像を使っていた際と同じようになったことに驚きです！

dl,dt,dd のタグは勉強になりました。

現状のところ、XTHMLのタグもチェックOKです。

いよいよ、他のリンクの移行を始めて行きたいと思います。
これまでにご教示頂いた貴重な内容が詰められたCSSになっているので、
無駄にしないように、また少しでも知識にできるように頑張りたいと思います。
＃恥ずかしながら、CSSリファレンスを購入しました。

おっかけきれていませんが、ご教示頂いた内容を
リファレンスで引きながら勉強させて頂いております。

・・・
少しだけ本日解決しきらなかった事をいつもながら書かせて頂きます。。。すいません。。。

1点目です。
ご教示頂きました通り、h1 の要素を盛り込みました。
メニューボタンの各ページの部分にすることにしました。
背景画像を指定し、なんとか溶け込ます事ができました。

h1部分のCSSは下記の通りですが、
h1 {
margin: 0 auto;
background-image: url(../img/menu/menu-h1.png);
padding-top: 14px;
width: 118px;
height: 50px;
max-width: 118px;
max-height: 50px;
font-weight: 800;
font-size: larger;
color: #ffffff ;
text-align: center;
}

IEでは問題なく表示されているのですが、
FFでは、Y軸方向にリピートされているようになってしまいます。
repeat none;　等指定してみましたが、現象変わらずでした。。

２点目です。
CSSのチェッカーで現在ご教示頂きました、
_margin の記述が引っかかります。
しかし、これを外せばIEでのメニューボタン行がずれます。
これは、チェッカーでエラーを出されても気にせずとも良いでしょうか？

３点目です。。
<br /><br />と記載すると、無視されるようで、改行されません。
１行の空間を空ける為(連続改行)したい場合の推奨される
解決策はございますでしょうか？

気づくと３点も。。
すいません。。

回答No.9

abril

遅くまで頑張ってらっしゃる様ですね。
この後しばらく断続的に不在になることもあり、週明けまで詳しい検証はできないかもしれませんが、とりあえず今気付いた点だけを書いておきますね。

> １点目の部分につかっている区切り線ですが、今回採用したXHTML1.0 strictでは、hr要素は非推奨でエラーがでます。
> それならばと、CSSにて borderで回避しようと思いましたが、やはりまだXTHML構文チェックでこのボーダー部分が全てエラーになります。

<hr>はXHTML1.0 Strictでも非推奨ではないですし、borderプロパティがエラーになるのもおかしいので、こちらでも（現在のサイトを）チェッカーにかけてみました。その結果、DOCTYPE宣言に指定されているシステム識別子が正しくなかった様ですよ。

【誤】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
↓
【正】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

多分、DOCTYPEのヴァージョンが正しくなかったせいでXTHML構文チェックの判定も混乱してしまったのではないでしょうか。

ということで、

> 区切り線を引きたい場合、回避策はございませんでしょうか？

については<hr>でもborderプロパティでも用途に合わせてお好みでどうぞ。
※ただ、<hr>はブラウザの解釈が結構異なっていて、CSSでスタイルを定義しても例えば前後の余白等は各ブラウザ間の差異を調整しきれなかったりします。マークアップにもよりますが、適切な要素にborderプロパティを定義した方がやりやすいかもしれません。

> h2 と h3　を使い行いました。h 要素が今ひとつ理解できておりませんが、やはり不細工でしょうか？

h1-h6要素はheading、「見出し」です。
（参考）http://w3g.jp/xhtml/dic/hx
なので<hn>（<h1> - <h6>）の内包可能要素（子要素）はインライン要素とテキストのみです。この為、現在の様にブロック要素である<p>を入れる事はできません。
また、論理構造上、<h1>が出てきていないのに<h2>から始まるというのも妙です。下層ページの構造にもよりますが、適切な箇所に<h1>を設けて下さい。相応しいパターンとしてはサイト名や、カテゴリ名の部分なのですが、ホームのコンテンツだけは下層ページと構造が違っている場合が多いので、<h1>を設ける場所は（この）ホームのみ別扱いにする必要があるかもしれません。
<h1>に続く「トピックス」と「スケジュール」の画像は同格の見出しとして扱い、どちらも<h2>にするのが宜しいかと。そしてそれぞれの下に置くコンテンツは内容からしてリストもしくはテーブルでのマークアップがお奨めですね。

ざっと簡単な構造をアドバイスするとこんな感じでしょうか。
---------------------------------------------------------------------
【リストを使う場合(1)】
---------------------------------------------------------------------
<h1>（サイト名もしくはカテゴリ名等、ページ全体の内容を表すような部分）</h1>
（省略）
<h2>トピックス</h2>

<dl id="topics">
<dt>（掲載日付）</dt>
<dd class="period">掲載期間：○○まで</dd>
<dd class="contents">記事</dd>

<dt>（掲載日付）</dt>
<dd class="period">掲載期間：○○まで</dd>
<dd class="contents">記事</dd>
（以下同様で繰り返し）
</dl>

<h2>スケジュール</h2>

<dl id="schedule">
<dt>月　Month</dt>
<dd>mm/dd　スケジュール</dd>
<dd>mm/dd　スケジュール</dd>

<dt>月　Month</dt>
<dd>mm/dd　スケジュール</dd>
<dd>mm/dd　スケジュール</dd>
（以下同様で繰り返し）
</dl>
---------------------------------------------------------------------
【リストを使う場合(2)】
---------------------------------------------------------------------
（ここまでは(1)と同じ）
<h2>スケジュール</h2>

<dl id="schedule">
<dt>月　Month</dt>
<dd>
<ul>
<li>mm/dd　スケジュール</li>
<li>mm/dd　スケジュール</li>
</ul>
</dd>

<dt>月　Month</dt>
<dd>
<ul>
<li>mm/dd　スケジュール</li>
<li>mm/dd　スケジュール</li>
</ul>
</dd>
（以下同様で繰り返し）
</dl>
---------------------------------------------------------------------
【テーブルを使う場合】
---------------------------------------------------------------------
<h1>（サイト名もしくはカテゴリ名等、ページ全体の内容を表すような部分）</h1>
（省略）
<h2>トピックス</h2>

<table id="topics" cellspacing="0" cellpadding="0" border="0" summary="トピックス">
<tbody>
<tr>
<th>（掲載日付）<span class="period">掲載期間：○○まで</span></th>
</tr>
<tr>
<td>記事</td>
</tr>

<tr>
<th>（掲載日付）<span class="period">掲載期間：○○まで</span></th>
</tr>
<tr>
<td>記事</td>
</tr>
（以下同様で繰り返し）
</tbody>
</table>

<h2>スケジュール</h2>

<table id="schedule" cellspacing="0" cellpadding="0" border="0" summary="スケジュール">
<tbody>
<tr>
<th colspan="2">（月　Month）</th>
</tr>
<tr>
<td>mm/dd</td>
<td>スケジュール</td>
</tr>
<tr>
<td>mm/dd</td>
<td>スケジュール</td>
</tr>

<tr>
<th colspan="2">（月　Month）</th>
</tr>
<tr>
<td>mm/dd</td>
<td>スケジュール</td>
</tr>
<tr>
<td>mm/dd</td>
<td>スケジュール</td>
</tr>
（以下同様で繰り返し）
</tbody>
</table>
---------------------------------------------------------------------
---------------------------------------------------------------------
【テーブルとリストを使う場合】
---------------------------------------------------------------------
（ここまでは上と同じ）
<h2>スケジュール</h2>

<table id="schedule" cellspacing="0" cellpadding="0" border="0" summary="スケジュール">
<tbody>
<tr>
<th>（月　Month）</th>
</tr>
<tr>
<td>
<ul>
<li>mm/dd　スケジュール</li>
<li>mm/dd　スケジュール</li>
</ul>
</td>
</tr>

<tr>
<th>（月　Month）</th>
</tr>
<tr>
<td>
<ul>
<li>mm/dd　スケジュール</li>
<li>mm/dd　スケジュール</li>
</ul>
</td>
</tr>
（以下同様で繰り返し）
</tbody>
</table>
---------------------------------------------------------------------

> IEでもFFでもよーくみると、width708という幅にうまく収まっていないのです。具体的には写真部分がIEのみ少し左へ、トピックスより下の部分がIE・FF両者で少し右へ。。

こちらについては検証環境の都合で週明けになるかも知れません。おそらくボックスモデルの位置決め及び幅とボーダーの解釈による差ではないかと思いますが。

おまけ：line 43の<img>のwidth及びheightの属性値に"px"が付いてますが、CSS上と異なりHTML上では"px"という単位は使えませんので数値のみに修正して下さい（ここだけそういう書き方になっていたので多分コピペか何かのミスだと思いますが）。

補足

本当にありがとうございます。
昨日は少し帰りが遅くほとんどやることができなかったのですが、
ご教示頂いた宣言の部分を w3c → w3　と変更しアップロードしました。

同じ部分＋JavaScriptの部分でエラーが出てしまっているので、
たぶん書き方の間違いのようなニヤミスだと思いますので、
再度見直しをかけてまずはエラーをなくし、
見出しのご丁寧なご教示、またはお忙しい中検証頂いた内容を
反映させていきたいと思います。
＃img のpx部分も直しました。

本当にお忙しい中ありがとうございました。
取り急ぎ 補足にてお礼を申し上げます。

またご報告させて頂きます。

回答No.8

abril

お役に立てた様で良かったです。

> (２)の方を採用させて頂き、早速アップしました。説明不足で申し訳ありませんでしたが、画像と文字は画像の下位置に想定しておりました。
> IEでは意図通り、FFで間反対になりましたが、このあたりがブラウザの解釈違いと思っています。

最後にここの部分だけ追加回答しておきますね。
現状のCSSの下記の箇所
----------------------------------------------------------------------
#mainContents .main_vis p.logo {
position: absolute;
top: 344;
right: 0;
}
#mainContents .main_vis p.player_name {
position: absolute;
top: 400;
left: 0;
（以下省略）
}
----------------------------------------------------------------------
を
----------------------------------------------------------------------
#mainContents .main_vis p.logo {
position: absolute;
bottom: 0;←基点下0
right: 0;
}
#mainContents .main_vis p.player_name {
position: absolute;
bottom: 0;←同上
left: 0;
（以下省略）
}
----------------------------------------------------------------------
に変えてみて下さい。環境に左右されず、ロゴは右下端、選手名は左下端に表示される筈ですので。

では頑張ってコンテンツ作りに励んで下さいね。

お礼

abril様、本当にありがとうございます。

帰宅後少し寝てしまい、今までまたやってしまいました。。

今まで頂いたご教示を一点ずつ反映し、サーバでの確認を行って
今日はとりあえず一端とめようかと思います。

FFでのセンタリングはabril様のおっしゃるとおりで、解決致しました。ありがとうございます。

最後にと言って頂いていて、また質問してしまうのは誠に恐縮なのですが・・・。

くだらない内容も含めて３点にもなっってしまいます。。

１点目ですが、
おかげさまでだいぶとイメージが固まり、現在の状態になっています。
http://www.masudaclub.com/newsite/

ご教示頂きました領域の２分割をしたところ、載せようとしている情報が
354pxでは厳しいことが分かり、フルの708pxでいくことにしました。
少し自分でやってみようと、色々やりましたが、実現できた方法が、
h2 と h3　を使い行いました。
h 要素が今ひとつ理解できておりませんが、やはり不細工でしょうか？

２点目ですが、
１点目の部分につかっている区切り線ですが、今回採用したXHTML1.0 strictでは、
hr要素は非推奨でエラーがでます。
それならばと、CSSにて borderで回避しようと思いましたが、
やはりまだXTHML構文チェックでこのボーダー部分が全てエラーになります。
区切り線を引きたい場合、回避策はございませんでしょうか？

３点目ですが、
IEでもFFでもよーくみると、width708という幅にうまく収まっていないのです。
具体的には写真部分がIEのみ少し左へ、
トピックスより下の部分がIE・FF両者で少し右へ。。

やはり書き方がおかしいのでしょうか。

お忙しい中、再度このような質問をして申し訳ございません。
お時間のある時にまたご教示頂ければ幸いでございます。

それでは失礼致します。

P.S.CSSは使用予定のないものを含めサンプル時代のものは極力削除致しました。

補足

補足欄がもうなかったので、違う場所から失礼します。

NO.11に対しての補足ですが、よくよく検討すると、
選手データと、違うページを分ける程のデータ量がありませんので、

http://dragons.jp/teamdata/players/　のような
組みかたで、全て表示できればと考えました。

現在どのように実現しようか思案中です。

２転３転してしまい、申し訳ありません。

回答No.7

abril

> この写真枠の右端部分にhttp://www.masudaclub.com/newsite/img/picture-in-logo.pngの画像を枠に溶け込ませて挿入したい＋その反対にフォントで選手の名前を埋め込みたいと思っているのですが、この div 内に挿入すると、写真枠が下に伸びてしまい、空白部分ができてうまくいけません。

ここで仰っている意味が、<img src="img/player/k.jpg" alt="選手テスト" width="668" height="424" />の写真の領域の右（上？）端に”重ねて”picture-in-logo.pngのロゴを配置、その反対側（つまり写真の領域の左上端）に選手名をテキストで配置したい、ということであれば2種類のやり方が考えられます。

【1】写真を<img>で挿入するのではなく、背景画像として描画する。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
（省略）
<div class="main_vis">
<p class="logo"><img src="img/picture-in-logo.png" alt="ロゴ" width="230" height="80" /></p>
<p class="player_name">選手名</p>
</div>
（省略）
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
#mainContents .main_vis {
height: 424px;←画像を背景にしてしまったので領域の高さを確保
_height: 464px;←IE6.0用hack（上下ボーダーの高さ計40pxをプラス）
margin: 0;
border: 20px #232322 outset;
background: url(../img/player/k.jpg) no-repeat;←選手写真を背景画像に
}
#mainContents .main_vis p.logo {
float: right;
margin: 0;
}
#mainContents .main_vis p.player_name {
font-size: 150%;
font-weight: bold;
※写真の上に載るので少し目立つ様に、ということで…ここのスタイルは見易い様にお好みで調整して下さい。
}
----------------------------------------------------------------------

【2】ロゴ・選手名を絶対位置で指定して画像に重ねる。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
（省略）
<div class="main_vis">
<p class="logo"><img src="img/picture-in-logo.png" alt="ロゴ" width="230" height="80" /></p>
<p class="player_name">選手名</p>
<img src="img/player/k.jpg" alt="選手テスト" width="668" height="424" />
</div>
（省略）
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
#mainContents .main_vis {
position: relative;←子要素にabsoluteを定義する関係で
height: 424px;
_height: 464px;
margin: 0;
border: 20px #232322 outset;
}
#mainContents .main_vis p.logo {
position: absolute;←絶対位置で配置
top: 0;←基点上から0
right: 0;←基点右から0
}
#mainContents .main_vis p.player_name {
position: absolute;←同上
top: 0;←同上
left: 0;←基点左から0
font-size: 150%;
font-weight: bold;
}
----------------------------------------------------------------------
これで全てお約束した分は回答させて頂きましたが、いかがでしょうか？

お礼

ありがとうございました！！

すごいです。。
できました！

(２)の方を採用させて頂き、早速アップしました。
説明不足で申し訳ありませんでしたが、画像と文字は
画像の下位置に想定しておりました。

IEでは意図通り、FFで間反対になりましたが、
このあたりがブラウザの解釈違いと思っています。

あとはメインのコンテンツ部分の領域を頑張って構成したいと思います。
またCSS関連で投稿しているかもしれませんが、
この件につきましては大丈夫と思います。

評価までして頂き、本当にご親切にご教示頂きまして誠にありがとうございました。

回答No.6

abril

> その下をWidthを半分で割った354の領域を二つ作り情報を記載したいと思っています。(トピックス領域と、スケジュール領域)

1点づつで済みません（他の事やりつつ合間に検証しているので…）、上記のご質問の回答です。
----------------------------------------------------------------------
#mainContents #main .colL {
float: left;
width: 100%;←変更
padding: 0;←左余白を削除
}
#mainContents #main .colLL {
float: left;
width: 50%;←変更
（きっかり354pxの領域を固定で確保したいなら"min-width: 220px;"は不要につき、削除）
}
#mainContents #main .colLR {
float: right;
width: 50%;←変更
（同上）
}

※以下は全て削除
/*\*/
* html #mainContents #main .colL {width: 62.5em;} /* For Win IE */
/* */
/*\*/
* html #mainContents #main .colLL {width: 28em;} /* For Win IE */
/* */
/*\*/
* html #mainContents #main .colLR {width: 28em;} /* For Win IE */
/* */
----------------------------------------------------------------------
これでひとまず「（708pxという）Widthを半分で割った354の領域を二つ」作ることはできます。ただし、#main .colLLと#main .colLLのそれぞれのブロックの間は実際には（隙間なくくっつくのではなく）少し空いているべきかと思いますので、この2つのwidthのパーセンテージの値を少な目（49%づつとか、お好みに応じてどうぞ）にするとよろしいかと。

回答No.5

abril

とりあえず先に下記の件だけ回答させて頂きます。

> 1点目のFFでのセンタリングですが、早速編集致しました。少し左よりな感じですが、明らかに変化がありました。

再度拝見しました。Firefoxで「少し左よりな感じ」になっているのは、#wrapperが"width:800px;"なのに対し、#header,#contents,#gnavi ulはそれより少ない"width: 708px;"だからですね。つまり、Firefox等ではそれらの実質のコンテンツ部分に常に92px分の余白が右に出来てしまう為です（試しに一時的に#wrapperに背景色を入れてみると一目瞭然です）。ANo.3で回答したbodyに対する#wrapperとの関係が#wrapper対#header,#contents,#gnavi ulにも当てはまる為ですが、今回は既存のソースをできるだけ活かす様、最小限の修正で行きたいと思いますので、IE6.0とそれ以外の主要モダン・ブラウザとの差をhackで回避させてみました。
----------------------------------------------------------------------
#header,
#contents,
#gnavi ul {
margin: 0 auto;←修正
_margin: 0;←追加（IE6.0のみ適用されるhack）
（以下省略）
}
----------------------------------------------------------------------
これでこちらの環境では完全にセンタリングになりました。

回答No.4

abril

ANo.3中の以下の部分、訂正です。
【誤】
（参考）http://w3g.jp/css/text/text-align/
↓
【正】
（参考）http://w3g.jp/css/text/text-align
最後の”/”は付きません（付けるとNot Foundになります）。失礼しました。

回答No.3

abril

> 熱中してしまってこんな時間までやってしまいました。。

お気持ちよくわかります。試行錯誤しているとあっという間に時間は過ぎて行きますよね。
で、再度編集されたものを改めて拝見させて頂きました。

> IEでは思ったように表示されているのですが、FFでは写真の縁がなぜかおかしい＋センタリングされていません。

【FFではセンタリングされていない】
こちらの解決は簡単です。IEではbodyに定義されている"text-align: center;"の解釈が、実は”間違った実装のされ方をしている為に”#wrapperがウィンドウ・サイズに対してセンタリングされていいるのですが、本来はFirefox等の実装（#wrapperのブロックのレイアウト自体はウィンドウ・サイズに対してセンタリングとはならない）が正しいのです。詳しくは下記コンテンツの「Windows版Internet Explorer 6 のバグ」の項をお読みになって下さい。
（参考）http://w3g.jp/css/text/text-align/

ということで#wrapperのレイアウトを各環境に対応してセンタリングするには、CSSに以下の以下の定義を付け加えて下さい。
---------------------------------------------------------------------
#wrapper {
width:800px;
margin: 0 auto;←追加
}
---------------------------------------------------------------------

【FFでは写真の縁がおかしい】
こちらはちょっと何がおかしいのかよく分からなかったのですが、もしかして：
---------------------------------------------------------------------
#mainContents .main_vis {
margin: 0 0 0 0;
border: 20px #232322 outset;
}
---------------------------------------------------------------------
で定義したボーダーのスタイルがIEとは異なって見える、ということでしょうか？
IEが4辺ともほぼ黒色なのに対し、Firefoxでは上と左の辺がグレーに見えている、ということを仰っていますか？
もしそうであれば、border-styleプロパティで実装される「線の形状の見え方」というのは、値がsolidの場合を除いて、環境によって結構異なります。点線・波線・二重線等でも微妙なスタイルの違いがあるのですが、いずれもバグというわけではなく、元々それぞれの環境（ブラウザ）に依存するものです。特に、このoutsetやinsetなど、線に立体感がつくスタイルは顕著に違いますね。ハイライトの当たり方の解釈が異なる為、結果「色」が変わって見えるのでしょう。
仮に：
---------------------------------------------------------------------
#mainContents .main_vis {
margin: 0 0 0 0;
border: 20px #232322 outset;
border-top-color: #000000;
border-left-color: #000000;
}
---------------------------------------------------------------------
とすれば、Firefoxでの上と左の辺を多少暗めすることも可能ですが、IEの様に黒に近い感じにはなりません。また逆にIE上では立体感が失われのっぺりしたスタイルに変わってしまいます。
ですので、border-styleプロパティによる装飾を使われる場合は各ブラウザの差異を納得の上で行うか、より表示結果の差の少ないスタイルを適用するか、ですね。

残りのご質問の、

> ２この写真枠の右端部分に（略）空白部分ができてうまくいけません。
> その下をWidthを半分で割った354の領域を二つ作り情報を記載したいと思っています。(トピックス領域と、スケジュール領域)

については後ほどまた回答させて頂きたいと思います。

お礼

abril様、ご丁寧にありがとうございます。

1点目のFFでのセンタリングですが、早速編集致しました。
少し左よりな感じですが、明らかに変化がありました。

2点目の枠に関してですが、abril様のご想像通りに思っていました。
なるほど、色合いがブラウザによって異なる為によるものなのですね。
納得です。

アドバイス頂いたようにどちらとも差異がない程度に突き詰めるか、
シェアを優先するかを思案したいと思います。

最後の点もお答えて頂けるとのことで、本当に感謝致します。

本日も帰宅次第、あれやこれやとやり出したいと思います。

＃Webデザイン楽しいですが、やはり難しいですね。
＃Dreamweaverを利用すれば作成中のHTMLとCSSをひもづけて
＃視覚的にCSSを編集することなんてゆうのはできるのでしょうか・・・。

回答No.2

abril

> さっそくwwwを通して確認してみたところ、IE6とFirefoxでもずれてしまいました。

おやそうでしたか。提供されたURLからHTML、CSS、イメージをダウンロードしてこちらのローカル上で再構成した時はIE6.0上では問題ない様に見えたのですが。

ただ、CSSを改めて良く見ましたら少々構成に謎に思える部分がありましたのでまずはイメージされているレイアウトを確認させて下さい。

・コンテンツ全体を囲む#wrapperには特にwidthが指定されておらずセンタリングの定義のみの様ですが、とするとこの#wrapperの存在意義は？コンテンツ全体をセンタリング、という事であればbodyに定義すれば済む事になってしまいますが…。#wrapperで囲む場合は通常、widthの値を某か定義する目的で使用されると思いますので。
・ヘッダーの画像及びグローバル・ナビ部分の実寸が690pxに対し、#header/#contents/#gnavi ulといった主要コンテナ・ブロックの幅がwidth: 80em;/max-width: 100%;/ min-width: 730px;と定義されていますが、このあたりの定義もちょっと意図がわかりかねるところがあります（ちなみに後者2つのプロパティはIEでは実装されていません）。推測するに、質問者様のイメージでは「bodyに対してコンテンツ全体がセンタリング。主要コンテナブロックはその中で固定ではなくリキッドでレイアウト。ヘッダーとグローバル・ナビは690pxで固定。しかし、その下のコンテンツは最小幅730px;/最大幅（bodyに対し）100%の間で（ヘッダーとグローバル・ナビより常に長い幅で）ウィンドウ・サイズに合わせて拡大縮小する。」といったレイアウトでしょうか？

…もしそうであれば多分、各コンテナブロックの幅に関する定義に関してもっと色々な部分を手直ししないと複数の環境で満足の行く結果は得られないかと思います。明日もう一度検証してみます。

もし描いているイメージがこうではないなら、できるだけ具体的なイメージがわかりやすい様に補足して下さい。

お礼

abril 様、ありがとうございます。

熱中してしまってこんな時間までやってしまいました。。

abril様が私のCSSを見て意図不明な部分は、私の知識不足による間違いになります。。
このCSSは参考書を参考にほぼそのまま作成したもので、
それを部分的に編集した為、このようになっています。。
こんな時間までやっておきながら大した進展はないのですが。。

NO.2のご指摘のあたりを少し直すとメニュー部分とヘッダー部分の
ずれが直りました。
しかしながら、確認していない後半部分のCSSはまだ前回のままです。

何点かにはまっていますが。。。
※サイトパスに変更はありません。

メニューまではひとまずこのよな形で、
その下にテレビに見立てた黒枠の中に、写真を表示し、
(写真は後々フラッシュも載せれたらなと思っています)
その下に、
現在は素材からひっぱりましたが、このようなバーカウンタを設置し、
その下をWidthを半分で割った354の領域を二つ作り情報を記載したいと思っています。(トピックス領域と、スケジュール領域)
現在はCSSが理解出来ていない為、よく分からない部分になっています・・・。
すみません説明ができなくて。。

ーーーー
現在できていない？？な点ですが、、
１
IEでは思ったように表示されているのですが、
FFでは写真の縁がなぜかおかしい＋センタリングされていません。

２この写真枠の右端部分に
http://www.masudaclub.com/newsite/img/picture-in-logo.png
の画像を枠に溶け込ませて挿入したい＋その反対にフォントで
選手の名前を埋め込みたいと思っているのですが、
この div 内に挿入すると、写真枠が下に伸びてしまい、
空白部分ができてうまくいけません。

結局夜中の大半を２番の問題に取り組みましたが、
うまい案が思いつかず実現できませんでした。

非常に恐縮ではありませうが、お気づきの点があればご指導頂ければ幸いです。
また、CSS等に誤りがございましたら併せてご指導頂ければ幸いです。

W3CのチェックにてひとまずCSSとXHTMLの構文間違いがないことを
確認しております。

ひとまず失礼いたします。