リキッドデザイン3カラム左端幅固定の個別スクロール

2023/08/15 21:40

このQ&Aのポイント

リキッドデザインで幅3カラムのレイアウトをしようとしています。左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。IE9以下ではレイアウトが崩れますが、IE7以降で崩れずにレイアウトを完成させる方法はありますか？
中央と右カラムを完全に二分割のサイズにする方法も知りたいです。
ご迷惑をおかけしますが、お知恵をお借りできないでしょうか。

ベストアンサー

リキッドデザイン3カラム左端幅固定の個別スクロール

2011/12/10 00:50

現在、リキッドデザインで幅3カラムのレイアウトをしようとしています。左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。以下のコーディングでFirefoxとChrome、Safariでは想定したレイアウトを概ね実現できたのですが（厳密には中央と右のサイズが微妙に異なっていて調整できていません）、IE9以下は全てレイアウトが崩れて表示されてしまいます。 IE6はともかくとしても、IE7以降で崩れずにレイアウトを完成させる方法は無いでしょうか。さらに欲を言えば中央と右カラムを完全に二分割のサイズにできるとありがたいです。（こちらはできればで結構ですが。。。）おわかりいただける方、お知恵をお借りできないでしょうか。ご迷惑をおかけしますが、よろしくお願いいたします。 ------------html------------ <div id="wrap"> <div id="contents"> <div id="wall"> <div id="nav"> 左ブロック </div> <div id="main"> 中央ブロック </div> </div> <div id="sub"> 右ブロッック </div> </div> </div> ---------------------------- ------------css------------ #wrap{ width:100%; text-align:left; min-height: 100%; font-size: 100%; } #contents{ position:fixed; overflow:auto; width:100%; min-width:980px; height:100%; margin-top:60px; } #wall{ position:fixed; overflow:auto; width:60%; min-width:579px; height:100%; } #nav{ position:fixed; overflow:auto; left:0px; width:178px; height:100%; } #main{ width:100%; min-width:401px; height:100%; margin-left:178px; } #sub{ width:40%; min-width:401px; height:100%; margin-left:60%; } ----------------------------

cofcof
お礼率100% (3/3)

CSS
回答数3
ありがとう数4

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

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/13 00:48 回答No.3

左側もスクロールさせるのなら、ずっと簡単に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header" id="Top"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="article"> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#Top">トップ</a></li> ＿＿＿＿<li><a href="#section1">一章</a></li> ＿＿＿＿<li><a href="#section2">ニ章</a></li> ＿＿＿＿<li><a href="#section3">三章</a></li> ＿＿＿＿<li><a href="#section4">四章</a></li> ＿＿＿＿<li><a href="#aside1">補足</a></li> ・・・【中略】・・・＿＿＿</ol> ＿＿</div> ＿＿<div class="main"> ＿＿＿<div class="section"> ＿＿＿＿<div class="section" id="section1"> ＿＿＿＿＿<h2>記事(1)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="section2"> ＿＿＿＿＿<h2>記事(2)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="section3"> ＿＿＿＿＿<h2>記事(3)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿＿<div class="section" id="section4"> ＿＿＿＿＿<h2>記事(4)</h2> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿</div> ＿＿＿</div> ＿＿＿<div class="aside" id="aside1"> ＿＿＿＿<h2>補足記事</h2> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿＿<p>記事</p> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="footer" id="documentInfo"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者

お礼 2011/12/14 00:46

ありがとうございます！やりたいことがほぼ実現できたと思います！！教えていただいたものを元に、ちゃんと動くか組み込んでみます。どうもありがとうございました！

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/10 16:28 回答No.2

HTMLとCSSはややこしいので見てません。なぜかはサンプルコードを見ればわかるでしょう。「左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。」だけから ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済み。HTML4.01strict+CSS2 タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header" id="Top"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#Top">トップ</a></li> ＿＿＿＿<li><a href="#section1">一章</a></li> ＿＿＿＿<li><a href="#section2">ニ章</a></li> ＿＿＿＿<li><a href="#section3">三章</a></li> ＿＿＿＿<li><a href="#section4">四章</a></li> ＿＿＿＿<li><a href="#aside1">補足</a></li> ＿＿＿＿<li><a href="#documentInfo">文書情報</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<div class="section" id="section1"> ＿＿＿＿<h2>記事(1)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿＿<div class="section" id="section2"> ＿＿＿＿<h2>記事(2)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿＿<div class="section" id="section3"> ＿＿＿＿<h2>記事(3)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿＿<div class="section" id="section4"> ＿＿＿＿<h2>記事(4)</h2> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿＿<p>ここに本文が入る</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="aside" id="aside1"> ＿＿＿<h2>補足記事</h2> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer" id="documentInfo"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者

お礼 2011/12/12 12:05

ありがとうございました！いただいたサンプルを見てみたのですが、左カラムはスクロールしないようでしたので、もう少しいじれないか試してみます。やはりposition:fixedを多用すべきでは無いですかね。。。かなり試行錯誤をして、ご回答のような使わないパターンも考えてみていたのですが、どうにもうまくいっておらず。。。。ともかくありがとうございました！

Questa
ベストアンサー率48% (13/27)

2011/12/10 14:23 回答No.1

多重 DIV構造になってしまいましたが、とりあえず作ってみました。 IE9の表示は未確認です。 (HTML) <div class="contents"> <div class="nav">左ブロック</div> <div class="main-sub-w"> <div class="main-sub-in-w"> <div class="main">中央ブロック</div> <div class="sub-w"> <div class="sub">右ブロッック</div> </div> </div> </div> </div> (CSS) .contents { height: 300px; /* 適当 */ min-width: 980px; /* 178 + 401 + 401 */ } .nav { float: left; margin-right: -178px; overflow: auto; width: 178px; height: 100%; background: #fcc; } .main-sub-w { float: left; width: 100%; height: 100%; } .main-sub-in-w { margin-left: 178px; width: auto; height: 100%; } .main { float: left; margin-right: -50%; overflow: auto; width: 50%; height: 100%; background: #cfc; } .sub-w { float: left; width: 100%; height: 100%; } .sub { margin-left: 50%; overflow: auto; height: 100%; background: #ccf; }

質問者

お礼 2011/12/14 00:44

ありがとうございます。内容を確認してみたのですが、左カラムと中央カラムのスクロールバーが表示されてはいるのですが、どうもうまくスクロールしないようです。もう少し考えてみますね。

関連するQ&A

ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/　Googleマップ http://map.yahoo.co.jp/　　Yahooマップどなたかお力添えをお貸しください。宜しくお願いします。
- ベストアンサー
- CSS
カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
2カラムサイト高さ100%　左右別々にスクロール
サイトの構成は2カラムのみのサイトで、左にナビ、右にコンテンツになります。左右どちらもheight100%で、両方とも縦に別々のスクロールを行いたいと考えております。そこで、main（左）とsub（右）を作りfixedで固定し、100%にしました。その中に固定したエリアを導入しスクロールバーを表記させようと思い下記のような記述をいたしました。 main_sとsub_sのheightをpxで表記するとうまく動作します。しかし、%にするとスクロールバーが表示されずfixedの影響で画面が固定されてしまいます。 #main{ float:left; width:400px; position: fixed; background-color:pink; height: auto; min-height: 100%; } #main_s { height:90%; overflow-y:scroll; } #sub{ float:left; width:300px; position: fixed; background-color:yellow; height: auto; min-height: 100%; margin-left:400px; } #sub_s { height:90%; overflow-y:scroll; } 左右のカラムを別々にスクロールをさせたいのですが、お力添えいただけたら幸いです。よろしくお願いいたします。
- ベストアンサー
- CSS
3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> 　<div id="left">左カラム</div> 　<div id="left">メインカラム</div> 　<div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
画像メインの１カラムのリキッドデザインができません
画像をメインにした１カラムのリキッドデザインを作成したいのですが、画像の縦横比が崩れて縦長になりながら可変してしまいます。どのようにcssを設定したらよろしいでしょうか？いろいろ検索したりしましたが、うまくできません。また、こちらの質問機能じたい初めてさせていただいています。至らないことがあるかもしれませんが、ぜひともよろしくお願い致します。急ぎで解決したいです。＾＾； ---------------- <html> <head> <meta charset="UTF-8" > <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes,initial-scale=1.0"/> <link rel="stylesheet" href="css/a3.css" type="text/css" > <title></title> </head> <body> <div id="wall" > <div id="box"> <img src="css/images/main.jpg"> </div> </div> <div id="footer"><img src="css/images/foot.jpg"></div> </body> --------------------------- body{ width:100%; height:100px; max-height:720px; } #wall{ display:block; width:100%; height:100%; margin:0 auto; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; background-image:url(images/G1.jpg); background-size: 100% 100%; } #box{ width:100%; height:100%; min-width:720px; min-height:325px; max-width:1440px; max-height:650px; } #footer { width:100%; margin:0 auto; min-width:720px; min-height:35px; max-width:1440px; max-height:70px; }
- ベストアンサー
- CSS
Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
特殊なカラムのデザイン設定について
いつもお世話になっております。閲覧ありがとうございます。実は新しいことに挑戦して自己解決できず、宜しければお知恵をお借り頂ければと思います。どのようなことかと言うと１．左カラムのheight部分を100％表示して、position:fixedを使って位置固定とスクロールしないメニュー画面を作りたい。２．左カラムにマウスを乗せるとカラムが右に若干スライドするようにしたい。スライド時、右カラムも左カラムが動いた分、スライドします。以上のようなWEBサイトを作りたいのですが・・・項目１の部分で躓いてしまいました。実は左カラムの部分に右カラムが隠れてしまっています。解決策として左カラムの背面にボックスを作って解決しようとしましたが、別の問題が発生しました。ブラウザのサイズを狭めてスクロールさせると右カラムが左カラムに隠れてしまいます。どなたか解決案を頂けませんでしょうか。お手数おかけ致しますが、何卒ご教授お願い致します。【HTML】 <body> <div id="MasterColumn">  <div id="LeftColumu_z2"> <ol> <li>コンテンツ１</li> <li>コンテンツ２</li> <li>コンテンツ３</li> <li>コンテンツ４</li> </ol> </div> <header> <div id="LeftHeader"> <h1>タイトル</h1> </div> <div id="RightHeader"> <ol> <li>１</li> <li>２</li> <li>３</li> <li>４</li> </ol> </div> </header> <div id="RightColumu"> <h2>コンテンツ２</h2> <h3>コンテンツ３</h3> <h4>コンテンツ４</h4> </div> <footer>フッダー</footer> </div> </body> 【CSS部分】 body{ background-color: #FFE9E7; background-image: none; background-position: top left; background-attachment: fixed; font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", sans-serif; /* フォントを設定 */ color: #333; margin: 0; padding: 0; line-height: 1.5; } #MasterColumn{ width: 1200px; margin-left: auto; margin-right: auto; } #LeftColumu_z1 { float:left; width: 200px; height: 100%; background-color: #FFFFFF; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftColumu_z2{ float:left; position: fixed; width: 200px; height: 100%; background-color: #2C2B30; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header{ float: left; width: 1000px; height: 80px; line-height: 80px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #LeftHeader{ float: left; height: 80px; width: 700px; background-color: #FFFFFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #RightHeader{ float: left; width: 300px; height: 80px; background-color: #920832; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header h1{ display: inline; } header ol,li{ display: inline; } #RightColumu { float: left; width: 1000px; height: 1000px; border: dashed 1px #999; margin: 0; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { float: left; width: 1200px; background-color: #2C2B30; color: #FFFFFF; text-align: center; }
- 締切済み
- CSS
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を使用した方法を教えていただきたいです。
- 締切済み
- CSS
固定幅で3カラムの記述方法を教えて下さい。
ブログCGIを使おうと思うのですが使わせて頂きたいスキンが、３カラム（可変幅）なので中央固定幅の３カラムに変更したくて悩んでいます。全く思い通りにいかず四苦八苦しておりまして助言頂ければ大変助かります。以下ソースですが自分なりに調べてはみたものの手を加えるとフッターが上にきたり右バーが重なったりと、全く手におえず助言お願いします。 /* ----- 基本構造 -------------------------------------- */ div#container { } div#mainbody { } div#header { float: none; clear: both; height: 80px; } div#menu { float: none; clear: both; height: 30px; } div#logs { margin: 0px 200px 10px; } div#navigation { width: 180px; position: absolute; left: 10px; top: 110px; } div#information { width: 180px; position: absolute; right: 10px; top: 110px; } div#diary, div#comment, div#trackback { } div#page, div#navi, div#work, div#canvas { float: none; clear: both; } div#comment, div#trackback, div#contents, div#form, div#env, div#status { float: none; clear: both; margin: 10px 10px 0px; padding: 0px 0px 5px; border: 1px solid #666666; background-color: #FFFFFF; } div#logs div#comment, div#logs div#trackback, div#logs div#contents, div#logs div#form { margin: 10px 0px 0px; } div#footer { float: none; clear: both; margin: 0px 200px; } div#work { width: 190px; position: absolute; left: 10px; top: 120px; } div#admin { margin: 10px 0px 0px 190px; } 本体CGIは web-liberty様のWeb Diary Professional http://www.web-liberty.net/ スキンをお借りしたのは海月屋様のSimple1、３カラム http://kurageya.xrea.jp/pc/skinsample/wl/simple1/3.html
- ベストアンサー
- CSS
3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、中央と右のカラムがどうしてもfloatできません。。左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています【ＨＴＭＬ】 <div id="wrapper_2"> <div id="contentsBox"> <div id="560"> 中央カラム　　　　</div> <div id="175"> 　　　　右カラム </div> </div> <div id="205"> 　　　　左カラム </div> </div> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、どうしても中央カラムの下に右カラムがきてしまいます。（ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます）アドバイスいただければ嬉しいです。よろしくお願い致します。
- ベストアンサー
- CSS

リキッドデザイン3カラム左端幅固定の個別スクロール

リキッドデザイン3カラム左端幅固定の個別スクロール