• ベストアンサー
  • すぐに回答を!

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

  • 質問No.2859912
  • 閲覧数275
  • ありがとう数5
  • 気になる数0
  • 回答数6
  • コメント数0

お礼率 98% (351/358)

スタイルシート・スタンダード・デザインガイドという本を見ながらサイトを作っています。
サンプルを元にいろいろいじっていたら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
  • ベストアンサー

ベストアンサー率 66% (10/15)

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;」を追加しています。
お礼コメント
pyupyuo2

お礼率 98% (351/358)

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

どうもありがとうございました。
投稿日時:2007/03/28 02:35

その他の回答 (全5件)

  • 回答No.5

ベストアンサー率 66% (10/15)

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;」に変更しています。
お礼コメント
pyupyuo2

お礼率 98% (351/358)

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

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

もしまた思いついたら教えてください。
ありがとうございました。
投稿日時:2007/03/25 23:06
  • 回答No.4

ベストアンサー率 66% (10/15)

問題は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

ベストアンサー率 38% (74/194)

すいません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)が抜けてます。
お礼コメント
pyupyuo2

お礼率 98% (351/358)

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

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

ありがとうございました!
投稿日時:2007/03/24 09:35
  • 回答No.2

ベストアンサー率 38% (74/194)

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

に変更してください。
お礼コメント
pyupyuo2

お礼率 98% (351/358)

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

わざわざ考えてくださって感謝します。
投稿日時:2007/03/24 01:59
  • 回答No.1

ベストアンサー率 41% (426/1024)

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

お礼率 98% (351/358)

そうなんですね、失礼しました。
テキストはサンプルのままいじってないので気にしないでください。
<!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>
投稿日時:2007/03/24 01:16
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ