2012-03-04 20 views
1

私は自分のテーマをdrupal用に作成していますが、サイドバーがないときはコンテンツの幅が100%で、サイドバーがあるときはコンテンツが横方向に縮小されてサイドバーに余裕ができます。ここでは構造の例です:コンテンツがサイドバーコンテンツでない場合、コンテンツを100%に拡張するにはどうすればよいですか?

<div id='container'> 
    <div id='content'></div> 
    <div id='sidebar'></div> 
</div> 

enter image description here

私がこれまでに達成するために管理しているすべてのコンテンツがそれを包む右、遠いイメージです。

私はこれだけCSSを使用して行うことを好むでしょう。

+0

これはサーバー側で行うのが理想的だと思われます。それはすべて可能ですか? – michaelward82

+0

@ michaelward82おそらく、私はDrupalやPHPの実際の経験がないので、どこから始めたらいいのかわかりません。 – Supertod

答えて

1

マークアップにサイドバーを挿入し、絶対に配置します。それはサイドバーを以下のときにコンテンツに右マージンを与えるために、隣接兄弟セレクタ(+)を使用します。

#sidebar { 
    position: absolute; 
    right: 0; 
    width: 150px; 
} 
#sidebar + #content { 
    margin-right: 150px; 
} 

デモ:http://jsfiddle.net/cH4ZY/2/

+0

完璧!正確に私が探していたもの、ありがとう。 – Supertod

1

サイドバーがないときにクラスをコンテナに追加できる場合は、これを行うことができます。

#container.wide #content { 
    width: 100%; 
} 
#container.wide #sidebar { 
    display: none; 
} 
0

あなたdrupalの非サイドバー HTML構造が、この場合には:

<div id='container'> 
    <div id='content'></div> 
</div> 

そして、あなたの典型的なcontentスタイリング後のcss以下追加するだけである場合にのみ、100%の幅が発生するようになりますcontainercontent divは、コンテナのlast-childになるためです。 sidebarが存在する場合、sidebarlast-childになり、このCSSはcontentに対してトリガーされません。

#container > #content:last-child { 
    width: 100%; 
} 
0

あなたはまた、ちょうど2つの異なる基本テーマを微調整することができます(1と1つはサイドバーなし)、次にThemekeyのようなモジュールを使用して、サイトのどの部分にどのテーマが表示されているかを判断します。私は "管理"のために1列のテーマを使用する傾向がありますが、ほとんどのコンテンツページに表示される2列または3列のものと同じ "ルックアンドフィール"を持つようにカスタマイズするのは簡単です。

テーマを変更することもできますが、一部のページで同様のテーマ(たとえば単一の列)を選択する方が、テーマごとに動的に変更し、異なる部分で異なる方法で表示する方が簡単でしょうあなたのサイトの

関連する問題