HPを作っているのですが、そのページ内の1番下に画像を
表示させたいのですが、どうしたらいいですか?
どうしても、ちょっとだけ下に空白ができてしまうんです。
もし、最下段に表示する方法がありましたら教えてください。

A 回答 (1件)

背景画像を隙間なく一番下にくっつけたい という解釈でOKでしょうか。



CSSでbodyに margin:0; padding: 0; を指定した上で
background: url(bg.jpg) left bottom no-repeat;
を書いてあげればいいとおもうのですが…

行いたいことが別のことでしたら
もう少し詳細な内容を教えていただけるとたすかります。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q画像を最下段や右端等の位置に%指定で表示したい

ページのサイズが変わっても何時も同じ比率の位置に表示したいので%で位置指定をすれば良いのかと思い<DIV STYLE="position:absolute; top:100%;"> とすると画像の上側が最下段になり画像が見えません。left:100%の場合も同じですが、100%にすると画像の最下段がヘージの最下段や右画像の右端がページの右端にきたり、50%,50%にすれば画像のセンターがページのセンターに来たりページの任意の位置に%指定で表示出来るようなタグの書き方は無いのでしょうか。お教えください。

Aベストアンサー

タグでのやり方はわかりませんがCSSとJavaScriptを組み合わせてできると
思います

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function GO(){

winWIDTH=document.body.clientWidth; //ウィンドウの横幅
winHEIGHT=document.body.clientHeight; //ウィンドウの縦幅
//横の50%に指定
document.all.TEST.style.posLeft=winWIDTH*0.5;
//縦の90%に指定
document.all.TEST.style.posTop=winHEIGHT*0.9;
}
</SCRIPT>
</HEAD>
<BODY onLoad="GO()" onResize="GO()">
<DIV id="TEST" style="position:absolute;">
<IMAGE src="画像のURL">
</DIV>
</BODY>

onLoadはページが読み込まれたときの処理
onResizeはウィンドウサイズが変更されたときの処理
実際にはdocument.all.TEST.style.posLeftやdocument.all.TEST.style.posTopを増減して微調整してください
例)document.all.TEST.style.posLeft=winWIDTH*0.5+3;

タグでのやり方はわかりませんがCSSとJavaScriptを組み合わせてできると
思います

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function GO(){

winWIDTH=document.body.clientWidth; //ウィンドウの横幅
winHEIGHT=document.body.clientHeight; //ウィンドウの縦幅
//横の50%に指定
document.all.TEST.style.posLeft=winWIDTH*0.5;
//縦の90%に指定
document.all.TEST.style.posTop=winHEIGHT*0.9;
}
</SCRIPT>
</HEAD>
<BODY onLoad="GO()" onResize="GO()">
<...続きを読む

Q3カラムのサイドバーの右側が表示されなくなり,左側の一番下に表示される

3カラムのサイドバーの右側が表示されなくなり,左側の一番下に表示されるようになりました

色々試しているのですが、全く解決しません

どなたか助けてください

MT4.2を使っています

よろしくお願いします!

Aベストアンサー

構造がおかしい。

本来は、alpha /本文/、beta /左サイドバー/、gamma /右サイド
バー/、が並列に並んでいるはずが、gammaがbetaの中に含まれてい
る。一番簡単なのは、betaの閉じタグを書き忘れる方法かな。

その影響なのか、header、content、footerが常識的には並列にな
るはずが、footerがcontentの中に含まれてる。なんとか-innerな
んて文書構造的に意味のないボックスが多いから、閉じタグを数え
間違ってるのかもしれないですね。古代のIEを切り捨てて、もっと
シンプルに書くようにすれば勝手に解決するかも。

QCSSでcopyright(一番下に表示)

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

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

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

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

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

Aベストアンサー

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

<html>
<head>
<title>メインが短い</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.main { position:relative;top:-500px;left:100px;margin-bottom:-500px; height:500px; }
address { width:400px; text-align:center;border:solid 1px black;margin-top:10px;padding:5px;}
-->
</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">
<!--
.main { position:relative;top:-500px;left:100px;margin-bottom:-500px; height:500px; }
address { width:400px; text-align:center;border:solid 1px black;margin-top:10px;padding:5px;}
-->
</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>

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

<html>
<head>
<title>メインが短い</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.main { position:relative;top:-500px;left:100p...続きを読む

QCSSを使い、ページの一番下に文字列を表示する方法

CSSを使い、ページの一番下に文字列を表示する方法

過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。
よろしければ教えてください。

外部のCSSファイルに

.comment {
position : absolute;bottom:5px;
font-size:11px;
color: black;
width: 740px;
}

と書き込み、
HTML内で

<div class="comment">一番下に表示したい文字</div>

としました。

すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。
必ずページの一番下に表示するにはどうすれば良いでしょうか。
(JavaScriptとテーブルを使わない方法でお願いします)

よろしくお願いします。

Aベストアンサー

ページの一番下とはbody要素ですか?
もしbodyの子に全体をくくるdivがあるなら、そのdivにposition:relativeを追加してみてください。

Q2段組レイアウト時に意図しない空白が生じる

IE6.0 と firefox での動作が異なって困っています。
HTMLおよびスタイルシートは以下の通りです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.area_body {
width: 80%;
margin: 0 auto;
background-color: yellow;
}


div.area_navi {
float: left;
width: 100px;
background-color: red;
}

div.area_content {
margin-left: 100px;
background-color: blue;
}
div.block1 {
background: green;
}
div.block2 {
background: blue;

}
-->
</style>
</head>
<body>
<div class="area_body">
<div class="area_navi">
aaa<br>
aaa
</div>
<div class="area_content">
<div class="block1">
a <br />
<div class="block2">
b <br />
c <br />
</div>
d
</div>
</div>
</div>
</body>
</html>

IE 6.0 (win) における右段の文字

 a
 b
c
d

firefox (win) における右段の文字

a
b
c
d

となり、IEは左段に文字がある場合に右段の文字が微妙にインデントされてしまいます。

firefoxの結果が自分が望む動作なのですが、原因は何でしょうか?

アドバイスをお願いします。

IE6.0 と firefox での動作が異なって困っています。
HTMLおよびスタイルシートは以下の通りです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.area_body {
width: 80%;
margin: 0 auto;
background-color: yellow;
}


div.area_navi {
float: left;
width: 100px;
background-color: red;
}

div.area_content {
margin-left: 100px;
background-colo...続きを読む

Aベストアンサー

自信なし

Internet Explorer (Windows) CSSバグリスト-フロートの左右にある行の端がずれる
http://cssbug.at.infoseek.co.jp/detail/winie/b151.html


人気Q&Aランキング

おすすめ情報