締切済み

CSSで可変3段組を作りたいのですが、

2008/09/18 20:45

CSSとXHTMLを使い、可変3段組を作りたいのですが、うまくいきません。条件は以下のとおりです。 #container:100% #wrapper:100% #center:100% #left:width:200px #right:width:200px leftとcenterを並べ、wrapperとrightで2組にしようと思っています。なんどもやっているのですが、うまくいきません。なかなかしんどい構成なのですが、ご存じな方いらっしゃいましたら、よろしくお願いします。

yoshimu512
お礼率0% (0/1)

HTML
回答数1
ありがとう数1

回答全件

>#container:100% >#wrapper:100% >…

2008/09/18 20:47

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

みんなの回答

SAYKA
ベストアンサー率34% (944/2776)

2008/09/18 20:47 回答No.1

>#container:100% >#wrapper:100% >#center:100% なにが100%なの？と人間でも思ってしまうんだけど？もう少しCSSの書き方を確認した方が良いよ http://jigsaw.w3.org/css-validator/

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
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; } わかる方いらっしゃいましたら宜しくお願い致します。
- ベストアンサー
- HTML
段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。再度、投稿しなおします。なんとか、以下の画像のところまで持ってくることが出来ました。おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。以上２点です。宜しくお願いします。失礼致します。こんにちは。ycqと申します。 html+CSSでサイトを作っています。簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定お時間がございましたら、どうぞ、宜しくお願いいたします。失礼致します。 index.html*************************** <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> 　 <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
- ベストアンサー
- CSS
２段リキッド(右可変)時の右ブロックのボーダー表示について
タイトルでは分かりにくいですので、まずはCSSとHTMLのソースを添付します。 test.css=== * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; background-color: black; } #container { width: 100%; height: 100%; } #menu { width: 150px; height: 100%; float: left; display: inline; margin-right: -150px; background-color: white; } #main { width: 100%; height: 100%; float: left; display: inline; margin-left: 150px; margin-right: -150px; background-color: gray; } #mainContent { margin: 10px; border: 1px solid #85b3dc; } === test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> <div id="menu"> MENU_CONTENT </div> <div id="main"> <div id="mainContent">MAIN_CONTENT</div> </div> </div> </body> </html> === test.htmlはネガティブマージンを使った２段組みの左固定、右可変のリキッドデザインとなっています。右可変ブロックには#mainContentにより、ボーダーを表示していますが、右可変ブロックの左には10px のマージンが取られているのに、右には10px のマージンがありません。右に10px のマージンをとるにはどうしたら良いのでしょうか？分かりにくい内容とは思いますが、お願いします。
- ベストアンサー
- HTML
CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> 　　<div id="left">左メニュー</div> 　　<div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます　　↓　　　↓ [左]　[中央]　[右] 隙間なくぴったりつけるにはどうすればいいでしょうか。どうぞよろしくおねがいいたします。
- ベストアンサー
- HTML
CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試してみたのですがwidthとmarginの合計で1000px以内にしなければならないようなのですがその場合firefoxなどのブラウザで確認すると若干ではありますが微妙に違いがでてきます。下記のソースのように特に画像をいれなくてもbackgroundを設定することによりカラム落ちはしなくなったのですがこの他に解決方法はあるのでしょうか？また、なぜbackgroundを設定することにより解決したのかも全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- ベストアンサー
- CSS
XHTML+CSSの段組についてです。
XHTML+CSSでサイト構築をしようとしております。段組を中央に配置しようとしているのですが、「<?xml version="1.0" encoding="utf-8"?>」を最初に記入すると段組の配置も左側寄せになってしまいます。 <?xml～>を記入しないで、CSSマージンのLeft/Rrightをautoにすればきちんと中央に配置されます。そこで、<?xml～>を記入して段組を中央に配置するにはどのようにすれば良いのでしょうか？
- ベストアンサー
- HTML
CSSで横の段組-センタリングするには？
CSSで横の段組をし、センタリングしたいのですが、横の段組のために「float: left;」を使うと、「margin:0px auto;」と指定しても左寄りになってしまいます。「float: left;」を消せばセンタリングできるのですが、そうすると横の段組ができなくなって困っています。何か単純な間違いをしているのだと思うのですが、ご助言ください。
- ベストアンサー
- HTML
CSSの段組で要素がかけてしまいます
いつもお世話になります。今CSSで段組をしています。 #content{ width:780px; height:auto; } #content{ float:left; width:440px; padding-left:20px; padding-right:20px; } #menu{ float:right; width:440px; padding-right:20px; } で左右のボックスを作り、それぞれにテキストや画像などの子要素を入れていきます。 html <body> <div id="content"> <div　id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> 　<div　id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> 　　<div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </html> という具合です。子要素(sub）には高さ指定はしていません。問題なのは、 firefoxでは子要素がきちんとおさまるのですが、 IE（６，７とも）右の3番目(sub5)の要素が欠落し、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。どうしたらいいでしょう？どなたかご教授ください。質問に慣れていないので、もし補足が必要であればお願いします。
- 締切済み
- HTML