- ベストアンサー
ホームページのsidebarとcontentの丈（縦幅）を合わせる方法
- Dreamweavercs5を使ってホームページを作成している初心者ですが、sidebar（横20％）とcontent（横80％）の丈（縦幅）を合わせる方法について試行錯誤しています。
- 現在、ヘッダー、sidebar、content、フッターの高さをpxで指定していますが、同じ高さの数値を入れてもピッタリ合いません。余白ができて見た目が悪くなってしまっています。
- パーセンテージ指定を試しましたが、自分がやるとsidebarの高さが変化せず、自動と同じ高さのままです。基本的なことを忘れているのでしょうか？もし良い方法があれば教えていただきたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- スタイルシートのレイアウトについて
こんにちは。 スタイルシートを使ってホームページを作成しているのですが、 わからないことがあり、質問させていただきます。 container body header sidebar main footer の構成をしていて、sidebarとmainは、左右にフロートさせています。 sidebarとmainを特になにも指定していのですが、 Ｑ． mainが上下に長い時は、sidebarもその長さに合わせて長くなり、 sidebarが上下に長い時は、mainもその長さに合わせて長くなる、 そんな仕組みを作りたいのですが、heightを自動にしても、 長くなってくれません。 どのように記述をすると良いのでしょうか？ 教えて下さい。お願いします。
- ベストアンサー
- CSS
- Webに詳しい方に質問です。
写真のように#header,#nav,#content,#contentの中に#col1,#col2,#contentの右横に#sidebar,一番下に#footerとレイアウトしたいのですが、floatを使っても#col2が#col1の下になったり#sidebarが、#contentの右下になったりして崩れてしまいます。 htmlやcssで、どのように記述すればよいでしょうか？
- ベストアンサー
- Windows 7
- ｃｓｓの記述についておしえてください2
cssの記述、xhtmlの作成について教えていただきたいのですがcontainerを箱として考えた場合、その入れ子になるsidebarやcontentの天地（height）を統一したいのですがheightを100％の設定で指定する場合containerのサイズを予め決めてしまえば出来たのでが・・・・これで正解ですか？？？またcontainerのサイズ指定していない場合入れ子になるsidebarなどのheightを揃えるにはどの様にするのが一般的ですか？？
- ベストアンサー
- ホームページ作成ソフト
- CSSで、高さが違う画像を入れ替えるとずれます。
headerに、横は同じで高さが違う画像を入れ替えると、ページのセンタリングがずれます。 <div id="header>は、画像のみです。 indexページの<div id="header>に、840×240の画像を入れて、 会社概要等の他のページの<div id="header>には、840×130の画像を入れると、ページのセンタリングがずれてしまいます。（←headerやmenu、footer等を包括しているdivです。） IE6ではOKなんですが、firefoxで見ると崩れます。 headerの、width・heightの指定をしなくても、 header1、header2と分けて、サイズ指定してもずれます。 どうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- css: IEでsidebarが表示されない
cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar（背景、画像、テキストを含むすべて）がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative; background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px; ist-style: none; width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}
- ベストアンサー
- CSS
- Dreamweavercs5で、headerの左下に、小さな四角が出来
Dreamweavercs5で、headerの左下に、小さな四角が出来ます、何が原因か？ ホームページを、作成している初心者です、htmlで、作ってますと、最初は、四角は、ないんですが、いろいろコピーして貼り付けてる間に、headerの左下に、小さな四角が出来ます、色はcontentの色です。可能性のある原因を、お教えください。なかなか取れなくて困っております。
- ベストアンサー
- HTML
- ［CSS］ヘッダー固定＋コンテンツの縦位置可変
CSSでのヘッダー固定に関する質問です。 ヘッダーを固定表示しつつ、ヘッダーの縦幅が文字サイズの可変などで大小した時に それにあわせてその下部の固定じゃないコンテンツ部分の縦の位置が 調整されるようにCSSで組むことは可能でしょうか？ ヘッダー固定関連を調べてみたのですが、 条件に合うものがうまく見つけられなかったので、 恐れ入りますが質問させていただきました。 添付画像のような処理を行いたいと思っています。 ●文字サイズ可変に対応できない例 #header{ position:fixed; (またはposition:absolute;) width:100%; height:100px;" } #content{ width:100%; margin:100px 0 0;(またはpadding) } <body> <div id="header" >******</div> <div id="content">*****</div> </body> これだと#header内の文字サイズが大きくなった場合、枠からはみ出してしまいます。 現在はこれを用いています。（IE6対応などは行っています） ●文字サイズ可変に対応出来るが、固定部分に対応出来ない？ http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/header_footer.html こちらのやり方？ ●やりたいこと <body> <div id="header"> <div id="header1">テキスト テキスト テキスト</div> <div id="header2">画像や動画など縦幅は固定</div> <div id="header3">テキスト テキスト テキスト</div> </div> <div id="content">******</div> </body> この形で、 header1とheader3はテキストが入るのでfirefox等の ブラウザの文字サイズ変更にて縦幅が可変しますが、 header2は常に縦幅が固定(100pxなど)です。 この条件の#headerの高さに応じて、スクロールバーが一番上にある状態の時は #content部分が常にピタッと#headerの下にひっついた状態にしたいです。 （スクロールバーは#content部分ではなく、body全体に出る形） この条件で、CSSのみで、ヘッダー固定を実現することは可能でしょうか？ htmlの書き方は見た目が実現可能であれば必ずしも●やりたいこと の部分のものと同じでなくてもかまいません。 js等必要でしょうか？ ご存知の方、ご教授いただけますと幸いでございます。
- ベストアンサー
- CSS
- CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）
先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。 レイアウトの構成は １．上部に「header」コンテナ ２．その下に「wrapper」コンテナ ３．その下（最下部）に「footer」コンテナ という構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。 ソースコードは以下の通りです ■ html部分 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■ CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。 もし、予想通りPCの縦幅の問題だとしたら、 １．コンテンツの少ないページはどのように対処するのか？ ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ をご教授いただけますと幸いで御座います。 月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- HTML
- Dreamweaverの文字化けを解決したいです
DreamweaverCS3を利用しています。 プログラムでheaderを分けて書いておりまして、 <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> がついているheaderページだけ、いつも通り開くと文字化けしてしまいます。 文字コードが指定されているページをその文字コードで開く方法はありますか？ お分かりになる方、ご教授お願い致します。
- 締切済み
- ホームページ作成ソフト
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
お礼
回答ありがとうございました。 overflow:hidden 勉強になりました。