- 締切済み
CSSであふれた時に別のカラムに表示するには
CSSで左右２段の段組を作成しています。 左側カラムにコンテンツがあふれた場合に、残りを右側カラムに表示させたいのですが、可能でしょうか？ 正確にはカラム内にはテーブルを作成してますが、件数は多いのですが項目数が少ないため２列に表示させたいと考えています。 よろしくお願いいたします
- みんなの回答 （1）
- 専門家の回答
みんなの回答
関連するQ&A
- CSSのfloatについて
ホームページを作成していて、CSSが効かなくて困っています。 ２カラムで左側にメニュー 右側にメインのコンテンツを作成しております。 メインのコンテンツは floatでrightに設定していて その中にさらに ２つの内容を入れようと （メインコンテンツ内に左側に画像で右側に画像の詳細をいれたい） floatタグでleftとrightに設定したのですが CSSが効かなくて 左側に画像が配置され その下に画像の詳細文が配置されてしまい 全部左側に配置されてしまいました。 色々と試したみたのですが やっぱりCSSが効きませんでした。 すいません誰かお分かりになられましたら 教えてください。宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- CSSでの擬似インラインフレーム
CSSでの擬似インラインフレームでのサイトを作成しています。 ページ全体枠を900px×650pxで左右上下の中央表示にし、 左側にナビゲーション、右側にコンテンツを配置しています。 右側のコンテンツ部分は400px×500pxのみ表示して 残りの部分はoverflow:hiddenを指定して表示しないようにしました。 左側のナビゲーションは位置を固定にし、ボタンをクリックすると 右側のコンテンツ枠に各項目の内容が入れ替わり表示するように しました。 次に、クリックした際に右側のコンテンツ部分の表示移動が パッと入れ替わるのではなく、スルスルと画面が推移するなめらかスクロールで場面が移動しているように見せたいのですが スクロールのjavascriptはこちらのサイト（http://lab.centralscrutinizer.it/the-tiny-scrollings/）でダウンロードさせていただいたファイルを設置したのですがパッと画面表示が変わるのみでスルスルっと動いてくれません。。。 私はjavascriptの記述知識がないためどうすればよいのかわからず ご質問させていただきました。 どうすれば良いのでしょうか。 どなたかお助けくださいませ。 よろしくお願いします！
- ベストアンサー
- HTML
- ２カラムのHPを作っているのですがリンク先の指定が出来ず困っています。
２カラムの左側がメニューで、右側がコンテンツ表示といった形をとりたいのですがうまくいきません・・。 ↓の様な形 －－－－－－－ メ｜ コ ｜ ニ｜ ン ｜ ュ｜ テ ｜ －｜ ン ｜ ｜ ツ ｜ －－－－－－－ <div>で囲っているのですが<div>全体に対してリンクを飛ばすといったことは出来ないのでしょうか？ 右側でテーブルを作って<name><target>を作っても同じ<div>内にないからかこちらもうまくいきません。 どなたか方法がありましたら教えてください、お願いします。
- 締切済み
- CSS
- Perlでcssを使わないで3カラムにしたい
現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？ 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。
- ベストアンサー
- Perl
- フロートを利用した2カラムレイアウト
お世話になります。 HTML＋CSSにてサイト制作をしております。IE6のバグだと思うのですが、フロートを利用した2カラムレイアウトの段組みの間の空き具合をうまく調整することができません。なぜでしょうか？？ 形は、左右の2カラムで成り立っており、右半分に重要なコンテンツ部分（主にテキスト）、左半分にメニューをおいています。 【HTML】 <div id="wrapper"> <div id="right"> □□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□(重要テキスト) </div> <div id="left"> □□□□□□□□□(メニュー） </div> </div> 【CSS】 #wrapper{ width:800px; background:url();←省略 } #right{ float:right; width:680px; } #left{ float:left; width:100px; } という感じです。それで、800px－(680px＋100px)＝20pxを左右の段組みの間に空きスペースとして確保したいのですが、IE6だとうまくいきません。 Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間にスペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。 floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。 どうすれば、IE6で左右の間にスペースがある2段組みができるのでしょうか？？なにか根本的に間違ってるのでしょうか？
- ベストアンサー
- HTML
- CSS:3カラム センター固定
質問させてください。 コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で 左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box"> <!-- left background --> </div> <!-- /left background --> <div id="main"> <!-- main contents --> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> <!-- /main contents --> <div id="right_box"> <!-- right background --> </div> <!-- /right background --> としたときのCSSの適用の仕方について教えてください。 左右カラムには縦に長い異なった画像をbackground-imageで 横にタイルしていく方法にしようと思っています。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 入れ子にしたfloatのclear
初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。 そこで、1つ目のブロックの後にclearを摘要（<br />などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。 これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。 まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。
- ベストアンサー
- CSS
- CSS、Winで問題なく表示されるものがMacで不具合が
CSS初心者です。 左側にコンテンツの一覧（メニュー）を縦に表示させ、残りの右側の部分に内容を表示させるページを作っています。 （HTMLの「フレーム」を想像していただけると近いと思います） 当然メインコンテンツとメニューの文章量は違い、メニューの方が少ないのですが、Macの場合その２列の長さ（高さ）が変わってしまうのが困っています。 （文章量に合わせて四角で囲われてしまい、隣のメインコンテンツと四角の長さが揃わない） 参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈があるのですが、Winでは問題なくてもMacではうまくいっていません。 現在完成の期限が迫っていて、非常に困っています。 解決方法、どなたか思い当たることはありますでしょうか。
- ベストアンサー
- CSS
- このテーブルをCSSで書くとどうなりますか？
画像を参照願えますでしょうか。 左側100pxの右側は400pxで合計幅500pxあります。 （右側1行左側3行です。） これをテーブルレイアウトではなく、divとcssで書くとどんなhtmlになりますか？ 現在段組を色々やってますが、自問自答してもこのパターンだけが解決できないので・・・ 同じようにＨＴＭＬに興味ある方や詳しい方がいらっしゃいましたらご教授願います。 お答えの際にはＨＴＭＬソースを希望します。
- ベストアンサー
- HTML
- ２カラムレイアウトをサイドバーとコンテンツとで、別のファイルで作りたい。
CSSを利用して２カラム（サイドがメニューで、中央がコンテンツ）のレイアウトを作りたいのですが、そういったレイアウトを作ろうとすると通常一つのhtmlファイルの中でメニューとコンテンツをそれぞれ<div>でくくって、CSSでそれぞれの<div>に対してレイアウトを指定することで２カラムを実現すると思います。 メニューとコンテンツで別のファイルに書いたものを、表示させたいのですが、どうすれば実現できるでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
