CSSレイアウトについて -はじめまして。個人用サイトを趣味で制作してい-

CSSレイアウト

はじめまして。CSSレイアウトについて質問させてください。 ※昨日投稿したつもりが、、、、gooに羽井されていないようなんで再度投稿させていただきます。 ■実現したいこと。下記URLのようなイメージを、cssで実装したいのです。 ※センタリングもします。 http://www.turn.jp/design.jpg 現状自分で組んでみると、以下URLのように表示されます。 safariでは、外枠container部分のdivが上手く表示されません。 IE6ではとりあえず表示はされていますが、投下PNGが読めない？のか、うまくできていません。 www.turn.jp 下記にhtmlおよびcssを記載しますのでどなたかアドバイスいただけると幸いです。 ■html <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; } -- 以上、宜しくお願い致します。

CSSでのレイアウトが崩れてしまうんです。

お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }

CSSでの質問です

初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ソースは以下のとおりです。 <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？

CSSについて入力フォームの上下揃い

CSSについて入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですがどうした良いでしょう？

1カラムのリキッドレイアウトについて。

１カラムのサイトを作っています。背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。【html】 <body> <div id="wrapper">→背景画像を表示 <div id="logo"></div> <div id="travel"></div> <div id="member"></div> <div id="bbs"></div> 　→これらはボタン。絶対配置。 </div> </body> 【css】 #wrapper{ width:100%; height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・) background:url(../images/1000.jpg) no-repeat; position:relative; } #logo{ height:120px; width:360px; position:absolute; top:50px; left:50px; background:url(../images/logo.gif); } #travel{ height:80px; width:200px; position:absolute; top:250px; left:400px; background:url(../images/travel.gif); } #member{ height:75px; width:200px; position:absolute; top:400px; left:100px; background:url(../images/member.gif); } #bbs{ height:80px; width:200px; position:absolute; top:300px; left:700px; background:url(../images/bbs.gif); } ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。文章などのコンテンツがないため、背景画像が全画面で表示されないのです。どのようにしたら意図する表示が可能でしょうか？できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。

wrapperなしでCSSのレイアウトは組まない方がいいですか？

いつもお世話になっております。実はふとした疑問というか挑戦といいますか・・・いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。これは可能でしょうか？どうかよろしくお願いいたいします。 body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap">  <div id="head"> </div>  <div id="left"> </div>  <div id="right"> </div>  <div id="foot"> </div> </DIV> </body> ------------------------------------------------- これを・・・ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap">  <div id="head"> </div>  <div id="left"> </div>  <div id="right"> </div>  <div id="foot"> </div> </DIV> <div id="foot"> </div> </body> ------------------------------------------------- このようにwrapperからはずしてレイアウトすることは可能でしょうか？色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・かなり長文になりましたが、どうかよろしくお願いたします。

<div>でレイアウトすると上下に空白が出る

現在cssを独学で勉強中です。どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウトしようとしています。下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の上下に20pxくらいの空欄ができます。これを出ないようにする方法はありますでしょうか？というか、記述としては合っているのでしょうか？一応いろんなサイトを参考にして記述してはいます。また、IEとfirefoxでは空欄の出方が違います。たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけるとありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが今度はSafariでその分要素自体が小さくなってしまいます。宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container"> 　<div id="boxA"> 　A（ヘッダ）　</div> 　<div id="wrapper"> 　　<div id="boxB"> 　　B（メインカラム）　　</div> 　　<div id="boxC"> 　　C（サイドバー1）　　</div> 　</div> 　<div id="boxD"> 　D（サイドバー2）　</div> 　<div id="boxE"> 　E（フッタ）　</div> </div> </body> </html> ---　css　----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }

CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのは

CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのはなぜ？あまりCSSに詳しくないものです。どうかご教授ください。添付画像のようにに、div分けして全体のデザインを制作しています。 #headerの下に#contensがあり、その中に#leftmenuと#rightmenuと区分けしています。 #leftmenuがメニューボタン部分で#rightmenuが情報を表示するコンテンツ部分です。 #contensはそれで閉じ、最後に#footerがあります。ところが、#rightmenu部分に望んでいない余白ができます。 #leftmenuと頭で揃えたいのですが、何故か220pxほど下がって表示してしまうのです。（paddingやmarginの設定はしていません）作業はdreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。しかし#contensのCSSをチェックしても何が原因なのか分かりません。これはどうしてでしょうか？私個人の知識ではどうしても分かりかね質問させていただきました。 HTMLとCSSにどこかおかしなところがあればどうか教えてください。よろしくお願いします。 HTML----------------- <body> <div id="header"> <h1>タイトル</h1> </div> <div id="contens"> <div id="leftmenu"> <a href="" id="ボタン1"></a> <a href="" id="ボタン2"></a> <a href="" id="ボタン3"></a> <a href="" id="ボタン4"></a> <a href="" id="ボタン5"></a> <a href="" id="ボタン6"></a> <a href="" id="ボタン7"></a> </div> <div id="rightrmenu"> <div id="rightbox-top"> <h3>本文</h3> 　<p>挨拶文</p> 　</div> <div id="rightbox-bottom"> </div> </div> </div> <div id="footer"> <p class="copyright">Copyrightうんぬん</p> </div> </body> CSS----------------- body { background-image:url(../image/top.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); } div#header { width:800px; height:139px; margin-left:auto; margin-right:auto; } div#contens { width:800px; height:auto; min-height:520px; margin-left:auto; margin-right:auto; } div#leftmenu { width:161px; } div#rightmenu { width:639px; float:right; } div#footer { clear:both; height:100px; 　　 background-image:url(../image/top-bottom.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin-left:auto; margin-right:auto; }

CSSで文字が流れ込んでしまいます

CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

CSSレイアウトでフッターをうまく配置出来ません。

CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width:　183px;　 margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }

htmlおよびcssについて

自分で、htmlとcssを記述したのですが、表示が少しおかしいようです。contentの上に空白ができてしまいます。IE、Firafox、cromeでレンダリングしてみましたが、同じです。ソースは以下のとおりです。どこがおかしいのでしょうか？ http://check.zouri.jp/ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" /> <meta name="description" content="ここに、あなたがつくろうとするウェブサイトの内容・特徴を記述する" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="NEXT" href="next.html" /> <link rel="PREV" href="prev.html" /> <link rel="stylesheet" href="base.css" type="text/css" media="all" />  <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>あなたのウェブサイトのタイトル名</title> </head> <body> <div id="wrapper"> <div id="header">headerです </div> <div id="globalnavigation">globalnavigationです </div> <div id="topicpath">topicpathです </div> <div id="container"> <div id="primary">primaryです <div id="content">contentです </div> </div> <div id="secondary">secondaryです </div> </div> <div id="advertisement">advertisementです </div> <div id="pagelinks">pagelinksです </div> <div id="footer">footerです </div> </div> </body> </html> @charset "UTF-8" * {margin:0; padding:0;} #wrapper { width:100%; } #header { background-color:#dddddd; height:50px; } #globalnavigation { background-color:#cccccc; height:50px; } #container { float:left; width:100%; margin-right:-145px; } #primary { float:right; width:100%; margin:10px 0 10px -145px; background-color:#c7d5ed; } #content { margin:0 155px; background-color:#caedc7; } #secondary { float:left; width:145px; margin:10px 0 10px 0px; background-color:#e5c7ed; } #advertisement { float:right; width:145px; margin:10px 0; background-color:#e5c7ed; } #pagelinks { clear:both; background-color:#dddddd; height:50px; } #footer { background-color:#dddddd; height:50px; }

HTMLのCSS(float)の設定がよくわかりません

HTMLのCSS(float)の設定がよくわかりません画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間ができてしまうのですが、その理由をわかる方いらっしゃいますか。宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら宜しくお願い致します。

CSSでレイアウトが崩れます

CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。ただ、IEでは何とか表示します。また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

footerを{position:absolute;bottom:0p

footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。　　　　　　　　　　これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデよろしくお願いします。

CSSでブラウザごとにレイアウトが崩れたりします。

はじめまして。現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■　　　　■＝ヘッダー □□●●●●　　　　□＝メニュー □□●●●●　　　　●＝コンテンツ（中身）1 □□○○○○　　　　○＝コンテンツ（中身）2 □□○○○○　　　　▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。どうかよろしくお願いいたします。

【初心者】cssの背景画像について

cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。やりたいことは例えば↓のページのように、背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。初歩的な質問ですみませが、「ここがおかしい」という点と、もし可能であれば「ふつうはこうする」というのがあれば教えてください。以下作りかけですがcssとhtmlです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container">  <img src="img/img_main.jpg" alt="タイトル" />  <div id="map">  </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer">  </div> </body> </html>

CSSのborderが実際の領域より上に表示される

お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ～省略～ </div> <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> </div> <div id="footer"> ～省略～ </div> </body>

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> よろしくお願いいたします。

IEとFireFoxでCSSの見た目をそろえたい

CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p>  </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }

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> </div> <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> <div id="sidebar"> </div> </div> <div id="footerbg"> <div id="footer">Footer</div> </div> </div> </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レイアウトについて

みんなの回答

お礼 2010/04/10 14:17

関連するQ&A

CSSレイアウト

CSSでのレイアウトが崩れてしまうんです。

CSSでの質問です

CSSについて入力フォームの上下揃い

1カラムのリキッドレイアウトについて。

wrapperなしでCSSのレイアウトは組まない方がいいですか？

<div>でレイアウトすると上下に空白が出る

CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのは

CSSで文字が流れ込んでしまいます

CSSレイアウトでフッターをうまく配置出来ません。

htmlおよびcssについて

HTMLのCSS(float)の設定がよくわかりません

CSSでレイアウトが崩れます

footerを{position:absolute;bottom:0p

CSSでブラウザごとにレイアウトが崩れたりします。

【初心者】cssの背景画像について

CSSのborderが実際の領域より上に表示される

HPの作成を教えてください。

IEとFireFoxでCSSの見た目をそろえたい

CSS #containerについて

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

CSSレイアウトについて

みんなの回答

お礼 2010/04/10 14:17

関連するQ&A

CSSレイアウト

CSSでのレイアウトが崩れてしまうんです。

CSSでの質問です

CSSについて 入力フォームの上下揃い

1カラムのリキッドレイアウトについて。

wrapperなしでCSSのレイアウトは組まない方がいいですか？

<div>でレイアウトすると上下に空白が出る

CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのは

CSSで文字が流れ込んでしまいます

CSSレイアウトでフッターをうまく配置出来ません。

htmlおよびcssについて

HTMLのCSS(float)の設定がよくわかりません

CSSでレイアウトが崩れます

footerを{position:absolute;bottom:0p

CSSでブラウザごとにレイアウトが崩れたりします。

【初心者】cssの背景画像について

CSSのborderが実際の領域より上に表示される

HPの作成を教えてください。

IEとFireFoxでCSSの見た目をそろえたい

CSS #containerについて

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

CSSについて入力フォームの上下揃い