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

解决方案很棘手，但它完全可行！在以前的工作中，我不得不解决一个类似的问题，我们有一个需要适应所有屏幕分辨率的两列样式布局。

首先（我们稍后会处理宽度），我们想要为两列（“sidebar”和“page”）创建一种“类似表格”的感觉，这意味着如果侧边栏高于页面中的内容， “页面”列的背景应该一直延伸到底部（与侧边栏高度相同），反之亦然。为了做到这一点，我们做了一些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”一样的背景。这样，当“sidebar”或“page”的高度增加时，“main”和“two_columns”都被迫随之增加高度。

其次，我们要确保这可以适合所有屏幕分辨率。幸运的是，这种 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

您已经根据固定宽度设计了您的网站 - 快速解决方法是在 body 上设置宽度 -

body {
width: 980px;
}

如果您真的希望您的网站在更大（和更小）的屏幕上看起来不错，您应该考虑采用响应式设计解决方案。优秀的框架包括 zurb 基础：http ://foundation.zurb.com/以及 twitter bootstrap：http: //twitter.github.com/bootstrap/

于 2013-03-13T01:34:33.390 回答
0

改变这个：

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

您还应该为小屏幕的主容器设置宽度：

#main {
width: 1000px;
}

在此处输入图像描述

于 2013-03-13T01:26:58.863 回答