2009-04-16 8 views
3

このWebサイトでは、ブラウザウィンドウを縮小すると、右と左の空白が消えてから、メインのコンテナパネルによって。私は最近ASP.NET MVCを使い始めました。テストケースでは、ブラウザウィンドウのサイズを変更すると、コンテナが他のコンテナの下に落ちます。私は体の一部として左、中央、右のセクションを持つsite.masterページを使用しています。そこにCSSの動作やHTML要素を指示する属性がありますか?私はこのサイトのメインページのページソースを見て、CSSを見ましたが、これがどのように制御されているかについては、何も明らかではありませんでした。ブラウザのサイズが変更されたときに、ページのさまざまなセクションが再配置されないようにするメカニズム

答えて

3

ウェブ開発の素晴らしい点の1つは、サイトを見て「どのようにしてやったのか」と思うと、コードを見て調べてテストすることが非常に簡単ですFirefoxの場合はFirebugのツール、IE 8(F12)の場合はDeveloper Tools、Chromeの場合はすべて正式なソースとCSSが表示され、その場で変更できるようになります。

はSOの場合は、サイトの本体は、「コンテナ」のクラスとdiv要素に含まれている、「コンテナ」のスタイルルールは以下のとおりです。

.container { 
    margin: 0 auto; 
    text-align: left; 
    width: 950px; 
} 

私たちがしている重要なこと「オート」に左右のマージンを設定する

margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 

センタリングの影響があります:950個のピクセル、およびマージンは(拡大)に設定されている - ここを見ていると、このクラスは幅を固定しているということですそれのコンテナの端にdivを入れ、それらを許可するコンテナが必要な950ピクセルを占めた後に必要な幅に拡大します。

あなたはその後、ID「コンテンツ」(ノースタイル規則)を持つdiv要素、および2つのdiv持つコンテナのdiv内

、「mainbar」とスタイルです「サイドバー」:

#mainbar { 
    float: left; 
    margin-bottom: 40px; 
    width: 715px; 
} 

#sidebar { 
    float: right; 
    width: 220px; /* this is also set in the "style" attribute * 
} 

これらの左側を右フロートは、適切な場所にバーを配置するものです。

もう一つの便利なCSSルールは次のとおりです。これは、「両方」は、「左」または「右」に設定することができ、かつ基本的にコンテナに浮かぶをリセットします

clear 

しかし、多くの場合、「Holy Grail of CSS」と呼ばれているようです(リックは、IE7のバグがあると指摘しています。here for a fixを参照)。3つの列に少なくとも1つフレキシブル。完全に柔軟なレイアウトの

他の例としては、次のとおりです。

+1

私はCSSの記事聖杯を使用して、私のサイトを更新し、それがうまく働きました。しかし、Gerd Riesselmannがhttp://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7を修正したIE7/8に問題がありました。彼の修正はうまくいった。 – Rick

+0

私はそれを答えに追加することを知らせてくれてありがとう:) –

1

これは、浮動小数点数、位置、および余白の組み合わせ、およびこれらの要素の設定方法になります。 URLがなければ、問題の内容や修正方法を正確に言うのは難しいでしょう。

出発点として、私はYUI CSS Gridsまたは960.gs(960 Grid System)とその周辺に浮かぶさまざまなreset.cssファイルの1つを見てみることをお勧めします。 YUIには非常に良いものがあります。 reset.cssファイルはCSSを見た目に変え、すべてのブラウザで同じように動作し、グリッドシステムはサイトの設計の出発点となります。また、設計しているものがすべてのブラウザで同じように見え、同じように動作するという自信を与えます。

http://developer.yahoo.com/yui/grids/ http://960.gs/

1

これは、HTMLのレイアウトの問題です。 Probaly asp.net mvcのレイアウトはあまりよく行われていません。 Web上で 'css column layout'を検索すると、良いレイアウトを達成する方法の例がたくさんあります。 3列のレイアウト技術については、例えば、In Search of the Holy Grail by MATTHEW LEVINEを参照してください。

関連する問題