0

画面サイズが非常に小さいため、私のサイトは完璧にフィットします。

私のサイトが完全にオフに見え、場合によってはナビゲートするのが難しいという電子メールが送られてきました。

www.rawpaste.com

この画像でわかるように: http://i.imgur.com/pQuqb6I.png

サイトをすべての画面サイズに合わせるにはどうすればよいですか?

CSS は次のとおりです: http://rawpaste.com/themes/default/style/root.css

/* ================= Body Styles ================= */
body{
    background:#F4F4F4;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#737F89;}

a{color:#367DB3;}
a:hover{ color:#333;}


/* ================= General ================= */
.wrapper{
    width:980px;
    margin:0px auto;
    padding:50px 0px;}

#main{
    padding-bottom:20px;
    background:#fff url(../img/main-bg.png) repeat-y;
    border-bottom:1px solid #D6D8D8;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow:0px 1px 0px #DFDFDF;}

#sidebar{
    width:188px;
    float:left;
    padding-left:1px;
    padding-right:1px;}

#page{
    width:789px;
    float:right;
    padding-right:1px;
    position:relative;}

.center980{
    margin:0px auto;
    width:980px;}

.content{padding:20px 24px;  line-height:17px;  }


/* ================= Header ================= */
#header{
    height:73px;
    background:url(../img/header-bg.png) no-repeat;}

#header .logo{
    width:190px;
    float:left;
    text-align:center;
    padding:20px 0 0 0;}
#header .logo img:hover{ opacity:0.9;}

#notifications{
    width:430px;
    float:left;
    padding-left:16px;
    padding-top:18px;}
#quickmenu{
    width:150px;
    float:left;
    padding-top:18px;}

.qbutton-left{
    display:block;
    width:42px;
    height:25px;
    float:left;
    background:url(../img/qbutton.png) no-repeat 0px 0px;
    text-align:center;
    position:relative;
    padding-top:11px;}
.qbutton-left:hover{background:url(../img/qbutton.png) no-repeat 0px -36px;}

.qbutton-normal{
    display:block;
    width:42px;
    height:25px;
    float:left;
    background:url(../img/qbutton.png) no-repeat -42px 0px;
    text-align:center;
    position:relative;
    padding-top:11px;}
.qbutton-normal:hover{background:url(../img/qbutton.png) no-repeat -42px -36px;}

.qbutton-right{
    display:block;
    width:43px;
    height:25px;
    float:left;
    background:url(../img/qbutton.png) no-repeat -84px 0px;
    text-align:center;
    position:relative;
    padding-top:11px;}
.qbutton-right:hover{background:url(../img/qbutton.png) no-repeat -84px -36px;}

.qballon{
    background:url(../img/qballon.png) no-repeat;
    width:19px;
    height:21px;
    display:block;
    text-align:center;
    color:#FDEDEC;
    font-size:10px;
    position:absolute;
    top:-12px;
    padding-top:4px;
    right:2px;}

/* ================= Profilebox ================= */
#profilebox{
    width:146px;
    height:46px;
    background:url(../img/profileboxbg.png) no-repeat;
    float:right;
    margin:14px 14px 0 0;
    position:relative;}
#profilebox .display{
    display:block;
    padding:5px 6px;
    font-size:11px;
    color:#A5C6EC;
    line-height:15px;}
#profilebox .display:hover{
    text-decoration:none;}
#profilebox .display img{
    border:0px solid #1D4E76;
    float:left;
    margin-right:7px;}
#profilebox .display b{
    display:block;
    color:#fff;}
#profilebox .display span{
    background:url(../img/arrow-down.png) no-repeat right;
    padding-right:11px;}

#profilebox .display:hover, #profilebox:hover{
    background:url(../img/profileboxbg-hover.png) no-repeat;}

#profilebox:hover .profilemenu, .profilemenu:hover{ display:block;}
.profilemenu{
    display:none;
    background:#3C81B5;
    border:1px solid #1C4D78;
    border-top:none;
    padding-top:3px;
    margin-top:-3px;
    position:relative;
    z-index:1000;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;}
.profilemenu a{
    display:block;
    font-size:11px;
    color:#A5C6EC;
    padding:10px 7px;}
.profilemenu a:hover{
    text-decoration:none;
    color:#fff;
    background:#306997;}

/* ================= Searchbox ================= */
#searchbox{
    display:block;
    background:url(../img/searchbox-bg.png) repeat-x bottom;
    height:65px;}
#searchbox .in{
    padding:15px 0 0 9px;}
#searchbox .input{
    background:url(../img/searchbox.png) no-repeat;
    width:131px;
    border:none;
    font:13px Arial, Helvetica, sans-serif;
    color:#999;
    padding:11px;
    padding-left:30px;}
#searchbox .input-hover{
    background:url(../img/searchbox-hover.png) no-repeat;
    width:131px;
    border:none;
    font:13px Arial, Helvetica, sans-serif;
    color:#666;
    padding:11px;
    padding-left:30px;}
/* ================= Sidemenu ================= */  
#sidemenu{ padding:10px 0px;}
#sidemenu ul{
    font-size:12px;
    line-height:20px;}
#sidemenu li{
    position:relative;}
#sidemenu a{
    display:block;
    color:#596677;
    padding:9px 26px 9px 15px;
    border-top:1px solid #F6F7F9;
    border-bottom:1px solid #F6F7F9;}
#sidemenu a img{
    margin-bottom:-4px;
    margin-right:9px;}
#sidemenu a:hover{
    text-decoration:none;
    background:#EDF1F5;
    color:#3F4C59;
    border-top:1px solid #DCE7F0;
    border-bottom:1px solid #DCE7F0;}
#sidemenu .ballon{
    background:#94B5CF;
    margin-left:6px;
    border-radius:19px;
    font-size:10px;
    font-weight:bold;
    line-height:normal;
    color:#fff;
    position:absolute;
    border:1px solid #739BBF;
    box-shadow:0px 1px 0px #fff;
    right:9px;
    top:11px;
    padding:1px 5px;}
#sidemenu li a:hover .ballon{
    background:#799FC1;
    color:#fff;
    border:1px solid #5384B0;}
#sidemenu .active a{
    background:#fff;
    border-top:1px solid #DFDFDF;
    margin-right:-1px;
    position:relative;
    border-bottom:1px solid #DFDFDF;
    color:#2C71A5;}
#sidemenu .active a .ballon{
    top:10px;
    right:10px;}

/* Submenu */
.submenu{
    padding:0px;
    border-bottom:1px solid #D6D6D6;
    padding-bottom:6px;
    display:none;}
#sidemenu .submenu a{
    padding:5px 12px 5px 40px;
    font-size:11px;}
#sidemenu .submenu img{
    margin-right:8px;}
#sidemenu .submenu .ballon{
    top:7px;}
.submenu .action{
    position:relative;}
.subtitle .action .arrow{
    position:absolute;
    right:10px;
    top:18px;}



/* ================= Stats ================= */
#stats{
    display:none;
    height:65px;
    padding-left:20px;
    background:#FFFADF url(../img/stats-bg.png) repeat-x bottom;}
#stats .column{
    width:150px;
    text-align:center;
    float:left;
    color:#9B936A;
    font-size:11px;
    margin-top:9px;
    padding:2px 0px;
    border-right:1px solid #F0E5BC;}
#stats .column b{
    font-size:22px;
    display:block;
    color:#474643;
    letter-spacing:-0.1px;
    padding-bottom:5px;}
#stats .last{
    border-right:none;}
#stats .column .up{ color:#488D46;}
#stats .column .down{ color:#D73535;}
#stats .close{
    background:url(../img/icons/mini/close-stats.png) no-repeat center;
    width:35px;
    height:35px;
    display:block;
    text-indent:-9999px;
    position:absolute;
    right:0px;
    top:0px;}
#stats .close:hover{
    background:url(../img/icons/mini/close-stats-hover.png) no-repeat center;}
#stats .arrow{
    position:absolute;
    right:186px;
    top:-9px;}


/* ================= Page Title ================= */
.page-title{
    background:url(../img/page-title-minidot.png) repeat-x bottom;
    border-bottom:1px solid #D1D3D3;
    height:63px;}
.page-title .in{
    padding:0px 24px;}
.page-title .titlebar{
    color:#83929F;
    font-size:11px;
    width:480px;
    float:left;
    padding-top:14px;}
.page-title .titlebar h2{
    color:#364656;
    font-size:16px;
    height:24px;}
.page-title .shortcuts-icons{
    width:250px;
    float:right;
    padding-top:19px;}

/* ================= Shortcut ================= */
.shortcut{
    background:url(../img/shortcut-normal.png) no-repeat top left;
    width:25px;
    display:block;
    height:26px;
    float:left;
    margin-left:5px;}
.shortcut:hover{
    background:url(../img/shortcut-hover.png) no-repeat top left;}
.shortcuts-icons a{
    float:right;}


/* ================= Simple Tip ================= */
.simple-tips{
    background:#FFFFCA url(../img/simple-tips-bg.png) repeat-x top;
    border:1px solid #E0DBC2;
    border-radius:3px;
    padding:12px 17px;
    color:#A79955;
    font-size:11px;
    line-height:20px;
    margin:0 0 20px 0;
    position:relative;
    box-shadow:0px 1px 1px #F0F0F0;}
.simple-tips h2{
    display:block;
    color:#6D612E;
    font-size:12px;}
.simple-tips .close{
    background:url(../img/icons/mini/close-stats.png) no-repeat center;
    width:35px;
    height:35px;
    display:block;
    text-indent:-9999px;
    position:absolute;
    right:0px;
    top:0px;}

/* ================= Dashbutton ================= */
.dashbutton-div{
    padding:12px 0px;}
.dashbutton{
    display:block;
    text-align:center;
    width:147px;
    float:left;
    margin-left:-1px;
    margin-bottom:-1px;
    border-radius:1px;
    height:99px;
    font-size:11px;
    color:#7BA5C5;
    padding-top:26px;
    border:1px solid #DCE7F0;
    overflow:hidden;
    background:url(../img/dashbutton-normal.png) repeat-x bottom;}
.dashbutton img{
    margin-bottom:19px;}
.dashbutton b{
    color:#698296;
    display:block;
    font-size:12px;}
.dashbutton:hover{
    background:url(../img/dashbutton-hover.png) repeat-x bottom;
    color:#6798BC;
    border:1px solid #CCDCEA;
    position:relative;}
.dashbutton:hover b{
    color:#4B5F6D;}
.dashbutton:active{
    background:url(../img/dashbutton-active.png) repeat-x top;}


/* ================= Simple Box ================= */
.simplebox{}
.simplebox .titleh{
    border:1px solid #CBDAE8;
    background:url(../img/simplebox-title-bg.png) repeat-x bottom;
    height:40px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    position:relative;}
.simplebox .padding-in{
    padding:10px;
    line-height:18px;}
.simplebox .titleh h3{
    font-size:12px;
    color:#225983;
    padding:13px 0 0 15px;}
.simplebox .shortcuts-icons{
    position:absolute;
    display:block;
    text-align:right;
    right:10px;
    top:8px;}
.simplebox .shortcuts-icons a{
    opacity:0.8;}
.simplebox .body{
    border:1px solid #CBDAE8;
    border-top:none;
    color:#748897;
    box-shadow:0px 1px 0px #eee;
    background:#fff url(../img/simplebox-dot.png) repeat-x top;}
.simplebox .button-box{
    border-top:1px solid #E6EDF4;
    background:#FDFDFD url(../img/simplebox-dot.png) repeat-x top;
    padding:15px 180px;}

/* ================= Simple Title ================= */
.simpletitle{
    font-size:14px;
    color:#215983;
    padding:15px 0px;
    border-bottom:1px solid #CBDAE8;
    position:relative;}
.simpletitle .shortcuts-icons{
    position:absolute;
    display:block;
    text-align:right;
    right:10px;
    top:10px;}

/* ================= Gallery ================= */
.get-photo{
    margin:16px 10px 0 0;
    float:left;
    width:175px;
    font-size:11px;
    font-weight:bold;
    color:#7A899C;
    position:relative;
    height:140px;}
.get-photo img{
    border-radius:1px;}
.get-photo:hover .buttons{
    display:block;}
.get-photo:hover p{color:#53606F;}
.get-photo p{
    padding-top:10px;}
.get-photo .buttons{
    display:none;
    position:absolute;
    top:0;
    right:0;
    padding:5px 4px;}
.mini-delete{
    display:block;
    width:19px;
    height:19px;
    text-indent:-9999px;
    float:right;
    margin-left:3px;
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px 0px;}
.mini-delete:hover{
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -40px;}
.mini-edit{
    display:block;
    width:19px;
    height:19px;
    text-indent:-9999px;
    float:right;
    margin-left:3px;
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -20px;}
.mini-edit:hover{
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -60px;}


/* ================= Error Pages ================= */
.error-page{text-align:center;margin:10px 0;}
.error-page h2{
    font-size:21px;
    line-height:28px;
    padding:14px 0px;}
.error-page .red{ color:#E76463;}
.error-page .blue{ color:#76A6D3;}
.error-page .green{ color:#99C584;}
.error-page p{
    font-size:12px;
    color:#858585;
    line-height:22px;
    padding:24px 0px;
    border-top:1px solid #EDEDED;
    border-bottom:1px solid #EDEDED;}
.error-page .button{
    font-size:14px;
    color:#808080;
    font-weight:bold;
    padding:8px 14px;
    border-radius:3px;
    border:1px solid #C5C5C5;
    border-bottom:1px solid #9D9D9D;
    background:#fff url(../img/error-page-buttonbg.png) repeat-x bottom;}
.error-page .button:hover{
    color:#333;
    box-shadow: 0px 0px 1px #c6c6c6;
    border:1px solid #BCBCBC;
    border-bottom:1px solid #999;}


/* ================= Form Elements ================= */
input, select, textarea{
    background:#fff;
    border:1px solid #D2D4D4;
    border-top:1px solid #A5A6A6;
    border-radius:2px;
    color:#333;
    font:12px Arial, Helvetica, sans-serif;
    padding:7px 6px;}

.st-form-line{
    display:block;
    border-bottom:1px solid #E5E5E5;
    padding:16px 20px;}
.st-labeltext{
    display:block;
    color:#3C5868;
    float:left;
    width:150px;
    line-height:20px;
    font-size:12px;
    padding-top:3px;
    padding-right:10px;}
.st-forminput{
    background:#fff url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #D2D4D4;
    border-top:1px solid #A5A6A6;
    border-radius:2px;
    color:#A5A5A5;
    font:12px Arial, Helvetica, sans-serif;
    padding:7px 6px;}
.st-disable{
    background:#fafafa;}
.st-forminput-active{
    background:#fff url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #B5B7B7;
    border-top:1px solid #8E8F8F;
    border-radius:2px;
    color:#666666;
    font:12px Arial, Helvetica, sans-serif;
    padding:7px 6px;
    width:auto;}

.datepicker-input{
    background:#fff url(../img/datepicker-bg.png) repeat-x top right;
    border-radius:2px;
    color:#666;
    padding:7px 6px;
    border:1px solid #D2D4D4;
    border-top:1px solid #A5A6A6;
    font:12px Arial, Helvetica, sans-serif;}

.st-button{
    background:url(../img/default-button.png) repeat-x top;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #1A527D;
    border-bottom:1px solid #0F3049;
    border-radius:2px;
    padding:6px 10px;
    margin-right:10px;
    text-shadow: 0px -1px #174B73;}

.st-button:hover{
    border:1px solid #133E5C;
    border-bottom:1px solid #0B2436;}

.st-button:active{box-shadow: inset 0 0 0.5em #174B73;}

.st-clear{
    background:#fff url(../img/error-page-buttonbg.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#818181;
    border:1px solid #C5C5C5;
    border-bottom:1px solid #969696;
    border-radius:2px;
    padding:6px 10px;
    margin-right:10px;}

.st-clear:hover{
    border:1px solid #B1B1B1;
    border-bottom:1px solid #878787;}

.st-clear:active{box-shadow: inset 0 0 0.5em #ccc;}


.st-success-input{
    background:#EAF2EC url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #A9CFB0;
    border-top:1px solid #85A38B;
    border-radius:2px;
    color:#55A163;
    font:12px Arial, Helvetica, sans-serif;
    padding:8px 6px;}
.st-form-success{
    color:#437E4C;
    font-size:12px;
    margin-left:10px;}

.st-error-input{
    background:#FBF4F5 url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #E2B5BE;
    border-top:1px solid #B28F96;
    border-radius:2px;
    color:#99626B;
    font:12px Arial, Helvetica, sans-serif;
    padding:8px 6px;}
.st-form-error{
    color:#99616B;
    font-size:12px;
    margin-left:10px;}



/* ================= Chart ================= */
.chart{
    background:#EAF0F6;
    padding-bottom:14px;}

/* ================= Tiny Title ================= */
.st-tinytitle{
    padding:7px 0 13px 0;
    border-bottom:1px solid #EBF1F6;
    margin-bottom:20px;}
.st-tinytitle h3{
    color:#727F88;
    padding-bottom:5px;
    font-size:14px;}
.st-tinytitle p{
    color:#87929A;
    font-size:11px;
    line-height:15px;}


/* ================= Alert Boxes ================= */
.albox{
    font-size:12px;
    line-height:17px;
    box-shadow:0px 1px 0px #F7F7F7;
    position:relative;
    margin:15px 0px;
    padding:14px 42px;
    border-radius:3px;}
.albox .close{
    display:block;
    position:absolute;
    width:30px;
    height:30px;
    text-indent:-9999px;
    right:0;
    top:0;
    background:url(../img/icons/mini/close-opacity-21.png) no-repeat center;}
.albox .close:hover{
    background:url(../img/icons/mini/close-opacity-42.png) no-repeat center;}
.albox .icon{
    position:absolute;
    left:14px;
    top:14px;}
.warningbox{
    background:#FFF8D8 url(../img/icons/error/error.png) no-repeat 14px 14px;
    border:1px solid #F3D97E;
    color:#A68510;}
.succesbox{
    background:#EBF9E2 url(../img/icons/error/accept.png) no-repeat 14px 14px;
    border:1px solid #BEE4A5;
    color:#658C2C;}
.informationbox{
    background:#E9F3F8 url(../img/icons/error/help.png) no-repeat 14px 14px;
    border:1px solid #BBD7E4;
    color:#3876C6;}
.errorbox{
    background:#F8E9E9 url(../img/icons/error/cross.png) no-repeat 14px 14px;
    border:1px solid #E4BBBC;
    color:#BF2C11;}

/* ================= Dialog Boxes ================= */
.dialogbox{
    background:#F8F8F8;
    border:1px solid #DEDEDE;
    color:#666;}

/* ================= Icon Buttons ================= */
.icon-button{
    border-radius:4px;
    margin:2px;
    padding:8px 10px;
    border:1px solid #CDDCEA;
    border-bottom:1px solid #B8C6D2;
    background:#fff url(../img/iconbutton-bg.png) repeat-x bottom;}
.icon-button:hover{
    border:1px solid #AFC8DD;
    border-bottom:1px solid #96ABBC;}
.icon-button img{
    margin-bottom:-5px;}
.icon-button:active{
    background:#fff url(../img/icon-button-bg-active.png) repeat-x top;}
.icon-button span{
    padding-left:8px;
    color:#2E71A5;}
.icon-button a:hover span{
    color:#2E71A5;}




/* ================= Button Styles ================= */
.button-blue{
    background:#4088BF url(../img/button-blue.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #1A527D;
    border-bottom:1px solid #0F3049;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #174B73;}
.button-blue:hover{
    border:1px solid #0F3049;
    border-bottom:1px solid #0F3049; opacity:0.95;}
.button-blue:active{box-shadow: inset 0 0 0.5em #174B73;}

.button-aqua{
    background:#519EAC url(../img/button-aqua.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #27676E;
    border-bottom:1px solid #173C40;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #27676E;}
.button-aqua:hover{
    border:1px solid #173C40;
    border-bottom:1px solid #173C40; opacity:0.95;}
.button-aqua:active{box-shadow: inset 0 0 0.5em #174B73;}

.button-green{
    background:#51AC53 url(../img/button-green.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #276E27;
    border-bottom:1px solid #174017;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #276E27;}
.button-green:hover{
    border:1px solid #174017;
    border-bottom:1px solid #174017; opacity:0.95;}
.button-green:active{box-shadow: inset 0 0 0.5em #174017;}

.button-gray{
    background:#fff url(../img/button-gray.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#818181;
    border:1px solid #C5C5C5;
    border-bottom:1px solid #969696;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #fff;}
.button-gray:hover{
    border:1px solid #969696;
    color:#666;
    border-bottom:1px solid #969696; opacity:0.95;}
.button-gray:active{box-shadow: inset 0 0 0.5em #ccc;}

.button-red{
    background:#A2665B url(../img/button-red.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #67352E;
    border-bottom:1px solid #3C1F1B;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #67352E;}
.button-red:hover{
    border:1px solid #3C1F1B;
    color:#666;
    border-bottom:1px solid #3C1F1B; opacity:0.95;}
.button-red:active{box-shadow: inset 0 0 0.5em #3C1F1B;}

.button-blue:hover, .button-aqua:hover, .button-green:hover, .button-red:hover{ color:#fff;}




/* ================= Pagination ================= */

.pagination{
    text-align:center;
    padding:20px 0px;}
.pagination li{
    display:inline;
    text-align:center;
    font-size:12px;
    color:#3E7CAC;
    padding-right:3px;
    font-weight:bold;}
.pagination li a{
    color:#3E7CAC;
    border:1px solid #D6D6D6;
    border-radius:3px;
    background:url(../img/simplebox-title-bg.png) repeat-x bottom;
    padding:8px 12px;
    box-shadow:0px 1px 1px #EDEDED;}
.pagination li a:hover{
    border:1px solid #C5C5C5;
    color:#333;}
.pagination li a:active{
    box-shadow: inset 0 0 0.5em #D6D6D6;}


/* ================= Page Wrap ================= */
.pagewrap{
    background:url(../img/pagewrapbg.png) repeat-x bottom;
    border-top:1px solid #CBDAE8;
    border-bottom:1px solid #CBDAE8;
    font-size:12px;
    color:#859099;
    padding-left:5px;
    height:38px;}
.pagewrap li{
    display:inline;
    background:url(../img/page-wrap-libg.png) no-repeat right;
    line-height:38px;
    padding:12px 20px 12px 8px;}
.pagewrap a{
    color:#859099;}
.pagewrap a:hover{
    color:#344654;}


/* ================= Statistics ================= */
.statistics{ padding:0;}
.statistics li{
    border-bottom:1px solid #E3EBF3;
    padding:12px 14px;
    display:block;
    position:relative;}
.statistics li p{
    display:block;
    position:absolute;
    text-align:right;
    right:14px;
    top:12px;}
.statistics .green{ color:#308359;}
.statistics .blue{ color:#4B789A;}
.statistics .red{ color:#CD6557;}

/* ================= Toggle Message ================= */
.toggle-message{
    background:#F7F9FC url(../img/toogle-message-bg.png) repeat-x top;
    border:1px solid #CBDAE8;
    cursor:pointer;
    border-radius:2px;
    position:relative;
    line-height:21px;}
.toggle-message .title{
    color:#40515E;
    padding:10px 15px;}
.toggle-message:hover{
    border:1px solid #B3C9DD;}
.toggle-message .title:hover{
    color:#344654;}
.toggle-message .hide-message{
    color:#586873;
    padding:15px;
    display:none;
    padding-top:0;}
.toggle-message .d-icon{
    position:absolute;
    right:15px;
    top:19px;}

/* ================= Tabs ================= */
#tabs{border:1px solid #fff;}

/* ================= Sliders ================= */
#slider-range-max, #slider-range, #slider{
    border:1px solid #D2D4D4;
    background:#EBF5FE;
    height:10px;
    border-top:2px solid #A6A7A7;
    border-radius:20px;}

/* ================= Accordion ================= */
#accordion{
    border-radius:0px;}
#accordion h3 a{
    color:#40515E;
    border-radius:0px;
    font:bold 12px Arial, Helvetica, sans-serif;
    background:none;}

/* ================= Imagebox ================= */
.imagebox{
    padding:15px;}
.imagebox img{
    float:left;
    margin:2px;
    border:2px solid #fff;}
.imagebox img:hover{
    border:2px solid #215983;}


/* ================= Loading Box ================= */
.loadingbox{
    text-align:center;
    padding:35px 10px;
    border:1px solid #CBDAE8;
    color:#9BA4AB;
    font-size:11px;
    line-height:19px;}
.loadingbox h3{
    font-size:20px;
    color:#344654;
    padding:20px 0px;}


/* ================= Footer ================= */
#footer{
    color:#B3C6D5;
    font-size:11px;
    line-height:17px;
    padding:20px 0 0 0;}
#footer .left-column{
    float:left;
    width:660px;}
#footer .right-column{
    float:right;
    width:280px;
    text-align:right;}


/* ================= Login Form ================= */
.loginform{
    width:360px;
    margin:0px auto;
    margin-top:50px;
    box-shadow:0px 4px 90px #EEEEEE;
}
.loginform .title{
    background:url(../img/login-title.png) no-repeat;
    text-align:center;
    height:50px;
    padding-top:20px;}
.loginform .body{
    padding:23px 29px 40px 29px;
    background:url(../img/login-form-body-bg.png) repeat-x bottom;}
.login-input-pass{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#B6C3C9;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/password-input.png) repeat-x top;}
.login-input-pass-active{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#8A9EA8;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/password-input.png) repeat-x top;}
.login-input-user{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#B6C3C9;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/username-input.png) repeat-x top;}
.login-input-user-active{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#8A9EA8;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/username-input.png) repeat-x top;}

.loginform .log-lab{
    color:#A4AAB2;
    font-size:14px;
    font-weight:bold;
    display:block;
    padding-bottom:11px;}
.loginform .button{
    width:300px;
    height:49px;
    font:bold 16px Arial, Helvetica, sans-serif;
    color:#fff;
    background:url(../img/login-button.png) no-repeat 0px 0px;
    border:none;}
.loginform .button:hover{
    background:url(../img/login-button.png) no-repeat 0px -50px;}
.loginform .button:active{
    background:url(../img/login-button.png) no-repeat 0px -100px;}

/* input */
input.post_input,select.post_select {
    font-family:trebuchet MS,Lucida Sans Unicode, Lucida Sans, Sans-Serif;
    background-color:#F9F9F9;
    width:160px;
    border:1px solid #ccc;
    color:#181818;
    font-size:1em;
    padding:5px;
}
input.post_input {
    width:160px;
}
/* Max lenght */
.notification {
    border:3px solid #d55b5b;
    background-color: #ffcdcd;
    padding:5px;
}
4

3 に答える 3

2

解決策は難しいですが、完全に実行可能です! 以前の仕事では、すべての画面解像度に合わせる必要がある 2 列スタイルのレイアウトで、同様の問題を解決しなければなりませんでした。

まず (幅については後で説明します)、2 つの列 (「サイドバー」と「ページ」) に「表のような」感じを持たせたいと考えています。つまり、サイドバーがページのコンテンツよりも高い場合、 「ページ」列の背景は一番下 (サイドバーと同じ高さ) まで拡張する必要があり、その逆も同様です。これを達成するために、次のように少し div-ception を行います。

<div id="main">
    <div id="two_columns">
        <div id="sidebar">
            <!-- Content goes here -->
        </div>
        <div id="page">
            <!-- Content goes here -->
        </div>
        <!-- Cross-browser clearing of floats -->
        <div style="clear:both;"></div>
    </div>
</div>

ここでやりたいことは、"main" に "sidebar" と同じ背景を、"two_columns" に "page" と同じ背景を与えることです。このように、「サイドバー」または「ページ」のいずれかの高さが大きくなると、「メイン」と「2 列」の両方の高さが強制的に大きくなります。

第二に、これがすべての画面解像度に適合することを確認したいと考えています。幸いなことに、この div-ception セットアップはこれに適しています。簡単にするために、背景は色であると仮定します。

#main {
    /*
        No width shall be set!  It will expand to
        fit inside its parent.
    */
    background-color:#e5e5e5;
    border:1px solid #aeaeae; /* I think borders are pretty */
}

#two_column {
    margin-left:190px; /* width is 190px less than parent ("main") */
    background-color:#fff;
}

#sidebar {
    margin-left:-190px;
    float:left;
    width:189px;
    border-right:1px solid #aeaeae; /* Borders are pretty */
}

#page {
    float:right;
    /*
        Fill to width of parent container "two_column" which
        is "main"s width - 190 (and "main" might be the same
        width as the body, if you so choose).
    */
    width:100%;
}

そしてブーム！それはそれを行う必要があります。

于 2013-03-13T03:05:33.867 に答える
0

これを変える ：

#page {
width: 789px;
float: left;
padding-right: 1px;
position: relative;
}

また、小さな画面のメイン コンテナーに幅を設定する必要があります。

#main {
width: 1000px;
}

ここに画像の説明を入力

于 2013-03-13T01:26:58.863 に答える
0

固定幅に基づいてサイトを設計しました - 簡単な修正は、本文にも幅を設定することです -

body {
width: 980px;
}

大きい (小さい画面でも) サイトの見栄えを良くしたい場合は、レスポンシブ デザイン ソリューションの採用を検討する必要があります。優れたフレームワークには、zurb 財団 ( http://foundation.zurb.com/ ) や twitter ブートストラップ ( http://twitter.github.com/bootstrap/ ) が含まれます。

于 2013-03-13T01:34:33.390 に答える