- ベストアンサー
画面100％表示のトップページ用ヘッダーがうまくできません
body{height:100%; width:100%; margin:0; padding:0;} として、フッターまでの表示が画面１００％になるように作っているのですが・・。 ヘッダーのスタイルシートを↓↓ #header{width:100%;height:100px:"} として(フォント・背景色等、質問に関係ないと思われるタグは抜いております。）、幅１００％、高さ１００pixにしているのですが・・ 中に記載したい文字を配置しようと、 この#header に上、左、パディングを設定すると、その分下や右にもヘッダーが伸びてしまいます。 センターではなく、左側に余白を設け、下の方に文字を配置したいのですが・・どうすればいいでしょうか？？
- patthai
- お礼率46% (78/167)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ヘッダーにpaddingで余白をつくるのではなく、 ヘッダーの「中身」にmarginで余白を作ればいいです。 paddingはborderと同じく、ブラウザによって解釈が違い、幅に含まれたり別計算されたりします。 http://adp.daa.jp/archives/000265.html
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ウィンドウ内の表示部分を高さ100%は、あまり考えないでください。 訪問者のディスプレイは、様々で一般的には横1024ですが、最低800pxから、1280px場合によると、最近のワイドバネルとなると1920×1080ですからね。 http://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8F%E5%BA%A6#.E3.82.B3.E3.83.B3.E3.83.94.E3.83.A5.E3.83.BC.E3.82.BF.E3.83.BB.E6.98.A0.E7.94.BB ウィンドのサイズのどれを対象とするかは、ウェブデザイナーとして、最も頭を悩ませるところです。 質問文では、具体的に、どのようなデザインをされたいのかが分からないので、上記を参考に、図示していただくとよいでしょう。
関連するQ&A
- wordpress ヘッダー画像 横に並べる方法
テーマはStinger3を使っています。 ヘッダー画像を二つ横に並べたいのですが縦になってしまいます。(header2がheader１の上に来ます。） #header1 { height: auto; margin-left: auto; margin-right: auto; width: 700px; padding: 0 0 0 290px; } #header2 { height: auto; margin-left: auto; margin-right: auto; width: 251px; } floatを使えば横に並べることはできたのですが、 ウィンドウサイズを小さくした時にレイアウトが崩れるので他の良い方法はないでしょうか？ 理想としては左側にheader2右側にheader1間に10pxの余白、ウィンドウサイズを小さくした時に、header1とheader2が左方向に移動していく（右から左に向かって小さくした場合） どうすればいいでしょうか？ 教えてください。
- ベストアンサー
- CSS
- borderをページの下まで伸ばしたい
お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。 テーブルを使い左右にレイアウトを分けています。 左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。 メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？ 恐れ入りますが下記ソースです。 /*CSS*/ body { margin: 0px auto; padding: 0px; height:100%; width: 760px; text-align:center; position:relative; } #header { padding:0px ; margin: 0px auto; width: 760px; height: auto; } #contents { margin: 0px auto; padding: 0px; height:100%; width: 760px; background-color:#FFFFFF } .side{/*メニュー部分*/ margin:0px; padding:0px 0px 20px; border:1px #666666 solid ; width:163px; height:auto; } .footer {/*フッターの背景画像サイズに合わせheightを設定*/ margin:0px; padding:10px; width: 760px; height:72px; text-align:left; background-image:url(image/bottom.gif); background-repeat:no-repeat; border:0px; } .coretable{/*画面レイアウト左右分けテーブル*/ margin:5px 0px 0px; padding:0px; width:760px; } <!--html--> <body> <div id="header"> ヘッダー内容 </div> <div id="contents"> <table border="0" cellpadding="0" cellspacing="0" class="coretable"> <tr><td width="165" align="center" valign="top"> <div class="side"> メニュー内容 </div> </td> <td width="595" align="center" valign="top"> メインコンテンツ内容 </td> </tr> </table> </div> <div id="footer"> フッター内容 </div> </body> </html> あるサイトで拝見して、 .sideに height:100%;/* for IE6 */ min-height:100%; を加え、 html{ height:100%; } body{ height:100%;} としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。 テーブルを使っているのが悪いのでしょうか？ どうかお知恵をお貸し下さい。
- ベストアンサー
- CSS
- 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
- CSSで画面を構成しています。
CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか？ テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" /> <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" /> <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>
- ベストアンサー
- HTML
- Fire foxで2カラムの表示が乱れる
こんにちは。 閲覧していただいてありがとうございます。 現在会社のサイトをコーディングしています。 IEでは問題なく表示されるのですが Fire foxで確認したところ、2カラムの部分の表示が乱れてしまいます。 具体的に言うと、 メニュー（左側）の横にメイン（右側）が並ぶ状態が メニュー（左側）の下に回り込んでしまう状態です。 floatの設定に問題があるのかなと思うのですが どうも分かりません； 以下がソースになります。 申し訳ないのですが、少し急いでいるので お早めにご教授いただけると助かりますm(_ _)m ＜HTMLソース＞ <div id="layout"> <div id="header">ヘッダー</div> <div id="contents"> <div id="menu">メニュー（左側）</div> <div id="mein">メイン（右側）</div> </div> <div id="footer">フッター</div> </div> ＜CSSソース＞ #layout{ margin:0px; padding:0px; width:762px; text-align:left; background-color:#fff; border-right:1px solid #ccc; border-left:1px solid #ccc; } #header{ margin:0px; padding:0px; } #contents{ margin:0px; padding:0px; width:760px; } #menu{ margin:0px; padding:0px; width:190px; line-height:1.5em; float:left; background-color:#f4f4f4; border-right:1px dotted #ccc; border-left:1px dotted #ccc; border-bottom:1px dotted #ccc; } #mein{ margin:0px; padding:15px; width:550px; float:left; } #footer{ margin:0px; padding-left:195px; width:760px; clear:both; border-top:1px dotted #ccc; line-height:1.3em; }
- ベストアンサー
- HTML
- HPの作成を教えてください。
HP作成を見よう見まねで作成しているのですが最初からつまずきました。 作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。 何分初心者なので分かりやすく教えて頂ければ助かります。 body , html { height: 100%; margin: 0; padding: 0; text-align: center; /* 標準文字色 */ font-size : 100%; background-image : url(../imege/bg01.png); background-repeat : repeat-x;background-position : left top; } /* Safari用ハック 文字サイズ調整 */ /*\*/ html:\66irst-child body{ font-size: 90%; } /* end */ } img{ border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; } #container { width: 100%; position: relative; height : 100%; min-height: 100%; background-image : url(../imege/fbg01.png); background-repeat : repeat-x;background-position : left bottom; } #header{ width: 100%; height : 84px; margin-top : 0px; margin-bottom : 0px; text-indent : -9999px; } #contents { padding-top : 84px; padding-bottom: 100px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; margin-left : auto; margin-right : auto; } #header-in{ width : 900px; height : 84px; position : relative; margin-left : auto; margin-right : auto; margin-top : 0px; margin-bottom : 1px; } #contents-in{ margin-left : auto; margin-right : auto; width : 900px; position : relative; margin-top : 0px; margin-bottom : 0px; } #footer-in{ margin-left : auto; margin-right : auto; margin-bottom : 0px; width : 900px; height : 100px; position : relative; margin-top : 0px; } #header-logo{ width : 500px; height : 84px; float : left; z-index: 2; } #header-logo2{ width : 200px; height : 84px; float : left; z-index: 2; } <div id="container"> <div id="header"> <div id="header-in">ヘッダー <div id="header-logo">トップロゴ</div> <div id="header-logo2">お問い合わせ</div> </div> </div> <div id="contents"> <div id="contents-in">コンテンツ</div> </div> <div id="footer"> <div id="footer-in">フッター</div> </div> </div> よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- ヘッダーとサイドバーの色の変更の仕方
現在ヘッダーやサイドバーの色が黒なのですが、ＣＳＳのどの部分を変えることで変更可能ですか？黒はリラクゼーションには不向きなので#660033の色に変更したいのです。 どうか助けてください。 /* その他、拡張があれば記述 */ .skinHeaderFrame { text-align:center; } #navi { list-style:none; margin:0 auto; padding:0; width:605px; } #navi li { display:inline-block; padding:0 15px; *display:inline; *zoom:1; } #navi li a { padding:5px; display:block; } #navi1 a:hover, #navi2 a:hover, #navi3 a:hover, #navi4 a:hover, #navi5 a:hover { background:#996666; color:#FAF3F1; text-decoration:none; } #header { margin:20px 0 40px 0; text-align:center; width:100%; height:301px; background:url(http://www.gird.jp/ameblo/p2/images/header_bg_line.jpg); } .skinHeaderArea2 { margin:0 auto; width:980px; height:301px; position:relative; background:url(http://www.gird.jp/ameblo/p2/images/header_bg.jpg); } .skinBlogHeadingGroupArea { width:340px; position:absolute; top:50px; left:50px; } #gallery { width:450px; height:210px; position:absolute; top:46px; right:55px; background:#000; } #gallery img { position:absolute; top:0; left:0; } .skinArticle { background:none; border:none; padding:0; } .skinArticleHeader { text-align:center; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; margin:0; padding:10px 0; } .detailOn img { margin:0; } .skinSubA .skinMenuHeader { color:#faf3f1; padding:23px 0 0 30px !important; width:270px; height:41px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header.jpg) no-repeat center top; } .skinSubB .skinMenuHeader { color:#faf3f1; padding:23px 0 0 25px !important; width:155px; height:37px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header2.jpg) no-repeat center top; } .skinSubA .skinMenu2 { width:300px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer.jpg) no-repeat center bottom; padding-bottom:32px !important; } .skinSubB .skinMenu2 { width:180px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer2.jpg) no-repeat center bottom; padding-bottom:19px !important; } .skinSubA .skinMenuBody{ margin:0; width:260px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body.jpg); } .skinSubB .skinMenuBody{ margin:0; width:140px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body2.jpg); } #footer { position:relative; width:100%; height:65px; background:url(http://www.gird.jp/ameblo/p2/images/footer_bg.jpg); } #myad { width:251px; height:31px; display:block; background:url(http://www.gird.jp/ameblo/p2/images/myad_btn.png); position: absolute; left:50%; top:20px; margin:0 0 0 -125px; text-indent:-9999px; } #myad:hover { background-position:left bottom; }
- 締切済み
- CSS
- スマホ画面で長い文章が、左端に短い幅で片寄る。
スマホ画面で長い文章の部分だけ折り返され、左端に短い幅で片寄ってしまいます。 これはどのように修正すれば良いのでしょうか。PCではいろんなブラウザで問題なく表示されています。 #header { width:100%; background:#cccc99; } #container { width:950px; margin-left:auto; margin-right:auto; text-align:left; } #col1 { width:740px; float:left; margin-left:20px; background:#383838; } #col2 { width:190px; float:left; } #footer { clear:left; width:100%; border-top:1px solid #8f8472; } 左側にメニュー（190px）を配置したレイアウトです。 h1,h2,P,liタグなど、とにかく長い文章の部分だけ、画面幅ではなく、短い幅で折り返され 左側に片寄っています。下記のxxxxxxxxの部分もそのようになります。 ul.abc { list-style:none; width:100%; margin: 0; padding: 0; } ul.abc li { float:left; margin-right:1em; padding: 0; } ul.abc a { float:left; line-height:85px; } ul.abc img { float:left; margin-right:.5em; vertical-align:middle; } <ul class="abc"> <li><a href="..." target="_blank"><img src="..." width="115" height="85" alt=""/><img src="..." height="1px" width="1px" border="0"> xxxxxxxxxxxxxxxxxxxxx</a></li> </ul><div style="clear: left;"></div> よろしくお願い致します。
- 締切済み
- CSS
- 最上部の余白の原因
こんばんは、質問させてください。 XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいてはまっています。 コードは抜粋です。現在の書き方だと タイトル部分の上に対してのマージンによって <div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまいます。 想定ではヘッダーの中で中央ぐらいにTitleという文字がくると思っていたのですが。。 原因はなんでしょうか？ 宜しくお願い致します。 -index.html <body> <div class="header"> <p class="title">Title</p> </div> </body> -style.css *{ margin:0; padding:0; } .header{ background-color:blue; width:800px; height:250px; } .title{ width:200px; height:50px; background-color:red; color:white; margin-left:210px; margin-top:100px; }
- ベストアンサー
- CSS
お礼
Ｐ要素にmarginをつければ良い・・ということですよね？ ありがとうございます。 参考のページもこれから確認します(^^♪