http://www.apple.co.jp/の様に、

どんなウインドーサイズでも、
1)トップ・センターにリンク画像のテーブルが配置され
 (上記サイトでいうと、”ホットニュース〜アップルについて”あたり)
2)その下にwidth=”500” height=”200”のテーブルをウインドウの中央に置き、
3)3行位のテキスト(コピーライト等のサイト注釈)を
  ウインドウのボトムセンターに表示される
様なページを作りたいと思っています。

2)と3)のテーブルをwidth=”100%” height=”*”のテーブルで囲み、
2)のテーブルを <td valign=middle>
3)のテーブルを <td height=”80” valign=bottom>
に設定すると、2)の天地が必要以上に広がって、3)がスクロールしないと見れません。
3)のテーブルがウインドーサイズの天地をある程度上下させても下部に常に表示されるような
レイアウトをするにはどうしたらいいでしょうか?

すみませんが、HTML初心者なので、分かり易い説明をお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/03/24 23:08:21
  • 終了:--

回答(4件)

id:procsh No.1

procsh回答回数77ベストアンサー獲得回数02004/03/24 23:44:40

ポイント10pt

こちらから実際にAppleのサイトでベースとしているCSSファイルをDLできますよ(^-^)

今後の学習の参考になると思いますので、是非見てみて下さい。

id:cony

なるほど、ありがとうございます。

私は現在OS9なので、いずれこちらのサイトも拝見して学習したいと思います。

ただ、今回の回答はこのサイトをには無さそうですので、質問を続行させて頂きます。

2004/03/24 23:59:52
id:miyamakuwagata No.2

miyamakuwagata回答回数66ベストアンサー獲得回数02004/03/25 09:40:30

ポイント40pt

URLはダミーです。

実際にHTMLを組んでみました。

これで多分いけると思います。

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>

<html lang=”ja”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>

<title>こんな感じでしょうか?</title>

</head>

<body bgcolor=”#FFFFFF” text=”#000000” marginwidth=”0” marginheight=”0” leftmargin=”0” topmargin=”0”>

<table border=”0” cellspacing=”0” cellpadding=”0” height=”100%” width=”100%”>

<tr height=”50”>

<td valign=”top” align=”center”>

<!--ヘッダのリンクボタンたち始まり-->

<table border=”0” cellspacing=”3” cellpadding=”3”>

<tr align=”center” bgcolor=”#cccccc”>

<td>リンク</td><td>リンク</td><td>リンク</td><td>リンク</td><td>リンク</td>

</tr>

</table>

<!--ヘッダのリンクボタンたち終わり-->

</td>

</tr>

<tr>

<td valign=”middle” align=”center”>

<!--センターのテーブル始まり-->

<table border=”0” cellspacing=”0” cellpadding=”0” height=”200” width=”500”>

<tr>

<td bgcolor=”#FF0000” align=”center”>センターの500×200pixのテーブル</td>

</tr>

</table>

<!--センターのテーブル終わり-->

</td>

</tr>

<tr height=”50”>

<td valign=”bottom” align=”center”>ボトムのコピーライト部分</td>

</tr>

</table>

</body>

</html>

id:cony

ありがとうございます。上記のHTMLは希望のレイアウトです。しかし、実際自分の希望のHTMLに変換したところ、センターテーブルとリンクボタンの間に大きな間隔が出て、テーブルが2/3位下に表示されてしまいます。

(以下HTML)この原因は何でしょう?

<title>こんな感じでしょうか?</title>

</head>

<body bgcolor=#ffffff text=#000000 marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>

 

  リンク リンク リンク リンク  

センターの500×200pixのテーブル

ボトムのコピーライト部分

</body>

</html>

2004/03/25 11:27:57
id:uselessowl No.3

uselessowl回答回数22ベストアンサー獲得回数02004/03/25 10:02:27

ポイント10pt

う〜ん…。画像サイズが大きいとか?

後は、スタイルシートを使ったらレイアウトしやすいかと。

アップル社のサイトのソースを見てみると、javascriptも使ってました。これが鍵を握ってるのかも。

id:cony

画像サイズは全て指定値の原寸で作成していますので、通常のデスクトップモニターなら、かなり

天地左右の余白が出るハズなのです。

すみません。スタイルシートが鍵だとすると、まだその辺りが勉強不足なので速攻理解できないかも・・。

2004/03/25 11:32:49
id:yamagi3 No.4

yamagi3回答回数4ベストアンサー獲得回数02004/03/25 11:30:31

ポイント40pt

URLはダミーです。

2)と3)のテーブルだけでなく1)のテーブルも含めてwidth=”100%” height=”100%”のテーブルで囲み、

1)のテーブルを<td valign=top>( 1)のテーブルの高さが分かっているならば指定する)

2)のテーブルを<td valign=middle>

3)のテーブルを<td height=”80” valign=bottom>

とすれば解決できると思います。

id:cony

有り難うございます。

上記で回答頂いた例と同じですね。

上記に掲載させていただいたHTML内で、1)のテーブル部分の高さも指定しているのですが、余計な空白が下に入ってしまいます。

・・・・と一度返事を書かせて頂いたのですが、謎が解けました!!

上記に私が記述したHTMLでは

1)の高さ指定を、1)が内包した2つそれぞれのtableタグ内のみで高さ指定を

していたのですが、1)部分をくくる全体のタグにも高さ指定を

しなければいけなかったのですね。どうも初歩的なヌケの様ですね・・・。(汗)

でも解決できてスッキリ嬉しいです。ありがとうございました。

2004/03/25 12:20:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません