CSSでcopyright(一番下に表示)

解決済

質問者：kiseki_miracle
質問日時：2004/10/02 15:16
回答数：6件

CSSで段組デザインのwebを作っているのですが、ページの一番下にcopyrightを表示するクラスを作ったのですが、うまくいきません。

<div class="menu">
...
</div>
<div class="main">
....
</div>

ページは↑のような構成になっていて(absoluteで位置指定しています)、
.copy {
bottom : 10px ;
position : absolute ;
}

のようなクラスを作ったところ、スクロールが必要なページの場合、ページの途中にコピーライトが書かれてしまいます。つまり、ページの今見えている部分の一番下にかかれてしまいます。

ページ全体の一番下に書かれるようにするにはどうしたらよいでしょうか？

通報する

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

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： antai
回答日時：2004/10/04 01:05

メニューの長さは一定ですか？

同じメニューならば、たぶんできると思いますが…。
mainに高さを設定してあげればいけると思います。
2つのページを参考までに、それぞれでファイルを作ってみてください。同じスタイルシートでうまくできてると思いますが。(今回メニューの高さを500pxで考えました

<html>
<head>
<title>メインが短い</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="80" border="0" cellspacing="0" cellpadding="0" height="500">
<tr>
<td bgcolor="#990066">　</td>
</tr>
</table>
<div class="main">

<table width="300" border="0" cellspacing="0" cellpadding="0" height="300" >
<tr>
<td bgcolor="#9933CC">　</td>
</tr>
<tr>
<td bgcolor="#990066">　</td>
</tr>
</table>
</div>

<address>コピーライト</address>

</body>
</html>

－－－－－－－－－－－－－－－

<html>
<head>
<title>メインが長い</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<table width="80" border="0" cellspacing="0" cellpadding="0" height="500">
<tr>
<td bgcolor="#990066">　</td>
</tr>
</table>
<div class="main">

<table width="300" border="0" cellspacing="0" cellpadding="0" height="800" >
<tr>
<td bgcolor="#9933CC" height="500">　</td>
</tr>
<tr>
<td bgcolor="#990066" height="300">　</td>
</tr>
</table>
</div>

<address>コピーライト</address>

</body>
</html>

この回答への補足

No4の補足に書いたとおり、main,menuの長さにかかわらず、という方法を考えています。
また、tableを使えばもともとできていたので、tableはデザインには使わずにやりたいのです。

いろいろ検索してみたりしたのですが、やっぱり無理ですかね…

補足日時：2004/10/06 02:00

通報する

- 0
- 件

通報する

No.6

回答者： antai
回答日時：2004/10/06 08:58

前回のテーブルに関しては、わざわざHP作るのも面倒ですし、表示上のダミーでして、テーブルを使ってデザインしてくださいってことではないんですが…。

しかし、メニューの長さが変わるっていうことなら、ちょっと私にはわからないですね。

この回答への補足

すみません。main,subとcopyをtableで分けてるのかと思ってしまいました。

補足日時：2004/10/08 01:35

通報する

- 0
- 件

通報する

No.4

回答者： antai
回答日時：2004/10/03 19:06

No.3です。

メニューとメインはそのままに、コピーだけを変更してみるとできそうかな？HTMLもちょっと変更。

.copy{ position:relative:left:-100px; width:???px}
※幅の値はメインの幅＋100pxでいいと思いますが。
あと、ココにかかれている状況だと、ページのマージンが生きていて微妙に違ったことになるかもしれませんが、その辺はご自分で調整してみてください。

<div class="menu">
...
</div>
<div class="main">
....
　<div class="copy">
　　....
　</div>
</div>

ポイントとしては、メインの中にコピーが入ったってところでしょうか。

あと、どうせ作り直すのなら、コピーライトはHTMLのaddressタグで作ったほうがいいと思いますが。

この回答への補足

この場合ですと、menuのほうがmainより長くなってしまった場合に、copyがmenuにかぶってしまいます。
main,menuの長さにかかわらず常に一番下に表示する方法はないでしょうか？

補足日時：2004/10/03 21:30

通報する

- 0
- 件

通報する

No.3

回答者： antai
回答日時：2004/10/03 12:04

全体の構成がわからないのでなんともいえないところですが、position定義するのを止めて、ページのマージンを左に10px設定しておいたらどうでしょうか。

もしくは、menu、main、copyのpositionはけして、新しく一つ定義したので、ページ全体をくくるとか。

.all {
　position:absolute;left:10px;
}

<div class="all">
　<div class="menu">
　...
　</div>
　<div class="main">
　....
　</div>
　<div class="copy">
　....
　</div>
</div>

この回答への補足

すみません。1の補足、間違ってました。

.main{
left:100;
position:absolute;
}
.menu{
position:absolute;
}

のようにして、左にメニュー、右にメインコンテンツがくるようにして、一番下にコピーライトを書きたかったのです。

↓のような感じです。■の部分がメニュー、□の部分がメインコンテンツです。

■■■□□□□□□□
■■■□□□□□□□
■■■□□□□□□□
■■■□□□□□□□
■■■□□□□□□□
■■■□□□□□□□
=======copy========