1. 首页
  2. 问答
  3. 网站不适合所有屏幕分辨率

网站不适合所有屏幕分辨率

2013-03-13 87 views
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; 
}

来源

2013-03-13 user2163383

+0

你不知道你想做什么。无论窗户的大小如何，它都会看起来很不错。 – woz 2013-03-13 01:28:58

+0

也许你应该考虑使用一个CSS网格库来帮助你消除小细节。 – 2013-03-13 01:31:49

回答

0

改变这一点：

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

你也应该把宽度主容器为小屏幕：

#main { 
width: 1000px; 
}

enter image description here

来源

2013-03-13 01:26:58 bleuscyther

+0

那个div会受到侧边栏女巫的影响也是float：left？ – user2163383 2013-03-13 01:30:41

+0

编辑帖子 – bleuscyther 2013-03-13 01:31:25

+0

#main { width：1000px; } 100％的工作效果比1000px更好 – user2163383 2013-03-13 01:33:50

0

你已经设计了一种基于固定宽度您的网站 - 快速修复是设置在机身的宽度，以及 -

body { 
width: 980px; 
}

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

来源

2013-03-13 01:34:33 jarmie

+0

我将其更改为1000px，但标题现在在我的屏幕上已经不同了： http://puu.sh/2gLqE – user2163383 2013-03-13 01:43:13

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>

我们要在这里做的是给“主”相同的背景为“侧边栏”和“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%; 
}

和BOOM！这应该做到这一点。

来源

2013-03-13 03:05:33

+0

这是否有帮助？ – 2013-03-18 03:52:39

相关问题

 相关问题