カスタマイズの備忘録

サンプルコード

2012.09.09.  ←ページ内リンクあれこれ →非公開変数<!--page_area--><!--/page_area-->の異変

左右カラム可変 リキッドレイアウトサンプル



幅 600px 右サイドメニュー



html { _overflow-x: scroll; }/*IE6 縮小画面の時の横スクロール用*/

.container {
margin : 0px auto ;
max-width : 600px;_width : 600px;
text-align : left ; }

.layout_main {
float : left;
width : 65%;_width : 400px; }

div.layout_side {
float : right;
width : 30%;_width : 180px; overflow: hidden;}


ポップアップ表示 基準は#wrapper スクロールと連動


#wrapperを基準にホップアップさせた場合、position:absoluteを指定しても親ブロック(.main)で_position: relative を指定しておかないと、IE6では表示位置が固定されてしまい、縮小画面にした時見えない部分が出来るので注意

#index .all .main { _position: relative ; }/*IE6ポップアップ固定防止のため*/

#index .all #wrapper { position: relative;_position:static ; }

.popupcard { width:67%;max-width:400px;_width:400px;
right: 30%; top:40px;_top:320px;_right:50%;
z-index:1; visibility:hidden; position:absolute;text-align:center;
}

.layout_side .popupcard { margin:0 ;background-image :none ;}

.popupin {
max-width:300px;_width:300px;
margin:40px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:5px 10px;text-align : center ;
border:line-height:200%;background-color:#ffffff;border:3px double #C2A858 ; }

#step2 .popupin { margin-top:20px;max-width:350px;_width:350px ; }

.popupin2 {
max-width:320px;_width:320px;max-height:200px;_height:200px;overflow: auto;
margin:20px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:0 1em 0 1.5em;text-align : left ;
line-height: 150%;
background-color:#ffffff;border:3px double #C2A858;
}
.layout_side .popupin2{max-height:220px;padding:1em ;_position: relative ; }

.popupcard h3{
margin:0 auto ;_margin : 0px -100px 0 auto;_width:400px;
padding : 0px ;font-weight: bold;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;
}
#index .side_menu .popupcard h3{
max-width:400px;_width:400px;_position: relative;_margin : 20px -100px 0 auto;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;}

.pop_free {max-width:350px;_width:350px;margin-top:20px;max-height:350px;_height:auto;line-height:150%;overflow: auto;text-align : left ;
}

/*背景画像の表示領域を確保するための設定*/
#index .topindex { min-height:〇〇px;_〇〇px ; }
hr.bg_line { visibility:hidden; }/*トップ画像が一枚絵展示スタイル*/

hr.bg_line { dispaly:none; }/*一枚絵展示でなければ非表示設定でOK*/

GタイプJタイプ対応のための背景設定


/*#wrapperで背景指定する場合*/

#index .all div#wrapper {
min-height:〇〇px;_height:〇〇px;
background-image : url("画像ファイル");
background-repeat : no-repeat ;
background-position : left bottom;}


#index .all div#wrapper {overflow: hidden;}

#index .all div#wrapper:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html #index .all div#wrapper {
height: 1em;_height:1em;
overflow: visible;
}
/**/
関連記事

カスタマイズの備忘録

トラックバックURL
http://noveltemplate.blog26.fc2.com/tb.php/676-3f059d34
0コメントを見る
コメントを書く
0トラックバック