My site—as my screen size is quite small—fits perfectly.
E-mails sent to me stating my site looks completely off and in some cases hard to navigate.
www.rawpaste.com
As you can see on this image:
http://i.imgur.com/pQuqb6I.png
How do I make the site fit all screen sizes?
Here is the 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;
}
The solution is tricky BUT it's totally do-able! I had to solve a similar problem at a former job where we had a two-column style layout that needed to fit all screen resolutions.
FIRST (we'll deal with width later), we want to create a "table-like" feel for the two columns ("sidebar" and "page"), which means if the sidebar is taller than the content in a page, the background of the "page" column should extend all the way to the bottom (same height as sidebar), and vise-versa. To accomplish this, we do a little div-ception as follows:
<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>
What we want to do here is give "main" the same background as "sidebar" and "two_columns" the same background as "page". This way, when either "sidebar" or "page" grow in height, BOTH "main" and "two_columns" are forced to grow in height with it.
SECONDLY, we want to ensure that this can fit ALL screen resolutions. Luckily, this div-ception setup is well suited for this. We'll pretend the backgrounds are colours for simplicity.
#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%;
}
And BOOM! That should do it.
change this :
#page {
width: 789px;
float: left;
padding-right: 1px;
position: relative;
}
also you should put a width to the main container for small screens:
#main {
width: 1000px;
}
You've designed your site based on a fixed width - quick fix would be to set a width on the body as well -
body {
width: 980px;
}
If you really want your site to look good on larger (and smaller screens) you should consider adapting a responsive design solution. Great frameworks include zurb foundation: http://foundation.zurb.com/ as well as twitter bootstrap : http://twitter.github.com/bootstrap/
Related
i have a navbar that resizes when you have a smaller device, it works very well and very responsive, however when i link to the services.html#templates the margin top for the container does not work at all and i have blank space at the bottom of it, here is the html and css:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to FinalProject</title>
<!-- Link to the master style -->
<link href="styles/master.css" type="text/css" rel="stylesheet">
<link href="styles/table.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="js/menu.js"></script>
</head>
<body>
<nav>
<div id="leftlogo">
<div id="toggler">
☰
</div>
<a href="index.html">
<span id="logo">
</span>
</a>
</div>
<ul id="menu">
<li>About Us</li>
<li>Contact Us</li>
<li>Services</li>
<li>Members</li>
</ul>
</nav>
<div id="container">
<main>
<div class="title">
Services
</div>
<table>
<tr>
<th></th>
<th class="type">Personal</th>
<th class="type">Business</th>
</tr>
<tr>
<th class="left">Bandwidth</th>
<td>15GB</td>
<td>1TB</td>
</tr>
<tr>
<th class="left">Domain Name</th>
<td>Yes, charged</td>
<td>Yes, free (if not premium)</td>
</tr>
<tr>
<th class="left">Hosting</th>
<td>Yes, charged</td>
<td>Yes, charged</td>
</tr>
<tr>
<th class="left">Customizable</th>
<td>Yes, charged</td>
<td>Yes, free</td>
</tr>
<tr>
<th class="left">Delivery</th>
<td>Faster</td>
<td>Fast</td>
</tr>
<tr>
<th class="left">suitable for</th>
<td>Artists, bloggers, vloggers, etc...</td>
<td>Companies, startups, organizations, etc...</td>
</tr>
<tr>
<th class="left">Pricing</th>
<td>$75/month +</td>
<td>$400/month +</td>
</tr>
<tr>
<th></th>
<td class="bigger" id="personal">Buy Personal</td>
<td class="bigger" id="business">Buy Business</td>
</tr>
</table>
<div class="title">
Templates
</div>
<div class="section" id="templates">
<img src="images/customize.png" class="leftimage">
<div class="smtitle righttext">Templates</div>
<div class="righttext">
<div class="template"><img src="images/globe.png">Template #1</div>
<div class="template"><img src="images/user.png">Template #2</div>
<div class="template"><img src="images/brain.png">Template #3</div>
<div class="template"><img src="images/customize.png">Template #4</div>
<div class="template"><img src="images/framework.png">Template #5</div>
<div class="template"><img src="images/speed.png">Template #6</div>
<div class="righttext">More...</div>
</div>
</div>
</main>
</div>
<footer>
<div id="leftfooter">
<script type="text/javascript">
var year = new Date();
year = year.getFullYear();
document.getElementById('leftfooter').innerHTML = year+' © Copyrighted Peter Bou Saada';
</script>
</div>
<div id="rightfooter">
Inquiries? Send me an Email
</div>
</footer>
</body>
</html>
here is master.css:
/* precautions to prevent any default margins or paddings set by the users browser*/
body,html{
margin:0;
padding:0;
width:100%;
height:100%;
}
body{
overflow:hidden;
}
*{
box-sizing: border-box;
overflow:none;
font-family:Helvetica,Arial,Sans-serif;
}
*::selection {
background: #FF6500;
}
*::-moz-selection {
background: #FF6500;
}
nav{
position:fixed;
width:100%;
top:0;
height:70px;
background-color:#222222;
border-bottom:1px solid #FF6500;
-webkit-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 100px -9px rgba(255,101,0,1);
}
nav ul{
width:50%;
float:right;
text-align:left;
padding:0;
margin:0;
}
nav ul li{
display:inline;
list-style-type:none;
padding-right:1em;
text-align:center;
}
nav ul li>a{
color:#FF6500;
text-decoration: none;
font-size:1.3em;
font-family:Helvetica,Arial,Sans-serif;
line-height:65px;
text-shadow:0px 0px 5px rgba(220,220,220,0.5);
transition:all 0.3s ease-out;
border-bottom:0px;
}
nav ul:hover li a{
opacity: 0.5;
}
nav ul li>a:hover{
color:#f7f7f7;
border-bottom:4px solid #FF6500;
opacity:1;
}
#toggler{
float:left;
display:none;
}
#leftlogo{
width:50%;
height:70px;
float:left;
margin:0;
padding:0;
}
#logo{
float:right;
height:70px;
width:100px;
margin-right:50px;
background-image:url('../images/finallogo.png');
background-size: 100%;
background-repeat: no-repeat;
}
#container{
margin:0;
padding:0;
height:calc(100% - 100px);
width:100%;
background-color:#333333;
padding:30px;
margin-top:70px;
margin-bottom:30px;
overflow-y:auto;
}
main{
width:80%;
margin:auto;
color:#d7d7d7;
font-size:1.2em;
letter-spacing: 0.5px;
font-family:Helvetica,Arial,Sans-serif;
}
footer{
margin:0;
padding:0;
position:fixed;
bottom:0;
width:100%;
height:30px;
background-color:#292929;
border-top:1px solid #FF6500;
line-height:30px;
color:#f7f7f7;
}
#leftfooter{
float:left;
width:50%;
padding-left:10%;
}
#rightfooter{
float:right;
width:50%;
text-align:right;
padding-right:10%;
}
#rightfooter>a{
color:#FF6500;
text-decoration: none;
}
.title{
text-align:center;
width:100%;
font-size:1.7em;
font-weight:bold;
margin-bottom:30px;
text-shadow:3px 3px 5px #222222;
}
.smtitle{
width:100%;
font-size:1.7em;
font-weight:bold;
text-shadow:3px 3px 5px #222222;
}
.section{
width:100%;
margin:0;
padding:0;
display:inline-block;
margin-bottom:30px;
transition:all ease-in 0.2s;
}
.section:hover{
border-bottom:5px solid #FF6500;
border-top:5px solid #FF6500;
padding-top:10%;
padding-bottom:10%;
}
.righttext{
padding:0 15px;
float:left;
text-align:left;
width:70%;
text-shadow:3px 3px 5px #222222;
}
.rightimage{
float:right;
width:30%;
}
.leftimage{
float:left;
width:30%;
}
.lefttext{
text-shadow:3px 3px 5px #222222;
padding:0 15px;
float:left;
text-align:left;
width:70%;
}
.section a{
color:#788893;
text-decoration:none;
}
.section a:hover{
color:#f7f7f7;
}
.normal{
width:35%;
margin:auto;
}
dt{
font-weight:bold;
font-size:1.1em;
text-shadow:2px 2px 4px #222222;
}
/* contact form */
#contact{
width:60%;
margin:auto;
}
#contact label{
width:100%;
display:inline-block;
}
#contact input, #contact textarea{
width:100%;
padding:15px 0;
font-size:1.5em;
background-color:#333333;
border:none;
color:#f7f7f7;
border-bottom:5px solid #7a7a7a;
transition:all ease-in 0.3s;
outline:none;
resize:none;
}
#contact input:focus, #contact textarea:focus{
border-bottom:5px solid #f7f7f7;
}
.form-group{
width:100%;
margin-bottom:15px;
}
.button{
width:20%;
margin-right:40%;
margin-left: 40%;
padding:10px;
border-radius:8px;
background-color:#333333;
border:1px solid #f7f7f7;
color:#f7f7f7;
font-weight:bold;
outline:none;
cursor:pointer;
transition: all ease-in 0.2s;
}
.button:hover{
border:none;
border-bottom:5px solid #f7f7f7;
border-radius:0;
width:40%;
margin-left:30%;
margin-right:30%;
background-color:#ff6500;
}
.button:active{
border-bottom:1px solid #f7f7f7;
margin-top : +4px;
}
#count{
text-shadow:5px 5px 8px #222222;
margin-bottom:10px;
}
.button[disabled]{
display:none;
}
.template{
width:25%;
padding:10px;
height:200px;
display:inline-block;
background:#292929;
margin:10px;
text-align:center;
}
.template img{
width:100%;
height:90%;
margin:0;
}
/* custom scrollbar for webkit browsers only */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 20px rgba(255,101,0,1);
}
/* Mobile and tablets */
#media only screen and (max-width:1024px){
nav{
height:50px;
}
nav ul{
margin-top:50px;
height:calc(100% - 50px);
width:100%;
position:fixed;
display:none;
background-color:rgba(0,0,0,0.7);
}
nav ul:hover li a{
opacity:0.7;
}
nav ul li:hover{
color:#f7f7f7;
border-bottom:4px solid #FF6500;
opacity:1;
}
nav ul li:hover a{
color:#f7f7f7;
border-bottom:none;
opacity:1;
}
nav ul li{
width:100%;
height:50px;
line-height:50px;
display:inline-block;
text-align:center;
background:rgba(22,22,22,0.7);
border-bottom:1px solid #FF6500;
}
nav ul li a{
line-height:50px;
}
#leftlogo{
width:100%;
height:50px;
}
#logo{
float:left;
height:50px;
width:200px;
background-image:url('../images/smlogo.png');
}
#toggler{
display:inline;
margin:0 2%;
font-size:1.5em;
line-height:50px;
font-weight:bold;
color:#FF6500;
cursor:pointer;
transition:all ease-in 0.2s;
}
#toggler:hover{
text-shadow:0 0 1px #f7f7f7;
}
#container{
margin-top:50px;
height:calc(100% - 80px);
}
.section:hover{
border:none;
padding-top:0;
padding-bottom:0;
}
.button{
width:40%;
margin-left:30%;
margin-right:30%;
}
#contact{
width:90%;
margin-left:auto;
margin-right:auto;
}
.template{
width:45%;
}
}
#media only screen and (max-width:768px){
main{
padding:5px;
font-size:0.9em;
}
nav ul{
overflow-y:auto;
}
nav{
-webkit-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
-moz-box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
box-shadow: 0px 2px 50px -9px rgba(255,101,0,1);
}
#logo{
width:100px;
height:25px;
margin-top:12.5px;
margin-bottom:12.5px;
}
.leftimage{
display:none;
}
.rightimage{
display:none;
}
.lefttext{
width:100%;
}
.righttext{
width:100%;
}
.section:hover{
border:none;
padding-top:0;
padding-bottom:0;
}
.button{
width:100%;
margin:0;
}
#contact{
width:100%;
margin-left:auto;
margin-right:auto;
}
.button:hover{
width:100%;
margin:0;
}
.template{
width:100%;
height:auto;
}
}
no need to worry about table.css it only changes the table.
this is how it looks like: http://prntscr.com/ec50gs
this is how it is supposed to look like: http://prntscr.com/ec50wx
notice the link if it does not have #template in it, it works as it should
I have made a app for iOS that includes a chat function.
now i have several issues. you can see two screenshots, 1 with the keyboard up and one with the keyboard down. The one with the keyboard up has several issues as you might notice: the input box is way too high located, the header has just gone up, and there is a 'done' bar that i'd like to get rid of.
The code:
https://jsfiddle.net/92b50e4s/
body {
margin:0px;
padding:0px;
background-color:#FFF;
}
#header_holder {
display:inline-block;
height:40px;
width:100%;
float:left;
position:relative;
}
#header_container {
display:inline-block;
float:left;
width:100%;
height:40px;
background-color:#e6007e;
background-color:#F4F4F4;
text-align:center;
padding:0px 0px 0px 0px;
position:fixed;
top:0px;
left:0px;
z-index:700;
}
#header_container #settings {
position:absolute;
left:10px;
top:10px;
height:30px;
width:30px;
color:#FFF;
color:#333;
line-height:30px;
font-size:20px;
}
#header {
display:table;
width:auto;
height:40px;
line-height:40px;
margin:auto;
}
#header span {
color:#FFF;
color:#333;
display:inline-block;
float:left;
width:auto;
font-family:'Open Sans', sans-serif;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
font-family: 'Permanent Marker', cursive;
height:40px;
line-height:40px;
font-size:17px;
margin-left:-2px;
font-weight:400;
font-style:italic;
}
#header {
display:inline-block;
float:left;
width:100%;
height:40px;
position:relative;
}
#header #back_button {
position:absolute;
width:40px;
height:40px;
line-height:40px;
font-size:30px;
left:0px;
display:inline-block;
text-align:center;
float:left;
top:0px;
}
#header #back_button.hover {
color:#ba6e6f;
}
#header #header_content {
display:table;
width:auto;
height:40px;
line-height:40px;
color:#333;
font-family:'Open Sans', sans-serif;
font-size:15px;
margin:auto;
}
#content {
font-family:'Open Sans', sans-serif;
padding:0px 0px 60px 0px;
}
#message {
display:inline-block;
float:left;
width:100%;
height:auto;
position:fixed;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
background-color:#FFFFFF;
}
#message #message_input {
display:inline-block;
float:left;
width:75%;
min-height:50px;
height:auto;
padding:1px 1% 1px 1%;
margin:2px 1% 2px 1%;
border:1px solid #ccc;
border-radius:5px;
font-size:16px;
font-family:'Open Sans', sans-serif;
outline:none;
-webkit-appearance:none;
}
#message #message_send2 {
display:inline-block;
float:right;
width:20%;
height:40px;
text-align:center;
line-height:40px;
transition: all .1s ease-in-out;
position:relative;
}
#message #message_send {
position:absolute;
top:50%;
margin-top:-8px;
width:20%;
right:0px;
text-align:center;
}
#message #message_send.hover {
color:#ba6e6f;
}
#content .message {
display:inline-block;
width:auto;
max-width:65%;
height:auto;
line-height:20px;
background-color:#ECECEC;
border-radius:5px;
padding:5px 2% 5px 2%;
clear:both;
color:#333;
}
#content .message.user {
float:right;
margin:7px 10px 7px 0px;
border-bottom-right-radius:0px;
}
#content .message.connection {
float:left;
margin:7px 0px 7px 10px;
border-bottom-left-radius:0px;
border-bottom:1px solid #D4A5A6;
}
#content .message .content {
display:inline-block;
float:left;
width:auto;
height:auto;
font-size:13px;
}
#content .message .time {
display:inline-block;
float:right;
width:auto;
height:auto;
font-style:italic;
margin:0px 0px 0px 5px;
font-size:10px;
}
What to do to solve these issues?
I have a small but annoying issue here. My footer and background image stay with the page when on different resolutions or zoomed in and out (because of the footer being fixed and the background image being positioned in the center) but my other images don't seem to stay with the page, they move on their own given a change in different resolutions or if I zoom in and out. Here's my code/screenshots of what's happening:
Screenshots:
My view of the webpage (1920x1080): http://gyazo.com/11c8a55c697696eb7667fdf23f903bb9
Here is my code pen: http://codepen.io/anon/pen/JobwRB
Try scroll zooming in codepen and I'll think you'll see what I mean. Is media queries worth a read here? Or will have to to put everything into a container?
Thanks for any help received.
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="footer.css" type="text/css"/>
<link rel="stylesheet" href="body.css" type="text/css"/>
</head>
<body>
<div>
</div>
<div id="img">
<img src="images/deets.png">
</div>
<div id="footer">
<ul id="footer_menu">
<li class="homeButton"></li>
<li>Profile
<div class="three_column_layout">
<div class="col_3">
<p></p>
</div>
</div>
</li>
<li>Work Exp
<div class="two_column_layout">
</div>
</li>
<li>Qualifications
<div class="two_column_layout">
<div class="col_2">
<a class="headerLinks">Test</a>
</div>
</div>
</li>
<li class="right">Log Out</li>
</ul>
<ul id="notifications">
<li>
<img src="images/twitter.png"
</li>
<li>
<img src="images/facebook.png">
</li>
</ul>
</div>
</body>
Footer CSS:
body{
background:rgba(20,20,20,1);
}
#footer{
position:fixed;
bottom:0px;
margin:0;
padding:0;
left:0;
right:0;
width:100%;
height:40px;
font-family:Arial;
text-shadow:1px 1px 1px black;
border-top:1px solid rgba(0,0,0,1.0);
background: rgba(0,0,0,0.5);
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2),
inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#footer h2{
font-weight:normal;
font-size:14px;
text-decoration:underline;
color:#CC0000;
margin-top:10px;
margin-bottom:5px;
margin-left:10px;
}
#footer p{
color:white;
font-size:12px;
float:left;
padding:0px 10px;
margin:10px 0px;
}
#footer img{
border:none;
}
#footer li ul{
list-style:none;
padding:0px;
margin-bottom:12px;
}
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0px;
height:0px;
}
#footer .whiteBorder{
border:1px solid white;
}
#footer .img_left{
float:left;
margin-right:10px;
width:40px;
}
#footer .black_box{
background:rgba(0,0,0,0.4);
padding:5px;
margin-bottom:5px;
border-radius:5px;
}
#footer #notifications{
float:right;
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#footer #notifications li{
margin-right:12px;
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
}
#footer #notifications li:hover{
margin-top:-1px;
}
#a .notificationIcons span{
display:none;
font-size:12px;
color:white;
bottom:45px;
width:150px;
position:absolute;
border:1px solid #333333;
padding:5px;
margin-left:-70px;
background:rgba(0,0,0,0.4)
}
#a .notificationIcons:hover span{
display:block;
}
#footer_menu{
margin:0px;
padding:0px;
width:auto;
}
#footer_menu li{
list-style:none;
text-align:center;
width:75px;
float:left;
font-size:12px;
padding:12px 14px 14px 14px;
border-right:1px solid rgba(0,0,0,0.4);
background:rgba(0,0,0,0.1);
}
#footer_menu li:hover{
background:rgba(0,0,0,0.3);
}
#footer_menu li a{
display:block;
color:#CCCCCC;
text-decoration:none;
}
#footer_menu li a:hover{
color:white;
}
#footer_menu .homeButton{
padding:5px 8px 0px 5px;
border:none;
background:none;
}
#footer_menu .homeButton a{
background:url("C:/Users/Charlie/Desktop/CV Website/images/greyhouse1.png") top left no-repeat;
width:36px;
height:30px;
}
#footer_menu .homeButton:hover{
background:none;
}
#footer_menu .homeButton a:hover{
background:url("C:/Users/Charlie/Desktop/CV Website/images/whitehouse2.png") top left no-repeat;
}
/*Programs menu drop-up box*/
#footer_menu li ul.dropup{
display:none;
}
#footer_menu li:hover ul.dropup{
display:block;
position:absolute;
margin: 0 0 0 -15px;
bottom:40px;
border:1px solid #111111;
border-bottom:none;
background:rgba(0,0,0,0.5);
}
#foot_menu li:hover li{
float:none;
background:none;
border:none;
border-bottom:1px solid #111111;
padding:12px 10px 12px 10px;
}
/*Drop up default links*/
#footer_menu li:hover a{
color:#aaaaaa;
}
#footer_menu li:hover a:hover{
color:white;
}
/*Header links*/
.headerLinks {
display:none !important;
}
#footer_menu li:hover a.headerLinks{
font-size:14px;
text-decoration:underline;
margin-bottom:5px;
color:#CC0000;
margin-top:10px;
margin-left:10px;
display:block !important;
}
#footer_menu li:hover a.headerLinks:hover{
color:white;
cursor:pointer;
}
/*List links*/
#footer_menu li:hover a.listLinks{
font-size:12px;
color:#aaaaaa;
margin-left:10px;
}
#footer_menu li:hover a.listLinks:hover{
color:white;
cursor:pointer;
}
#footer_menu .right{
float:right;
right:0px;
margin-right:2px;
border-right:none;
border-left:1px solid rgba(0,0,0,0.3);
}
/*Layouts*/
#footer .one_column_layout,
#footer .two_column_layout,
#footer .three-column_layout,{
margin:4px;
position:absolute;
padding-bottom:15px;
display:none;
text-align:left;
}
/*Width of each layout*/
#footer .one_column_layout{width:140px;}
#footer .two_column_layout{width:280px;}
#footer .three_column_layout{width:420px;}
/*Display Dropup menus on hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout{
display:block;
position:absolute;
text-align:left;
margin:0 0 0 -15px;
bottom:40px;
background:rgba(0,0,0,0.5);
}
#footer.col_1,
#footer.col_2,
#footer.col_3{
display:block;
float:left;
position:relative;
margin-left:5px;
margin-right:5px;
}
#footer.col_1{width:130px;}
#footer.col_2{width:270px;}
#footer.col_3{width:410px;}
Body CSS:
body {
background-image:url('C:/Users/Charlie/Desktop/CV Website/images/background1.png');
box-shadow:5px 5px 2px;
background-repeat: repeat-y;
background-attachment:fixed;
background-position:center;
max-width:1080px;
}
#javaPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/java.png');
position:fixed;
top:5%;
left:28.8%;
max-width:100%;
}
#javaPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/java2.png');
}
#htmlcssPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/htmlcss.png');
position:fixed;
top:5%;
right:28.8%;
max-width:100%;
}
#htmlcssPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/htmlcss2.png');
}
#javascriptPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/javascript.png');
position:fixed;
top:35%;
left:28.8%;
max-width:100%;
}
#javascriptPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/javascript2.png');
}
#phpPic {
width:366px;
height:236px;
display:block;
border:1px solid white;
background:transparent url('C:/Users/Charlie/Desktop/CV Website/images/php.png');
position:fixed;
top:35%;
right:28.8%;
max-width:100%;
}
#phpPic:hover {
background-image: url('C:/Users/Charlie/Desktop/CV Website/images/php2.png');
}
#img {
position:fixed;
top:0.5%;
left:28.8%;
display:block;
max-width:100%;
}
i have this CSS for my footer:
/* FOOTER */
#footer {
width:100%;
height:580px;
border-top:4px solid #666666;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
margin-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
i need there to be no gap at the bottom of the page but there is about half an inch gap for some reason
here is a fiddle: http://jsfiddle.net/mYqS3/1/
in #footerTop change margin-top to padding-top
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
I have a form in which the radio buttons and checkboxes look like this:
I would like to know if I can get rid of the distance between the buttons and their labels in some way. I also like to to move the buttons to the leftmost side of the form. Almost under the question number.
This is currently the CSS to my radio buttons:
.radio{
direction: ltr;
padding: 0 5px 0 0px;
display: block;
clear: left;
float: left;
}
Also my whole form works under a called stylized with a css as the following if it helps:
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
text-align:right;
width:140px;
float:left;
}
#stylized link {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
text-decoration:none;
color: #FFA500;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
background-color: #EEE8AA
}
#stylized input:active { background: #FF7F00 !important; color: black; }
#stylized input:focus { background: yellow; color: black; }
#stylized select{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:205px;
margin:2px 0 20px 10px;
background-color:#C1FFC1;
direction: ltr
}
#date select{
float:left;
font-size:10px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:60px;
margin:2px 0 20px 10px;
background-color:#FFDAB9
}
#stylized textArea{
float:left;
font-size:10px;
font-family: verdana,arial,sans-serif;
padding:4px 2px;
border:solid 1px #aacfe4;
width:330px;
height:100px;
margin:2px 0 20px 10px;
background-color: #EEDD82
}
#stylized textarea:active { background: #FF7F00 !important; color: black; }
#stylized textArea:focus { background: yellow; color: black; }
The best way to work with css styling issues, is to open the page in Google Chrome, then right click on the section in question, and click "Inspect Element". Then you will see the css that is responsible for what you selected on the right side style display. You can change these items from there without reloading the page.
So what I recommend for you is to do that, then on the display: block; that is in the right side display, change it to display: none;. You can make minor changes like this throughout until you get the look you want then update your actual css.
You have your labels text-aligned right:
#stylized label{
display:block;
text-align:right;
width:140px;
float:left;
}
So, the text is aligning right to its container.