締切済み

CSSでcopyright(一番下に表示)

2004/10/02 15:16

CSSで段組デザインのwebを作っているのですが、ページの一番下にcopyrightを表示するクラスを作ったのですが、うまくいきません。 <div class="menu"> ... </div> <div class="main"> .... </div> ページは↑のような構成になっていて(absoluteで位置指定しています)、 .copy { bottom : 10px ; position : absolute ; } のようなクラスを作ったところ、スクロールが必要なページの場合、ページの途中にコピーライトが書かれてしまいます。つまり、ページの今見えている部分の一番下にかかれてしまいます。ページ全体の一番下に書かれるようにするにはどうしたらよいでしょうか？

noname#183335

CSS
回答数6
ありがとう数1

みんなの回答 （6）
専門家の回答

みんなの回答

antai
ベストアンサー率38% (88/227)

2004/10/06 08:58 回答No.6

前回のテーブルに関しては、わざわざHP作るのも面倒ですし、表示上のダミーでして、テーブルを使ってデザインしてくださいってことではないんですが…。しかし、メニューの長さが変わるっていうことなら、ちょっと私にはわからないですね。

質問者

補足 2004/10/08 01:35

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

antai
ベストアンサー率38% (88/227)

2004/10/04 01:05 回答No.5

メニューの長さは一定ですか？同じメニューならば、たぶんできると思いますが…。 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>

質問者

補足 2004/10/06 02:00

No4の補足に書いたとおり、main,menuの長さにかかわらず、という方法を考えています。また、tableを使えばもともとできていたので、tableはデザインには使わずにやりたいのです。いろいろ検索してみたりしたのですが、やっぱり無理ですかね…

antai
ベストアンサー率38% (88/227)

2004/10/03 19:06 回答No.4

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タグで作ったほうがいいと思いますが。

質問者

補足 2004/10/03 21:30

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

antai
ベストアンサー率38% (88/227)

2004/10/03 12:04 回答No.3

全体の構成がわからないのでなんともいえないところですが、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>

質問者

補足 2004/10/03 13:05

すみません。1の補足、間違ってました。 .main{ left:100; position:absolute; } .menu{ position:absolute; } のようにして、左にメニュー、右にメインコンテンツがくるようにして、一番下にコピーライトを書きたかったのです。 ↓のような感じです。■の部分がメニュー、□の部分がメインコンテンツです。 ■■■□□□□□□□ ■■■□□□□□□□ ■■■□□□□□□□ ■■■□□□□□□□ ■■■□□□□□□□ ■■■□□□□□□□ =======copy========

BLUEPIXY
ベストアンサー率50% (3003/5914)

2004/10/03 01:15 回答No.2

<br clear="ALL"> してやるフレームでわけるテーブルでわける（段組する）（COLSPANする）

質問者

補足 2004/10/03 13:03

説明不足でしたが、今回のページはテーブルを使っていたものをもとにCSS化しようとしています。デザインにかかわるところはCSSだけで行うようにしたいのです。

BLUEPIXY
ベストアンサー率50% (3003/5914)

2004/10/02 17:55 回答No.1

単純に、 <div class="copy"></div> を一番最後に書いて、 bottom : 10px ; position : absolute ; は、やめる。

質問者

補足 2004/10/02 21:16

できません。念のため、mainとmenuは以下のような感じで宣言して、段組をしています。 .main{ left:100; position:absolute; } .menu{ left:100; position:absolute; }

関連するQ&A

CSSを使い、ページの一番下に文字列を表示する方法
CSSを使い、ページの一番下に文字列を表示する方法過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。よろしければ教えてください。外部のCSSファイルに .comment { position : absolute;bottom:5px; font-size:11px; color: black; width: 740px; } と書き込み、 HTML内で <div class="comment">一番下に表示したい文字</div> としました。すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。必ずページの一番下に表示するにはどうすれば良いでしょうか。（JavaScriptとテーブルを使わない方法でお願いします）よろしくお願いします。
- ベストアンサー
- HTML
css固定したフッターが本文と重なってしまいます
#all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、ウィンドウを小さくしたり、長い文を書いたりすると、メインの記事がフッターと重なって読めなくなってしまいます。記事が短い時は、ページ全体の下部に、長い時はスクロールした一番下にくるようにしたいです。テーブルのheight指定を使えば同じような効果は得られますが、テーブルの無いレイアウトをやってみたかったので。同じような質問は発見したのですが、いい解答が見つかりませんでした。
- ベストアンサー
- HTML
CSSでdivが縦にはみ出る問題
HTMLとCSSについての質問です <div class="wrapper"> <div class"first"></div> <div class"second"></div> <div class"third"></div> </div> このようなHTMLがあります。その際にfirst,secondのクラスはwrapper内に収まるのですが、最後のthirdクラスのみwrapperクラスから下にはみ出て表示されてしまいます。 thirdクラスもwarpper内に収めたいのですが、どうすれば良いのでしょうか？ちなみに今はレスポンシブのcssを書いていますが、PC版のCSSではしっかりとwrapperクラス内にすべてのdivが収まっています。 CSSは以下の通りです。 .wrapper{ position:relative; } .first{ position:absolute; top: 0; left: 0; } .second{ height: 500px; } .third{ height: 500px; } アドバイスよろしくお願いします。
- 締切済み
- CSS
cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> 　（ width="700"のコンテンツを作りスクロールさせていま）　</div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } 　 #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; }　 #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; }　このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
左メニューをCSSで固定したい
左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。これをフレームを使わずに作ることはできないでしょうか？できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu　　■　main　　　　　　■ ■　　　　■　　　　　　　　　■　　　 ■ 　　　　■　　　　　　　　　■ ■　　　　■　　　　　　　　　■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }
- ベストアンサー
- HTML
[CSS]　常にフッターは下部に表示　IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> 　　　<div id="container"> 　　　　　<div id="main"><p>内容</p></div> 　　　　　<div id="footer">Copyright</div> 　　　</div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げるとその場所のままです。更新をかけると一番下に移動するのですが、これはIE7では無理なのでしょうか？広げたら一緒にフッター部がくっついていってほしいのですが、わかる方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
CSSで背景を多重化する方法
CSSでdivの中の背景を多重化したいと思いまして、なんとかお知恵を拝借できればと思い投稿させていただきました。やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。【html】 <div class="parent"> <div class="bg_upper"> <div class="bg_lower"> <div class="content"> テキスト・・・ </div> </div> </div> </div> 【CSS】 div.parent { position:relative; } div.bg_upper { position:absolute; top:0; left:0; background:url(../images/bg_tl.png) left top no-repeat; } div.bg_lower { position:absolute; bottom:0; right:0; background:url(../images/bg_br.png) right bottom no-repeat; } <div class="content">に対して、height:100pxのように明示的に高さを指定してやるとそれらしくはなったのですが、高さは可変なので使えませんでした。なんとかヒントいただけましたら助かります。よろしくお願いします。
- ベストアンサー
- HTML
CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。次のような「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を表示させたいのですが、どうも下にずれてないようなのです・・・何が原因なのでしょうか？
- ベストアンサー
- HTML
ＣＳＳレイアウト　positionについて
下記のタグにてpositionタグを使って指定した場合ＩＥの文字サイズを変更しるとcopyrightと言うboxがずれてしまいます。ずれない方法はありませんでしょうか？お分かりの方のご回答をお待ちしております。なお簡単なタグを記載してくれると幸いです。 body { 　　　margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; 　　　　　　width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> 　　<TITLE>Test</TITLE> 　　<STYLE type="text/css"> 　　#left { 　　 position:absolute; 　　 top: 130px; 　　 left: 100px; 　　 width: 300px; overflow: scroll; 　　} 　　#main { 　　 position:absolute; 　　 top: 130px; 　　 left: 400px; 　　} 　　#right { 　　 position:absolute; 　　 top: 130px; 　　 left: 700px; 　　} 　　#footer { 　　 position:absolute; 　　 bottom: 0px; 　　 left: 100px; 　　} 　　</STYLE> </HEAD> <BODY> <div id="left"> 　left<br/> <br/> 　left<br/> </div> <div id="main"> 　main </div> <div id="right"> 　right </div> <div id="footer"> 　footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト

CSSでcopyright(一番下に表示)