- ベストアンサー
<adress>をページの一番下に配置するには
こんにちは。 CSSでサイトを作成しているのですが、ページの最後に著作権情報を入れたいのです。 ただ入れるなら最後に<adress>を挿入するだけなのでできるのですが、ページサイズを指定した場合ページの一番下に入れることができません。 abusoluteでいろいろ試しましたがどうもうまくいきません。 （例） ページサイズ８００pxで統一しています。 しかし内容が４００pxしかない為<adress>を最後に入れると４００pxのところで挿入になります。 これを常に８００pxのところで表示させたいのです。 もっと言えば仮にサイズが９００pxになったとしても自動的に最後になるようにできますか？ わかりにくい説明ですがお願いします。
- pinkboy
- お礼率90% (30/33)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>himajin</title> </head> <body> <div style="height:800px;"> <!-- body要素内のaddress要素以外をdivで挟んでCSSを使う。なお、外部CSSを作ってmeta要素でインポートするのが面倒なのでstyle属性で許してね--> <p>あいうえお</p> </div> <address>****@****.com</address> </body> </html> とかやったら普通に出来ましたが...Firefox 1.6a1 [2005111403]
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
<style type="text/css"> <!-- .contents { ～省略～ position:relative; top:0px; left:0px ; } address { position:absolute; bottom:10px; left:10px } --> </style> 高さが決まっているブロックの中でなら、これでいけると思います。
- partita
- ベストアンサー率29% (125/427)
800pxのブロックにborder属性がある場合（罫線で囲んでいる場合など）や、背景画像がある場合は、 <div id="wrap"> <div style="height:785px">内容</div> <address style="height:15px">著作権</address> </div> のように、全体をさらに囲むといいです。 で、#wrapにスタイルを適用。
お礼
回答ありがとうございます。 できました～。 こんなやり方もあるんですね。
#1です。失礼、meta要素じゃなくてlink要素ですね
お礼
回答ありがとうございます。 すいません。言葉足らずでした。<(_ _)> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>例え</title> <style type="text/css"> <!-- .contents { background-color: #FFFFFF; margin: auto; padding: 0px; width: 800px; height:800px; border: 1px solid #000000; text-align:left; } --> </style> </head> <body> <div class="contents"> <h1>例え</h1> <address>住所-住所</address> </div> </body> </html> こんな感じです。 <div class="contents">の一番下に常に<address>をもってきたいのです。 方法はありますか？
関連するQ&A
- CSSを使い、ページの一番下に文字列を表示する方法
CSSを使い、ページの一番下に文字列を表示する方法 過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。 よろしければ教えてください。 外部のCSSファイルに .comment { position : absolute;bottom:5px; font-size:11px; color: black; width: 740px; } と書き込み、 HTML内で <div class="comment">一番下に表示したい文字</div> としました。 すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。 必ずページの一番下に表示するにはどうすれば良いでしょうか。 （JavaScriptとテーブルを使わない方法でお願いします） よろしくお願いします。
- ベストアンサー
- HTML
- 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; }
- ベストアンサー
- HTML
- <table>でセルをきっちり分けるには
最近CSSばかり使ってtableがよくわからないのですが、tableのセルのサイズを挿入する文字の数に限らず常に一定にするにはどんな方法があるでしょうか？ 例えば600pxのtableに2列のセルを入れるにはそれぞれのセルに300pxを指定する方法もありますが、CSSでtableのtdタグに50%のwidthプロパティを指定しても問題ないでしょうか？
- ベストアンサー
- CSS
- CSSでのテキストの下に画像などを配置したい。
CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 （ヘッダーの下に、左のナビと右のメインエリアという構造） テキストの周囲をボーダーで囲んであります。 （TABLEは使っていません） テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ（縦幅）が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか？ とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。
- 締切済み
- その他([技術者向] コンピューター)
- ページのサイズ構成につきまして
1ページのサイズ構成につきまして =================== TOP | =================== メニュー | | | | | 本文 | | | =================== div:フッター | =================== というページ構成を考えています。 4つのブロック構成にわけるのですが、 質問：各ブロックの幅・高さの設定方法について教えて頂きたいのです。 考え1.サイズの絶対数で指定してページを作成するのがいいのでしょうか？ 「Bブロック：width: 500px; 本文ブロック：width：300」 考え2.サイズを%？表示で指定して、ブラウザのサイズに合わせて自動リサイズされるようにする？ ブラウザのサイズに合わせて自動で、サイズ幅が変わるように作ったほうがいいのでしょうか？ ⇒といいますか、全体サイズの何%といった指定が出来るのでしょうか？ 現在では、どちらの考えで作成するほうがいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- テーブルの下に余白を100px作りたいです。
cssで table[summary="test"] { font-size: 0.8em; padding: 0px 0px 100px; } としてるのに、 padding: 0px 0px 100px; だけ適用されないのですが、何故でしょうか？ テーブルの下に余白を100px作りたいです。
- ベストアンサー
- CSS
- CSSでcopyright(一番下に表示)
CSSで段組デザインのwebを作っているのですが、ページの一番下にcopyrightを表示するクラスを作ったのですが、うまくいきません。 <div class="menu"> ... </div> <div class="main"> .... </div> ページは↑のような構成になっていて(absoluteで位置指定しています)、 .copy { bottom : 10px ; position : absolute ; } のようなクラスを作ったところ、スクロールが必要なページの場合、ページの途中にコピーライトが書かれてしまいます。つまり、ページの今見えている部分の一番下にかかれてしまいます。 ページ全体の一番下に書かれるようにするにはどうしたらよいでしょうか？
- 締切済み
- CSS
- CSSのフロートを使ったレイアウト割
CSSのフロートを使ったレイアウト割で質問です。 あるボックス（仮に100px）を真横に並べる時の事ですが、 いつもは<p>なり<div>なりにCSSでフロートleftで詰めていました。 間隔を空けるためにマージンで10pxとったとして 100px+10pxで110pxのものが5つ 550pxの幅になります。 ただ、最後のボックスにはマージンを付けたくありません。 ■がボックス、□が間隔の10pxだとして ｜ バナー ｜ ■□■□■□■□■ ■□■□■□■□■ ■□■□■□■□■ ｜他のコンテンツ｜ こういう風にしたいんです。（この例でいうと540pxにおさめたい） 左と右が端にあって等間隔でそろっている。 どんどん下にも追加していったり消したり、つめていくので 一番右の最後にだけ別のCSSを付けるわけにはいきません。 どんどん左詰めで詰まって行く コンテンツを作りたいのですが、このやり方だと出来ないですよね。 あまり使わないんですが こういう場合って <ul>とか<il>とか使うんですか？ やり方があったら教えて下さい。
- ベストアンサー
- HTML
- 画像とその下にあるテキストの隙間を小さくする方法
ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。 管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。 これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。 この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。 また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。 画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。
- 締切済み
- CSS
- jQueryスライダーをトップページに配置したい
サイトのトップページに、javascriptのスライドショーを配置したいと思っています。 （イメージはこんなスライドです） http://sandbox.scriptiny.com/tinyslider2/ WEBデザインもまだ勉強中でプログラム領域の知識は全くないため、 サンプルコードを公開しているサイトさんでお借りしようと思っています。 例の通りにcssやjsをリンクさせ、スライド自体は上手く行っているのですがレイアウトがうまくいきません。 （中途半端にスライドしたり、画像送りのボタンが表示されなかったり） 問題点として、サンプルのcssの記述と、もともとのサイトのcssがぶつかってしまう（？）ことがあります。 どのサンプルもcssで margin:0;padding:0; がbodyもしくはアスタリスク（*）で全要素に指定されており、 これが元のトップページのcssレイアウトに影響してしまいます。 こういう場合、cssの処理はどうするのが適正でしょうか。 素人のため分かりにくい文章になってしまっておりますが、その際はご指摘いただけましたら幸いです。 宜しくお願いいたします。
- ベストアンサー
- CSS
お礼
回答ありがとうございます。 できました～。 position:relative; top:0px; left:0px ; を入れることで何故そうなるのかはわかりませんが・・・。勉強します。