汎用的なレイアウトのサンプル
以前おおくりしました、
企業HPでよく見る逆U字(3列)テンプレートの汎用的CSSを実装してみた。にて、
若干の欠陥がありましたので修正しました。
欠陥内容はIE5系、IE6系でずれるというものです。
ではさっそく新しい版です。
@charset "utf-8"; /* CSS Document */ body { text-align:center; font-size:12px; } *{ padding:0; margin:0; } .html_body { width:902px; margin: 0 auto; } .contents { width:902px; float: left; margin: 0; padding: 0; } .header { width:901px; } .navigation { width:198px; float:left; text-align:left; font-weight:bold; margin: 0; padding: 0; } .main_contents { margin: 0 0 0 10px; padding: 0; width: 500px; float: left; } .right_contents { text-align:center; float: right; width:180px; padding: 15px 0; margin: 0; } .footer { width:901px; } h1{ font-size:12px; margin:0; padding:0; text-align:left; } .br1 { margin:10px; } .br2 { margin:20px; } .menu { text-align:left; width:450px; } #header h2 { height: 150px; width: 902px; background-image: url(..............); text-indent: -9999px; display: block; } #header { margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } .footer { height: 100px; width: 902px; clear: both; }
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/layout.css"/> </head> <body> <div class="html_body"> <div id="header"> <!-- ヘッダの定義をここに書く --> </div> <div class="contents"> <div class="navigation"> <!-- 左ナヴィゲーション定義をここに書く --> </div> <div class="main_contents"> <!-- 中央の管理をここに書く --> </div> <div class="right_contents"> <!-- 右ナヴィゲーション定義をここに書く --> </div> </div> <div class="footer"> <!-- 左ナヴィゲーション定義をここに書く --> </div> </div> </body> </html>
これを現在自分のサイトで使用しているので、
汎用性が欠けるものになっていますが、
カスタマイズして使用してください。
よろしく。