2009-05-14 3 views
0

pretty magazineのレイアウト/ marketing-esqパンフレット以外のマージンを適用する場合、http://960.gsまたはhttp://blueprintcss.orgのいずれかを使用する点はありません。ヘッダーに実際に触れる/折り返すことができるNavbarなどの特定の設計要件を満たすためにこれらを使用する方法はありますか? これらのフレームワークをマージンなしで使用するための入力は、CSSの熟練度の低い開発者にブラウザの互換性を強制するため、理想的です。(注:私たちはJSFを使用しています。これはWebショップではなく開発店でもあります)CSSフレームワーク(つまり:960gsまたはBlueprintcss)をマージンなしで使用できますか?

答えて

2

私は私の究極のCSSレイアウトの技術として、このテクニックを使用します。

http://www.codeofficer.com/blog/entry/css_grid_frameworks_960gs_without_margins/

私はかつて同じ問題があったが、私は1つ、すべてのマージン頭痛が消えるを持っていることを使用しているため。 私は!重要なを使用して、カスタムの幅/高さを使用する必要がある場合に使用します。

コード:

<div class="g_9 content_main"> 
    This div should actually have 720px in width. 
    But I overide it using another class so now the width has become 700px, 
    and just in case it needs custom margin, we can always set it in the css :) 
</div> 

CSS:

.c_12 .g_9, .c_16 .g_12 { width: 720px; } /* 960-full.css */ 
.content_main { width: 700px !important; margin-left: 15px;} /* style.css */ 
0

サイトの各部門にグリッドクラスを使用する必要はありません。ヘッダーがグリッドレイアウトに従う必要がない場合は、ヘッダーに独自のスタイルを作成します。グリッドを完全にスキップし、フォーム&のタイポグラフィマークアップを使用することもできます。このフレームワークは、プロジェクトに一定の一貫性を持たせるための試みです。

私は主な内容について青写真を使用していますが、ヘッダー領域には独自のカスタムレイアウトがあります。

関連する問題