- ベストアンサー
スタイルシートのレイアウトについて
kaz-5919の回答
自分も前に同じようなことをしようとしたのですが スタイルシートでのheightできないみたいです 何かサイドとメインの下に書きたいのであれば フッターと形で作ればどうですか？ http://css.uka-p.com/
- 参考URL：
- http://css.uka-p.com/
関連するQ&A
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- 高さ指定を動的にする方法
footer部分の高さをmain部分の文章量に応じて、 footer部分の高さを変えたいと思います。 ■main部分の文章量が多く画面がスクロールできる状態は footer部分の高さを200pxにします ■main部分の文章量が少なく画面下に余白ができてしまう場合は footer部分で埋めます header,main,footerの外枠としてcontainerがあります 下記のソースコードがヒントになるかと思い少し変えてやっていますが うまくいきません。 *{ margin:0; padding:0; } html,body{ height:100%; } div#footer{ background-image:url(back.jpg); height:100%; min-height: 100%; } body > #container > #footer { height: auto; } ご指導いただけないでしょうか。 よろしくお願いいたします。
- 締切済み
- CSS
- CSSでの2段組レイアウトでdiv#containerを導入する理由
CSSでの2段組レイアウトでdiv#containerを導入する理由 CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div> </body> また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。 body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。 【例1】コンテナーの「★外」に、フッターがある場合と。 ・「コンテナー(コンテンツ+サイドバー)」 ・「フッター」 【例2】コンテナーの「★中」に、フッターがある場合。 ・「コンテナー(コンテンツ+サイドバー+フッター)」 があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか? そんな感じがします。) ^^ HTML/CSS 初心者なもので。。。よろしくです。 ^^ ---------------------------------------------------------------- 【例1】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> </div> <!--container部分終わり--> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> 【例2】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> </div> <!--container部分終わり-->
- ベストアンサー
- HTML
- CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
- マージンの基点について
以下のような記述にてFirefox、Chromeですと"footer_contents"にマージンを指定しても うまく反映されません。 "footer"を基点としてマージンが適応されるものと考えておるのですが実際はその上の"maincontents_end"もしくは"header"の下部からマージンが適応されてしまっています。IE7ではこのようなことは起こりません。 どなたかご教授いただければ幸いです。 もし足りない情報がある場合、言っていただければ可能な限りお出しします。 ※sidebarとmaincontentsは特殊な枠を使いたいためこのような記述の仕方しています。ややセオリーに反した記述かとも思います。 <body> <div id="header"> <div id="topcontainer"></div> <div id="menu" ></div> <div id="container"> <div id="sidebar_top"> <div id="sidebar_contents"> </div> <div id="sidebar_end"></div> </div> <div id="maincontents_top"></div> <div id="maincontents"></div> <div id="maincontents_end"></div> <!-- end #container --></div> <!-- end #header --></div> <div id="footerbg"> <div id="footer"> <div id="footer_contents"> </div></div></div> <div id="endfooter"></div> </body>
- ベストアンサー
- HTML
- ｃｓｓの記述についておしえてください
ｃｓｓの記述についておしえてください。bodyそしてcontainer次にsidebarまたはmenuと作ったとしてmenuの天地サイズを自動にしてcontainer等のサイズに反映させる事は可能ですか？フロートは分かるのですがサイズの伸縮について分かりません。
- ベストアンサー
- ホームページ作成ソフト
- このようなレイアウトをＣＳＳで記述すると・・・？
恐縮ですが、単刀直入に質問させてください。 図のようなデザインを作りたいのですが、レイアウトと幅に関する部分だけＣＳＳで書いて頂けませんか？ 僕自身勉強して書いてみたのですが、ブラウザによって幅が微妙にズレる事があるようです。 出来れば、そうならないよう記述して頂けると助かります。 どうかよろしくお願いします。 （もちろん、補足要求にもお答えさせて頂きます） ：(id名):幅 高さの順で all :width 740px height 560px header :width 720px height 90px news :width 720px height 30px menu :width 150px height 320px main :width 555px height 370px footer :width 720px height 20px allの中にある全ての枠組み（header,news,menu,main,footer）はそれぞれ他の枠組みと10pxだけ空いているようにしたいです。
- ベストアンサー
- CSS
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(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>
- ベストアンサー
- ホームページ作成ソフト
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
お礼
ありがとうございました。 参考にさせていただきます。