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 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 am using 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;
padding-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;
}
#enquiryForm { clear:both; padding:8px 40px 0 0; }
.enquiryField { clear:both; padding:5px 0; }
.enquiryField label { clear:none; float:left; }
.enquiryField input { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }
.enquiryError { clear:both; color:#fff; font-family:Calibri; }
#enquirySent { color:#fff; font-family:Calibri; }
but it is not moving down the page automatically depending on how much content is above it. here is a fiddle with the full css/HTML:
http://jsfiddle.net/ctmGT/
i seem to have to change the div height that i have depending on the amount of content i have
you need to change
<div style="clear: both; height:500px;"></div>
to
<div class="push"></div>
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/
Why is my footer not displaying full page
width in IE8:
Display:
http://cl.ly/0J2Z0l1w3S1e0A3d3Q1V
HTML:
<footer>
content
</footer
/*Reset */
html, body, #wrapper, #main h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset { padding: 0; margin: 0; }
/* Main CSS */
html, body,#wrapper{
width:990px;
height:100%;
min-height:100%;
margin: 0 auto;
}
#wrapper{
position: absolute;
}
#header{
position:relative z-index:500;
background:url('../images/header.png');
width:990px;
height:220px;
}
/*Menu */
nav{
float:left;
width:190px;
margin:0 0 0 0;
}
nav ul{
float:left;
margin:0;
list-style:none;
font-size:14px;
width:190px;
}
nav li a{
font-size:14px;
color:#fff;
line-height:25px; /*Text Hight On Button */
text-decoration:none;
text-indent:25px;
display:block;
width:190px;
height:27px;
background-image:url('../images/normal.png');
}
nav a:hover{
background-image:url('../images/onclick.png');
}
/*Content */
#content{
margin: 0 0 0 190px;
background:url('../images/mainbg.png') no-repeat;
width:815px;
height:555px;
}
#content h1{
margin: 5px 0 0 10px;
font-family: 'Josefin Slab', arial, serif;
font-size:24px;
}
#content p{
margin:0 0 0 15px;
}
#content li{
margin:0 0 0 35px;
}
.clear{
clear:both;
margin:0;
padding:0;
}
footer{
clear:both;
overflow:hidden;
bottom:0;
background:url('../images/footer.png') no-repeat #000;
width:100%;
height:20px;
border: 6px solid pink;
}
/* Misc*/
#metal{
float:left;
margin:160px 0 0 -190px;
background:url('../images/metalnavbg.png');
height:400px;
width:190px;
}
/* Text Formatting */
#companyName{
text-align:center;
padding-top:45px;
font-size:35px;
color:#f0f0ef;
}
#companyQuote{
text-align:center;
font-size:18px;
color:#a5a4a2;
}
/*Forms */
/*General*/
#validation{
font-weight:bold;
color:#ff0101;
}
.contactForm{
width: 450px;
height:425px;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
#validation{
font-weight:bold;
color:#ff0101;
}
.form{
width: 400px;
height:100%;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
.borderradius.form{
width: 400px;
height:100%;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
fieldset{
border:none;
}
#formLayout{
border:2px solid #000;
}
#formLayout label{
clear: both;
display: block;
}
#formLayout input{
font-size:12px;
border: 2px solid #999;
padding: 6px 8px;
background-color: #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
color: #000;
width: 250px;
}
#formLayout .small{
color:#ff0101;
display:block;
font-size:11px;
font-weight:bold;
text-align:left;
width:140px;
}
#formLayout textarea{
width:250px;
}
#error{
width:250px;
height:20px;
margin:-30px 0 0 270px;
padding-bottom:10px;
}
#error p{
color:#ff0101;
text-align:left;
}
/* Specific Form Class's */
.login{
width: 470px;
height:250px;
padding: 15px 25px;
margin: 0 auto 10px;
color: #000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: hidden;
}
.login label{
font-weight:bold;
}
.login .loginSubmit{
margin-top:25px;
}
/*Gallery CSS */
#gallery{
width:120px;
margin-left:5px;
display: inline;
}
#gallery .thumbnail{
margin:0 auto;
display:inline;
}
#gallery img{
margin:5px;
}
#sales{
width:190px;
height:195px;
margin-left:15px;
display:inline-block;
border: 1px solid red;
}
#sales .location{
float:left;
text-align:center;
font-weight:bold;
margin-left:15px;
}
#sales .price{
float:left;
text-align:left;
font-weight:bold;
padding-left:5px;
color:#ff0101;
}
If you're using <footer> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <head>:
<script>document.createElement('footer');</script>
It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.
Add display: block to your footer tag.
In fact, all fancy schmancy HTML5 tags should be set up.
/* HTML5 block-level reset for enhanced structural tag support in older browsers */
header, footer, section, aside, nav, article, figure { display: block; padding: 0; margin: 0; }
I have fixed this issue by floating my footer div to the left
Download Modernizr and put this script to the head of HTML site. Basically this script will register all HTML5 elements for browser. Consequently IE won't break any more unknown elements.