adressを一番下に表示させたい

質問

スタイルシート・スタンダード・デザインガイドという本を見ながらサイトを作っています。
サンプルを元にいろいろいじっていたらadressが一番下にくるはずなのに一番上に来てしまいます。
どうしたらいいでしょうか。

body {
text-align:center;
background-image:url(images/bg2.gif);
background-color:#ffffff;
}

p.menu {
border: 0;
margin: 0;
padding: 0;
border:0;
color:#ffffff;
position:absolute;
left:50px;
top:50px;
}

p.menu img {
margin:0;
padding:0;
}

p.menu a{
padding:0;
margin:0;
background-color:#ffffff;
}

p.menu a:hover,
p.menu a:active {
background-color:#ffff99;

}

#menu2 {
font-size:0.75em;
margin-bottom:0;
margin-top:50px;
height:90%;
width:197px;
border:solid 1px #ff9999;
position:absolute;
left:50px;
top:100px;
background-color:#ffffff;
}

#menu2 a {
color:#5e8eab;
text-decoration:none;
background-color:#ffffff;
display:block;
width:100%;
line-height:2em
}

#menu2 a:hover {
background-color:#c5e1ed
}

#menu2 span {
color:#c5e1ed;
display:none
}

.contents {
width:580px;
height:90%;
margin-left:0;
margin-right:0;
margin-bottom:0;
background-color:#ffffff;
position:absolute;
margin-top:20px;
left:248px;
top:130px;
border:solid 1px #ff9999;
}

.section {
margin-left:60px;
margin-right:60px;
text-align:left;
margin-top:2em
}

address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:absolute;
text-align:center;
text-valign:bottom;
}

address a {
color:#2d444f;
}

回答No.6

nachi_t · ベストアンサー

4と5で答えた者です。
枠の外の一番下という意味だったのですね。失礼しました。
HTMLの方は4のままで、スタイルシートだけ修正してみましょう。
※5を基準にして説明します。

●修正前
address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:relative;
text-align:center;
text-valign:bottom;
}

●修正後
address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:absolute;
left:0px;
bottom:-30px;
text-align:center;
text-valign:bottom;
}

※5の、「position:relative;」を「position:absolute;」に変更し、「left:0px;」と「bottom:-30px;」を追加しています。

個人的な意見ですが、「<address>」～「</address>」の下に余白がある方が見やすいかと思います。
下記のようにすると簡単に余白を入れられるので、お好みでお試し下さい。

●修正後(下に余白あり)
address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:absolute;
left:0px;
bottom:-50px;
padding-bottom:20px;
text-align:center;
text-valign:bottom;
}

※5の、「position:relative;」を「position:absolute;」に変更し、「left:0px;」と「bottom:-50px;」と「padding-bottom:20px;」を追加しています。

お礼

回答ありがとうございました。
できました！
マイナス、というのもアリだとは初めて知りました。
とても勉強になりました。

どうもありがとうございました。

回答No.5

nachi_t

4で答えた者です。
書き忘れたのですが、4の通りにしただけでは「<address>」～「</address>」は向かって右端に表示されるかと思います。
これを枠線内の中央に表示させたい場合は、スタイルシートを以下のように変更してみて下さい。

address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:relative;
text-align:center;
text-valign:bottom;
}

※「position:absolute;」を「position:relative;」に変更しています。

お礼

回答ありがとうございます。
４の通りにしたところ、本文の枠の一番下に表示されました。
５の通りにしたところ、本文の枠の中の、文の真下に表示されました。

私は枠の外の、ページの一番下に表示させたかったのですがどうもうまくいきません。
もしどうしてもダメなようなら、４の通りにやって妥協しようと思います。

もしまた思いついたら教えてください。
ありがとうございました。

回答No.4

nachi_t

問題はHTMLの方にあるので、スタイルシートは元のままで大丈夫です。

HTMLの「<address>」の直前に、「</div>」が2つありますよね？
2つめの「</div>」を、「</address>」の後に持って来て下さい。
それで問題なく表示されるかと思います。

●修正前
</div>

</div>

<address>
Copyright (C) <a href="mailto:admin@mail.address">Computer Technology Groups</a>. All rights reserved.
</address>

●修正後
</div>

<address>
Copyright (C) <a href="mailto:admin@mail.address">Computer Technology Groups</a>. All rights reserved.
</address>

</div>

回答No.3

mazimekko3

すいませんNo2ですが、ミスってます。

address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:absolute;
bottom:0px;
left:0px;
width:100%;
text-align:center;
}

left:0px;
を指定してください。
絶対指定なのに、left (right)が抜けてます。

お礼

再びありがとうございます。
・・・今度は本文の枠の中の文章のすぐ下に来てしまいました。
ここで質問する前に色々試してみたのですがどうしてもうまくいかず
やっぱり元に戻してやったほうがいいのかなぁ。。

きっとどこかが間違ってるんですよね。もう少し考えてみます。

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

回答No.2

mazimekko3

address {
font-size:0.625em;
font-weight:bold;
font-style:normal;
color:#2d444f;
position:absolute;
bottom:0px;
width:100%;
text-align:center;
}

に変更してください。

お礼

回答ありがとうございます。
試してみましたが、今度はページの真右に表示されました。
他の部分が間違ってるんでしょうか・・・
メインコンテンツ（本文）部分のDIVを絶対位置にしたとたん
adressが真上に来たような気がしたのですが。

わざわざ考えてくださって感謝します。

回答No.1

MAN_MA_RUI

HTMLのソースがなければ分かりません。CSSだけで間違いを探すのはかなり難しいです。

補足

そうなんですね、失礼しました。
テキストはサンプルのままいじってないので気にしないでください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title></title>

<meta http-equiv="description" content="">
<meta http-equiv="keywords" content="">

<link rev="made" href="mailto:">
<link rel="start" href="">
<link rel="contents" href="index.html">
<link rel="prev" href="">
<link rel="next" href="">

<link rel="stylesheet" type="text/css" href="design.css" media="all">
</head>
<body>

<p class="menu"><img border="0" src="images/logo.gif" width="197" height="96" alt=""><img src="images/menu.gif" width="10" height="39" border="0"><a
href="index.html"><img border="0" src="images/home.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="recipe.html"><img border="0" src="images/recipe.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="tech.html"><img border="0" src="images/tech.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="tools.html"><img border="0" src="images/tools.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="books.html"><img border="0" src="images/books.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="about.html"><img border="0" src="images/about.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="bbs.html"><img border="0" src="images/bbs.gif" width="60" height="39" alt=""></a><img src="images/menu.gif" width="10" height="39" border="0"><a
href="mail.html"><img border="0" src="images/mail.gif" width="60" height="39" alt=""></a><img
border="0" src="images/menu_right.gif" width="20" height="39" alt="">
</p>

<div class="contents">

<div class="section">
<h2><img src="ecology_sub01b.gif" alt="エコロジーへの取り組み" width="154" height="17"></h2>

<p>
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
</p>

<p>
地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
</p>

<p>
自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。
</p>

</div>

</div>

<address>
Copyright (C) <a href="mailto:admin@mail.address">Computer Technology Groups</a>. All rights reserved.
</address>

<div id="menu2">
<a href="cate01.htm">エコロジー</a><br>
<a href="cate02.htm">コンピューター</a><br>
<a href="cate03.htm">モバイル</a><br>
<a href="cate04.htm">ショッピング</a><br>
<a href="cate05.htm">お問い合わせ</a><Br>
</div>
</body>
</html>