Hello, after hours of research and trying to get that footer to stick at the bottom, it finally stays there, but it overlaps my content now…
I have tried to put a padding-bottom on the content div, but to no avail.
You can view it here: http://www.redflag.be/prospect
Most of the formatting is in the layout.css file, some is in the 960.css file
Hi, for one thing everything is position:fixed and you should never have that! If content goes off into scrollbar land then all the content that is in the scrollbar area will be lost (since fixed elements can’t be scrolled)
If you are going for a regular fixed layout, then only use position:fixed on the footer 
so I made everything absolute, but I still have the same problem.
And there are scrollbars now.
Hi,
Do you want the footer at the bottom of the viewport aka position:fixed?
Or do you actually want a sticky footer that stays at the bottom of the viewport only if content is shorter than the viewport but otherwise sits at the bottom of the document?
They are completely different things so we would need to know which you want before giving a proper answer
I want it to be at the bottom of the viewport unless the content is larger than the viewport, so yes, a sticky footer.
If you want a fixed footer you will need to make these changes (won’t work in IE6 though).
.container_12, .container_16 {
margin-left: auto;
margin-right: auto;
[B] width: 960px;
min-height:100%;
/*height:100%;*/
}
* html .container_12 {height:100%}[/B]
.container_12 {
background:#fff;
[B] /*position: absolute;
left:50%;
margin-left:-480px;
*/
position:relative;
margin:auto;[/B]
}
#contents {
[B] position:relative;
padding-bottom:27px;
/*height:100%;*/[/B]
}
#site_info .box {
width:920px;
color:#ccc;
background:#666;
[B] position:fixed;[/B]
bottom:0;
height:27px;
[B] margin:0;[/B]
}
[B]#footer{
clear:both;
width:100%;
padding:50px 0 0;
}[/B]
Just saw your comment that you wanted a sticky footer - Hold on I’ll see what I can do.
That kinda screwed my layout.
IE6 won’t be supported, so that’s not a problem, it’s about time that browser died.
EDIT: I’ll undo the changes.
This will probably be a bit awkward to follow because your styles come from everywhere - a big drawback of the grid system.
[B]/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html,body{height:100%}[/B]
.container_12, .container_16 {
[B] margin-left: auto;
margin-right: auto;
width: 960px;
/*height:100%;*/
/*min-height:100%;*/
}
.wrap{ min-height:100%;}
* html .wrap {height:100%}[/B]
.container_12 {
[B] background:#fff;
/*position: absolute;
left:50%;
margin-left:-480px;
*/
position:relative;
margin:auto;[/B]
}
#contents {
position:relative;
[B] padding-bottom:40px;
/*height:100%;*/[/B]
}
#site_info .box {
[B] width:920px;
color:#ccc;
background:#666;
position:relative;
height:27px;
margin:-43px 0 0;
clear:both;
overflow:hidden;
}[/B]
[B]#footer{
clear:both;
width:100%;
}
#footer p{margin:0}[/B]
<body>
<div class="container_12 [B]wrap[/B]">
<div id="contents">
[B]<div class="container_16">[/B]
<div id="footer">
<div class="grid_16" id="site_info">
This was the whole code I was working with but all styles have been placed inline so I could test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project Prospect</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/other.css" media="screen" />
<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}/*
960 Grid System ~ Text CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Basic HTML
--------------------------------------------------------------------------------*/
body {
font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}
a:focus {
outline: 1px dotted invert;
}
hr {
border-color: #ccc;
border-style: solid;
border-width: 1px 0 0;
clear: both;
height: 0;
}
/* =Headings
--------------------------------------------------------------------------------*/
h1 {
font-size: 25px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 19px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 15px;
}
/* =Spacing
--------------------------------------------------------------------------------*/
ol {
list-style: decimal;
}
ul {
list-style: square;
}
li {
margin-left: 30px;
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
margin-bottom: 20px;
}
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Containers
--------------------------------------------------------------------------------*/
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_3, .container_16 .grid_4 {
width: 220px;
}
.container_12 .grid_6, .container_16 .grid_8 {
width: 460px;
}
.container_12 .grid_9, .container_16 .grid_12 {
width: 700px;
}
.container_12 .grid_12, .container_16 .grid_16 {
width: 940px;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width: 60px;
}
.container_12 .grid_2 {
width: 140px;
}
.container_12 .grid_4 {
width: 300px;
}
.container_12 .grid_5 {
width: 380px;
}
.container_12 .grid_7 {
width: 540px;
}
.container_12 .grid_8 {
width: 620px;
}
.container_12 .grid_10 {
width: 780px;
}
.container_12 .grid_11 {
width: 860px;
}
/* =Grid >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .grid_1 {
width: 40px;
}
.container_16 .grid_2 {
width: 100px;
}
.container_16 .grid_3 {
width: 160px;
}
.container_16 .grid_5 {
width: 280px;
}
.container_16 .grid_6 {
width: 340px;
}
.container_16 .grid_7 {
width: 400px;
}
.container_16 .grid_9 {
width: 520px;
}
.container_16 .grid_10 {
width: 580px;
}
.container_16 .grid_11 {
width: 640px;
}
.container_16 .grid_13 {
width: 760px;
}
.container_16 .grid_14 {
width: 820px;
}
.container_16 .grid_15 {
width: 880px;
}
/* =Prefix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .prefix_3, .container_16 .prefix_4 {
padding-left: 240px;
}
.container_12 .prefix_6, .container_16 .prefix_8 {
padding-left: 480px;
}
.container_12 .prefix_9, .container_16 .prefix_12 {
padding-left: 720px;
}
/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left: 80px;
}
.container_12 .prefix_2 {
padding-left: 160px;
}
.container_12 .prefix_4 {
padding-left: 320px;
}
.container_12 .prefix_5 {
padding-left: 400px;
}
.container_12 .prefix_7 {
padding-left: 560px;
}
.container_12 .prefix_8 {
padding-left: 640px;
}
.container_12 .prefix_10 {
padding-left: 800px;
}
.container_12 .prefix_11 {
padding-left: 880px;
}
/* =Prefix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .prefix_1 {
padding-left: 60px;
}
.container_16 .prefix_2 {
padding-left: 120px;
}
.container_16 .prefix_3 {
padding-left: 180px;
}
.container_16 .prefix_5 {
padding-left: 300px;
}
.container_16 .prefix_6 {
padding-left: 360px;
}
.container_16 .prefix_7 {
padding-left: 420px;
}
.container_16 .prefix_9 {
padding-left: 540px;
}
.container_16 .prefix_10 {
padding-left: 600px;
}
.container_16 .prefix_11 {
padding-left: 660px;
}
.container_16 .prefix_13 {
padding-left: 780px;
}
.container_16 .prefix_14 {
padding-left: 840px;
}
.container_16 .prefix_15 {
padding-left: 900px;
}
/* =Suffix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .suffix_3, .container_16 .suffix_4 {
padding-right: 240px;
}
.container_12 .suffix_6, .container_16 .suffix_8 {
padding-right: 480px;
}
.container_12 .suffix_9, .container_16 .suffix_12 {
padding-right: 720px;
}
/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right: 80px;
}
.container_12 .suffix_2 {
padding-right: 160px;
}
.container_12 .suffix_4 {
padding-right: 320px;
}
.container_12 .suffix_5 {
padding-right: 400px;
}
.container_12 .suffix_7 {
padding-right: 560px;
}
.container_12 .suffix_8 {
padding-right: 640px;
}
.container_12 .suffix_10 {
padding-right: 800px;
}
.container_12 .suffix_11 {
padding-right: 880px;
}
/* =Suffix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .suffix_1 {
padding-right: 60px;
}
.container_16 .suffix_2 {
padding-right: 120px;
}
.container_16 .suffix_3 {
padding-right: 180px;
}
.container_16 .suffix_5 {
padding-right: 300px;
}
.container_16 .suffix_6 {
padding-right: 360px;
}
.container_16 .suffix_7 {
padding-right: 420px;
}
.container_16 .suffix_9 {
padding-right: 540px;
}
.container_16 .suffix_10 {
padding-right: 600px;
}
.container_16 .suffix_11 {
padding-right: 660px;
}
.container_16 .suffix_13 {
padding-right: 780px;
}
.container_16 .suffix_14 {
padding-right: 840px;
}
.container_16 .suffix_15 {
padding-right: 900px;
}
/* =Clear Floated Elements
--------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
clear: both;
content: '.';
display: block;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */
body {
background: #eee;
border-top: 5px solid #000;
color: #333;
font-size: 11px;
height:100%;
}
/* anchors
----------------------------------------------- */
a {
color: #000;
font-weight:bold;
text-decoration: none;
}
a:hover {
color:#333;
}
/* 960 grid system container background
----------------------------------------------- */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
height:100%
}
.container_12, .container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;/*height:100%;*/
/*min-height:100%;*/
}
.wrap {
min-height:100%;
}
* html .wrap {
height:100%
}
.container_12 {
background:#fff;
/*position: absolute;
left:50%;
margin-left:-480px;
*/
position:relative;
margin:auto;
}
#contents {
position:relative;
padding-bottom:40px;/*height:100%;*/
}
#site_info .box {
width:920px;
color:#ccc;
background:#666;
position:relative;
height:27px;
margin:-43px 0 0;
clear:both;
overflow:hidden
}
#footer {
clear:both;
width:100%;
}
#footer p {
margin:0
}
.headers {
font-weight:normal;
font-size:3em;
text-align:left;
background:#000;
padding:.2em 1em;
margin-bottom:0;
}
/* headings
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
line-height:1.2em;
margin-bottom:.3em;
}
h2 {
margin-top:1em;
}
h5 {
font-size:1.2em;
}
h6 {
font-size:1em;
text-transform:uppercase;
}
h1 a {
font-weight:normal;
}
/* branding
----------------------------------------------- */
h1#branding {
font-weight:normal;
font-size:1em;
text-align:left;
background-image:url('http://www.redflag.be/prospect/img/header.jpg');
padding:1em 1em;
margin-bottom:0;
color:#fff;
}
/* page heading
----------------------------------------------- */
h2#page-heading {
font-weight:normal;
padding:.5em;
margin:0 0 10px 0;
border-bottom:1px solid #ccc;
}
/* boxes
----------------------------------------------- */
.box {
background:#ddd;
margin-bottom:20px;
padding:10px 10px 1px 10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.box h2 {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#333;
margin:-10px -10px 0 -10px;
padding:6px 12px;
}
.r_top {
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.r_bot {
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-topleft:5px;
-moz-border-bottom-topright:5px;
}
.r_all {
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.box h2 a, .box h2 a.visible {
color:#fff;
background:#333 url("http://www.redflag.be/prospect/img/switch_minus.gif") 97% 50% no-repeat;
display:block;
padding:6px 12px;
margin:-6px -12px;
border:none;
}
.grid_4 .box h2 a {
background-position: 97% 50%;
}
.grid_5 .box h2 a {
background-position: 98% 50%;
}
.grid_12 .box h2 a {
background-position: 99% 50%;
}
.box h2 a.hidden, .box h2 a.hidden:hover {
background-image: url("http://www.redflag.be/prospect/img/switch_plus.gif");
}
.box h2 a:hover {
background-color:#111;
}
.block {
padding-top:10px;
}
div.menu {
padding:0;
}
div.menu h2 {
margin:0;
}
div.menu .block {
padding-top:0;
}
.profilebox {
float:right;
padding-right:15px;
}
.profilebox a.image {
float:left;
padding:2px 2px 0px 2px;
border:1px solid #bbb;
background:#fff;
}
/* paragraphs, quotes and lists
----------------------------------------------- */
p {
margin-bottom:1em;
}
blockquote {
font-family: Georgia, 'Times New Roman', serif;
font-size:1.2em;
padding-left:1em;
border-left:4px solid #ccc;
}
blockquote cite {
font-size:.9em;
}
ul, ol {
padding-top:0;
}
/* menus
----------------------------------------------- */
ul.menu {
list-style:none;
border-top:1px solid #bbb;
}
ul.menu li {
margin:0;
}
ul.menu li a {
display:block;
padding:4px 10px;
border-bottom:1px solid #ccc;
}
ul.menu li a:hover {
background:#eee;
}
ul.menu li a:active {
background:#ccc;
}
/* submenus
----------------------------------------------- */
ul.menu ul {
list-style:none;
margin:0;
}
ul.menu ul li a {
padding-left:30px;
}
/* section menus
----------------------------------------------- */
ul.section {
border-top:0;
margin-bottom:0;
}
ul.section li {
text-transform:uppercase;
}
ul.section li a {
background:#bbb;
}
ul.section li a:hover {
background:#aaa;
}
ul.section li a:active {
color:#fff;
background:#666;
}
ul.section li li a {
background:#ddd;
border-bottom:1px solid #eee;
}
ul.section li li a:hover {
background:#ccc;
}
ul.section li li a:active {
color:#000;
background:#fff;
}
ul.section ul li {
text-transform:none;
}
ul.section ul.current li a {
background:#eee;
border-bottom:1px solid #fff;
}
ul.section ul.current li a:hover {
background:#ddd;
}
ul.section ul.current li a:active {
background:#fff;
}
ul.section li a.current {
color:#fff;
background:#666;
}
ul.section li a.current:hover {
background:#555;
}
ul.section li a.current:active {
background:#444;
}
ul.section li a.active {
background:#fff;
cursor:default;
}
ul.section li.current > a.active, ul.section li.current > a.active:hover {
color:#fff;
background:#666;
cursor:default;
}
/* table
----------------------------------------------- */
table {
width:100%;
border:1px solid #bbb;
margin-bottom:10px;
}
col.colC {
width:8em;
}
th, td {
padding:.2em 1em;
text-align:left;
}
thead th {
border-bottom:2px solid #888;
background:#bbb;
padding:.4em 1em .2em;
}
thead th.table-head {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#555;
border:1px solid #555;
}
tbody th, tbody td {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
background:#eee;
}
tbody tr.odd th, tbody tr.odd td {
background:#fff;
}
tfoot th, tfoot td {
border-top:2px solid #666;
background:#eee;
}
tfoot tr.total th, tfoot tr.total td {
border-top:6px double #666;
}
tfoot tr.total th {
text-transform:uppercase;
}
th.currency, td.currency {
text-align:right;
}
/* forms
----------------------------------------------- */
form {
overflow:hidden;
}
fieldset {
border:1px solid #bbb;
padding:10px;
position:relative;
background:#e9e9e9;
margin-bottom:10px;
}
legend {
font-size:1.1em;
padding:.4em .8em;
background:#fff;
border:1px solid #bbb;
}
fieldset.login p {
margin-bottom:1em;
margin-top:0pt;
}
fieldset p label {
width:98%;
}
fieldset p input {
width:98%;
}
fieldset p select {
width:99%;
}
fieldset.login p label {
float:left;
line-height:2em;
margin-right:3%;
text-align:right;
width:32%;
}
fieldset.login p input {
width:60%;
}
fieldset.login input.button {
margin-left:35%;
}
form p.notice {
font-weight:bold;
}
input.search.text {
width:66%;
}
input.search.button {
width:28%;
margin-left:2%;
}
/* articles
----------------------------------------------- */
.articles {
padding:0;
}
.articles h2 {
margin:0;
}
#articles {
padding-top:0;
}
.article {
border-top:1px solid #666;
padding-top:.5em;
}
.box .article {
border-top:3px solid #fff;
padding:13px 10px 0 10px;
}
.article h2 {
font-size:2em;
font-weight:normal;
text-transform:none;
color:#333;
background:transparent;
padding:0;
margin:0;
border:none;
}
.article h3 {
margin-bottom:.2em;
font-size:1.6em;
}
.box .first {
border-top:none;
}
.article h4 {
font-size:1.2em;
text-transform:uppercase;
margin-bottom:.5em;
}
.article a.image {
float:left;
margin:3px 10px 3px 0;
padding:4px;
border:1px solid #bbb;
background:#fff;
}
.article a.image:hover {
border:1px solid #666;
}
.article a.image img {
float:left;
}
.article p.meta {
color:#666;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
padding:.3em 0;
margin-bottom:.8em;
}
/* site information
----------------------------------------------- */
#site_info a {
color:#fff;
}
#site_info a:hover {
color:#000;
}
/* AJAX sliding shelf
----------------------------------------------- */
#loading {
float:right;
margin-right:14px;
margin-top:-2px;
}
.block {
padding-bottom:1px;
}
/* Accordian
----------------------------------------------- */
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size:1.1em;
font-weight: normal;
}
.element h4 {
margin: 0;
padding:4px;
line-height:1.2em;
}
.element p {
margin: 0;
padding: 4px;
}
.float-right {
padding:10px 20px;
float:right;
}
#accordian-block {
padding-bottom:10px;
}
/* Mootools Kwicks
----------------------------------------------- */
#kwick-box {
padding:0;
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 120px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 100px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
/*
-----------------------------------------------
Navigation
----------------------------------------------- */
/* navigation (horizontal subnavigation)
----------------------------------------------- */
ul.nav, ul.nav * {
margin:0;
padding:0;
}
ul.nav {
position:relative;
background:#666;
max-width:100%;
height:2.5em;
}
ul.nav li {
cursor:pointer;
float:left;
text-align:center;
list-style-type:none;
font-weight:normal;
}
ul.nav li ul {
cursor:default;
width:100%;
max-width:100%;
position:absolute;
height:auto;
top:2.5em;
background-position:0 0 !important;
left:-9000px;
}
ul.nav li ul li {
padding:0;
border:none;
width:auto;
max-width:none;
}
ul.nav li a {
color:#fff;
background:#666;
font-weight:bold;
text-decoration:none;
display:block;
float:left;
padding:0 1em;
height:2.4em;
line-height:2.5em;
}
ul.nav li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:2em;
height:2em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
}
ul.nav li:hover a, ul.nav li a:hover, ul.nav li a:focus {
color:#000;
background:#ccc;
}
ul.nav li a:active {
color:#666;
background:#fff;
}
ul.nav li:hover ul {
left:0;
z-index:10
}
ul.nav li ul, ul.nav li {
background:#ccc !important
}
ul.nav li:hover ul li a {
color:#444;
}
ul.nav li:hover ul li a:hover {
color:#000;
background:#fff;
}
ul.nav li:hover ul li a:active {
color:#666;
background:#fff;
}
ul.nav li.current a {
color:#666;
background:#fff;
cursor:default;
font-weight:bold;
}
ul.nav li.current ul {
left:0;
z-index:5
}
ul.nav li.current ul, ul.nav li.current {
background:#ccc !important
}
ul.nav li.current ul li a {
color:#444;
background:#ccc;
font-weight:normal;
}
ul.nav li.current ul li a:hover {
color:#000;
background:#fff;
}
ul.nav li ul li.current a, ul.nav li ul li.current a:hover, ul.nav li.current:hover ul li a:active {
color:#666;
background:#fff;
}
/* navigation (vertical subnavigation)
----------------------------------------------- */
ul.nav {
background:#990000;
}
ul.main li {
position:relative;
top:0;
left:0;
}
ul.main li ul {
border-top:0;
}
ul.main li ul li {
float:left;
}
ul.main li a {
height:2.5em;
line-height:2.5em;
border:0;
color:#fff;
background:#990000;
}
ul.main li ul li a {
width:12em;
line-height:2em;
height:2em;
text-align:left;
color:#fff;
border-top:1px solid #990000;
background:#444;
}
ul.main li a:focus {
color:#fff;
background:#990000;
}
ul.main li ul li a:hover {
color:#fff;
background:#555;
}
ul.main li:hover a {
color:#fff;
background:#b90302;
}
ul.main li:hover ul li a {
color:#fff;
}
ul.main li:hover ul li a:hover {
color:#fff;
background:#990000;
}
ul.main li:hover a:active {
background:#444;
}
ul.main li:hover ul li a:active {
color:#fff;
background:#770000;
}
/* secondary list
----------------------------------------------- */
ul.nav li.secondary {
float:right;
color:#cde;
background:transparent !important;
}
ul.nav li.secondary span.status {
float:left;
padding:0 1em;
line-height:2.77em;
height:2.77em;
font-size:0.9em;
}
ul.nav li.secondary span.status a {
float:none;
display:inline;
padding:0;
height:auto;
line-height:auto;
color:#cde;
background:transparent;
}
ul.nav li.secondary span.status a:hover {
color:#fff;
background:transparent;
}
ul.nav li.secondary span.status span {
text-transform:capitalize;
}
ul.nav li.secondary:hover a {
color:#fff;
background:#666;
}
ul.nav li.secondary:hover a:hover {
background:#555;
}
ul.nav li.secondary:hover a:active {
background:#444;
}
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a {
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
display:none;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #B8C4CF;
color: #FFFFFF;
}
.cs-title {
width: 545px;
padding: 10px;
background-color: #000000;
color: #FFFFFF;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
}
.cs-prev, .cs-next {
background-color: #000000;
color: #FFFFFF;
padding: 0px 10px;
}
</style>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
<![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<script type="text/javascript" src="http://www.redflag.be/prospect/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.redflag.be/prospect/js/coin-slider.min.js"></script>
</head>
<body>
<div class="container_12 wrap">
<div id="contents">
<div class="grid_12">
<h1 id="branding"> <a href=""><img src="img/logo.png" alt="logo"/></a> <span class="profilebox"> <br/>
<b>Welcome back Mustek</b><br/>
You have 0 messages<br/>
Profile - Sign Out </span> <span class="profilebox"> <a href="#" class="image"><img src="http://www.redflag.be/prospect/img/blank_avatar.png" height="60" width="60" alt="photo" /></a> </span> </h1>
</div>
<div class="clear"></div>
<div class="grid_12">
<ul class="nav main">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Recently Added</a> </li>
<li> <a href="#">Categories</a>
<ul>
<li> <a href="#">Action</a> </li>
<li> <a href="#">Adventure</a> </li>
<li> <a href="#">Casino & Cards</a> </li>
<li> <a href="#">Classics</a> </li>
<li> <a href="#">Fighting</a> </li>
<li> <a href="#">Puzzle & Mind</a> </li>
<li> <a href="#">Racing</a> </li>
<li> <a href="#">Shooters</a> </li>
<li> <a href="#">Sports</a> </li>
</ul>
</li>
<li> <a href="#">Multiplayer</a> </li>
<li> <a href="#">Newsblog</a> </li>
<li> <a href="#">Community</a> </li>
<li class="secondary">
<input style="padding:0px;margin-top:4px;margin-bottom:0px;" class="search" type="text" value="Search" />
<input class="search" type="button" value="Search" />
</li>
</ul>
</div>
<div class="clear"></div>
<!--<div class="grid_12" id="coin-slider"> <a href="img01_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_1.png' width="940" alt="Welcome to Project Prospect"/> <span> Welcome to Project Prospect! </span> </a> <a href="img02_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_2.png' width="940" alt="Jamlegend, new on Project Prospect"/> <span> Play the popular music-game Jamlegend, right here! </span> </a> </div> -->
<div class="clear"></div>
<div class="grid_12">
<div class="box news">
<h2 class="r_bot"><b>News:</b> No releasedate set.</h2>
</div>
</div>
<div class="clear"></div>
<div class="grid_4">
<div class="box">
<h2 class="r_top">Newest Games (more)</h2>
<div class="block">
<p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<h2 class="r_top">Most Popular Games (more)</h2>
<div class="block">
<p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<h2 class="r_top">Staff Picks (more)</h2>
<div class="block">
<p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="container_16">
<div id="footer">
<div class="grid_16" id="site_info">
<div class="box">
<p>©2010 - Redflag.be, all content on this website is property of their respected owners. <b>Pre-Alpha Build, do not leak!</b></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 940, height: 300, navigation: true, spw:9, sph:5, delay: 5000 });
});
</script>
</body>
</html>
You will still have a 5px vertical scroll because of this rule:
body {
background: #eee;
border-top: 5px solid #000;
color: #333;
font-size: 11px;
height:100%;
}
100% height + 5px border equals 5px too big.
You would need to put that border as a background image on the body element and remove the 5px border. Or put it on an inner element which could be absolutely placed so as not to interrupt the flow.
Sorry if that’s a bit hard to follow but you have multiple stylesheets and multiple rules affecting the same elements.
You can’t use 100% height on inner elements (see faq on 100% height) as that will limit the element to 100% and no more.
The main page wrapper should not be absolutely placed because that means it will slide of the page and be unusable at smaller screen sizes. Just used auto margins on a static element instead (use position relative if a stacking context is required).
Hope that helps anyway
[QUOTE=Mustek;4582734]That kinda screwed my layout.
IE6 won’t be supported, so that’s not a problem, it’s about time that browser died.
EDIT: I’ll undo the changes.[/QUOTE]
You must have missed some rules because I have it working here with no problems
Here was the fixed position version :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Project Prospect</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/text.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/960.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/nav.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/other.css" media="screen" />
<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}/*
960 Grid System ~ Text CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Basic HTML
--------------------------------------------------------------------------------*/
body {
font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}
a:focus {
outline: 1px dotted invert;
}
hr {
border-color: #ccc;
border-style: solid;
border-width: 1px 0 0;
clear: both;
height: 0;
}
/* =Headings
--------------------------------------------------------------------------------*/
h1 {
font-size: 25px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 19px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 15px;
}
/* =Spacing
--------------------------------------------------------------------------------*/
ol {
list-style: decimal;
}
ul {
list-style: square;
}
li {
margin-left: 30px;
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
margin-bottom: 20px;
}
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Containers
--------------------------------------------------------------------------------*/
.container_12, .container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height:100%;/*height:100%;*/
}
* html .container_12 {
height:100%
}
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_3, .container_16 .grid_4 {
width: 220px;
}
.container_12 .grid_6, .container_16 .grid_8 {
width: 460px;
}
.container_12 .grid_9, .container_16 .grid_12 {
width: 700px;
}
.container_12 .grid_12, .container_16 .grid_16 {
width: 940px;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width: 60px;
}
.container_12 .grid_2 {
width: 140px;
}
.container_12 .grid_4 {
width: 300px;
}
.container_12 .grid_5 {
width: 380px;
}
.container_12 .grid_7 {
width: 540px;
}
.container_12 .grid_8 {
width: 620px;
}
.container_12 .grid_10 {
width: 780px;
}
.container_12 .grid_11 {
width: 860px;
}
/* =Grid >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .grid_1 {
width: 40px;
}
.container_16 .grid_2 {
width: 100px;
}
.container_16 .grid_3 {
width: 160px;
}
.container_16 .grid_5 {
width: 280px;
}
.container_16 .grid_6 {
width: 340px;
}
.container_16 .grid_7 {
width: 400px;
}
.container_16 .grid_9 {
width: 520px;
}
.container_16 .grid_10 {
width: 580px;
}
.container_16 .grid_11 {
width: 640px;
}
.container_16 .grid_13 {
width: 760px;
}
.container_16 .grid_14 {
width: 820px;
}
.container_16 .grid_15 {
width: 880px;
}
/* =Prefix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .prefix_3, .container_16 .prefix_4 {
padding-left: 240px;
}
.container_12 .prefix_6, .container_16 .prefix_8 {
padding-left: 480px;
}
.container_12 .prefix_9, .container_16 .prefix_12 {
padding-left: 720px;
}
/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left: 80px;
}
.container_12 .prefix_2 {
padding-left: 160px;
}
.container_12 .prefix_4 {
padding-left: 320px;
}
.container_12 .prefix_5 {
padding-left: 400px;
}
.container_12 .prefix_7 {
padding-left: 560px;
}
.container_12 .prefix_8 {
padding-left: 640px;
}
.container_12 .prefix_10 {
padding-left: 800px;
}
.container_12 .prefix_11 {
padding-left: 880px;
}
/* =Prefix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .prefix_1 {
padding-left: 60px;
}
.container_16 .prefix_2 {
padding-left: 120px;
}
.container_16 .prefix_3 {
padding-left: 180px;
}
.container_16 .prefix_5 {
padding-left: 300px;
}
.container_16 .prefix_6 {
padding-left: 360px;
}
.container_16 .prefix_7 {
padding-left: 420px;
}
.container_16 .prefix_9 {
padding-left: 540px;
}
.container_16 .prefix_10 {
padding-left: 600px;
}
.container_16 .prefix_11 {
padding-left: 660px;
}
.container_16 .prefix_13 {
padding-left: 780px;
}
.container_16 .prefix_14 {
padding-left: 840px;
}
.container_16 .prefix_15 {
padding-left: 900px;
}
/* =Suffix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .suffix_3, .container_16 .suffix_4 {
padding-right: 240px;
}
.container_12 .suffix_6, .container_16 .suffix_8 {
padding-right: 480px;
}
.container_12 .suffix_9, .container_16 .suffix_12 {
padding-right: 720px;
}
/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right: 80px;
}
.container_12 .suffix_2 {
padding-right: 160px;
}
.container_12 .suffix_4 {
padding-right: 320px;
}
.container_12 .suffix_5 {
padding-right: 400px;
}
.container_12 .suffix_7 {
padding-right: 560px;
}
.container_12 .suffix_8 {
padding-right: 640px;
}
.container_12 .suffix_10 {
padding-right: 800px;
}
.container_12 .suffix_11 {
padding-right: 880px;
}
/* =Suffix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .suffix_1 {
padding-right: 60px;
}
.container_16 .suffix_2 {
padding-right: 120px;
}
.container_16 .suffix_3 {
padding-right: 180px;
}
.container_16 .suffix_5 {
padding-right: 300px;
}
.container_16 .suffix_6 {
padding-right: 360px;
}
.container_16 .suffix_7 {
padding-right: 420px;
}
.container_16 .suffix_9 {
padding-right: 540px;
}
.container_16 .suffix_10 {
padding-right: 600px;
}
.container_16 .suffix_11 {
padding-right: 660px;
}
.container_16 .suffix_13 {
padding-right: 780px;
}
.container_16 .suffix_14 {
padding-right: 840px;
}
.container_16 .suffix_15 {
padding-right: 900px;
}
/* =Clear Floated Elements
--------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
clear: both;
content: '.';
display: block;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */
body {
background: #eee;
border-top: 5px solid #000;
color: #333;
font-size: 11px;
height:100%;
}
/* anchors
----------------------------------------------- */
a {
color: #000;
font-weight:bold;
text-decoration: none;
}
a:hover {
color:#333;
}
/* 960 grid system container background
----------------------------------------------- */
.container_12, .container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height:100%;/*height:100%;*/
}
* html .container_12 {
height:100%
}
.container_12 {
background:#fff;
/*position: absolute;
left:50%;
margin-left:-480px;
*/
position:relative;
margin:auto;
}
#contents {
position:relative;
padding-bottom:27px;/*height:100%;*/
}
#site_info .box {
width:920px;
color:#ccc;
background:#666;
position:fixed;
bottom:0;
height:27px;
margin:0;
}
#footer {
clear:both;
width:100%;
padding:50px 0 0;
}
.headers {
font-weight:normal;
font-size:3em;
text-align:left;
background:#000;
padding:.2em 1em;
margin-bottom:0;
}
/* headings
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
line-height:1.2em;
margin-bottom:.3em;
}
h2 {
margin-top:1em;
}
h5 {
font-size:1.2em;
}
h6 {
font-size:1em;
text-transform:uppercase;
}
h1 a {
font-weight:normal;
}
/* branding
----------------------------------------------- */
h1#branding {
font-weight:normal;
font-size:1em;
text-align:left;
background-image:url('http://www.redflag.be/prospect/img/header.jpg');
padding:1em 1em;
margin-bottom:0;
color:#fff;
}
/* page heading
----------------------------------------------- */
h2#page-heading {
font-weight:normal;
padding:.5em;
margin:0 0 10px 0;
border-bottom:1px solid #ccc;
}
/* boxes
----------------------------------------------- */
.box {
background:#ddd;
margin-bottom:20px;
padding:10px 10px 1px 10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.box h2 {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#333;
margin:-10px -10px 0 -10px;
padding:6px 12px;
}
.r_top {
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
.r_bot {
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-topleft:5px;
-moz-border-bottom-topright:5px;
}
.r_all {
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.box h2 a, .box h2 a.visible {
color:#fff;
background:#333 url("http://www.redflag.be/prospect/img/switch_minus.gif") 97% 50% no-repeat;
display:block;
padding:6px 12px;
margin:-6px -12px;
border:none;
}
.grid_4 .box h2 a {
background-position: 97% 50%;
}
.grid_5 .box h2 a {
background-position: 98% 50%;
}
.grid_12 .box h2 a {
background-position: 99% 50%;
}
.box h2 a.hidden, .box h2 a.hidden:hover {
background-image: url("http://www.redflag.be/prospect/img/switch_plus.gif");
}
.box h2 a:hover {
background-color:#111;
}
.block {
padding-top:10px;
}
div.menu {
padding:0;
}
div.menu h2 {
margin:0;
}
div.menu .block {
padding-top:0;
}
.profilebox {
float:right;
padding-right:15px;
}
.profilebox a.image {
float:left;
padding:2px 2px 0px 2px;
border:1px solid #bbb;
background:#fff;
}
/* paragraphs, quotes and lists
----------------------------------------------- */
p {
margin-bottom:1em;
}
blockquote {
font-family: Georgia, 'Times New Roman', serif;
font-size:1.2em;
padding-left:1em;
border-left:4px solid #ccc;
}
blockquote cite {
font-size:.9em;
}
ul, ol {
padding-top:0;
}
/* menus
----------------------------------------------- */
ul.menu {
list-style:none;
border-top:1px solid #bbb;
}
ul.menu li {
margin:0;
}
ul.menu li a {
display:block;
padding:4px 10px;
border-bottom:1px solid #ccc;
}
ul.menu li a:hover {
background:#eee;
}
ul.menu li a:active {
background:#ccc;
}
/* submenus
----------------------------------------------- */
ul.menu ul {
list-style:none;
margin:0;
}
ul.menu ul li a {
padding-left:30px;
}
/* section menus
----------------------------------------------- */
ul.section {
border-top:0;
margin-bottom:0;
}
ul.section li {
text-transform:uppercase;
}
ul.section li a {
background:#bbb;
}
ul.section li a:hover {
background:#aaa;
}
ul.section li a:active {
color:#fff;
background:#666;
}
ul.section li li a {
background:#ddd;
border-bottom:1px solid #eee;
}
ul.section li li a:hover {
background:#ccc;
}
ul.section li li a:active {
color:#000;
background:#fff;
}
ul.section ul li {
text-transform:none;
}
ul.section ul.current li a {
background:#eee;
border-bottom:1px solid #fff;
}
ul.section ul.current li a:hover {
background:#ddd;
}
ul.section ul.current li a:active {
background:#fff;
}
ul.section li a.current {
color:#fff;
background:#666;
}
ul.section li a.current:hover {
background:#555;
}
ul.section li a.current:active {
background:#444;
}
ul.section li a.active {
background:#fff;
cursor:default;
}
ul.section li.current > a.active, ul.section li.current > a.active:hover {
color:#fff;
background:#666;
cursor:default;
}
/* table
----------------------------------------------- */
table {
width:100%;
border:1px solid #bbb;
margin-bottom:10px;
}
col.colC {
width:8em;
}
th, td {
padding:.2em 1em;
text-align:left;
}
thead th {
border-bottom:2px solid #888;
background:#bbb;
padding:.4em 1em .2em;
}
thead th.table-head {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#555;
border:1px solid #555;
}
tbody th, tbody td {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
background:#eee;
}
tbody tr.odd th, tbody tr.odd td {
background:#fff;
}
tfoot th, tfoot td {
border-top:2px solid #666;
background:#eee;
}
tfoot tr.total th, tfoot tr.total td {
border-top:6px double #666;
}
tfoot tr.total th {
text-transform:uppercase;
}
th.currency, td.currency {
text-align:right;
}
/* forms
----------------------------------------------- */
form {
overflow:hidden;
}
fieldset {
border:1px solid #bbb;
padding:10px;
position:relative;
background:#e9e9e9;
margin-bottom:10px;
}
legend {
font-size:1.1em;
padding:.4em .8em;
background:#fff;
border:1px solid #bbb;
}
fieldset.login p {
margin-bottom:1em;
margin-top:0pt;
}
fieldset p label {
width:98%;
}
fieldset p input {
width:98%;
}
fieldset p select {
width:99%;
}
fieldset.login p label {
float:left;
line-height:2em;
margin-right:3%;
text-align:right;
width:32%;
}
fieldset.login p input {
width:60%;
}
fieldset.login input.button {
margin-left:35%;
}
form p.notice {
font-weight:bold;
}
input.search.text {
width:66%;
}
input.search.button {
width:28%;
margin-left:2%;
}
/* articles
----------------------------------------------- */
.articles {
padding:0;
}
.articles h2 {
margin:0;
}
#articles {
padding-top:0;
}
.article {
border-top:1px solid #666;
padding-top:.5em;
}
.box .article {
border-top:3px solid #fff;
padding:13px 10px 0 10px;
}
.article h2 {
font-size:2em;
font-weight:normal;
text-transform:none;
color:#333;
background:transparent;
padding:0;
margin:0;
border:none;
}
.article h3 {
margin-bottom:.2em;
font-size:1.6em;
}
.box .first {
border-top:none;
}
.article h4 {
font-size:1.2em;
text-transform:uppercase;
margin-bottom:.5em;
}
.article a.image {
float:left;
margin:3px 10px 3px 0;
padding:4px;
border:1px solid #bbb;
background:#fff;
}
.article a.image:hover {
border:1px solid #666;
}
.article a.image img {
float:left;
}
.article p.meta {
color:#666;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
padding:.3em 0;
margin-bottom:.8em;
}
/* site information
----------------------------------------------- */
#site_info .box {
width:920px;
color:#ccc;
background:#666;
position:fixed;
bottom:0;
height:27px;
margin:0;
}
#site_info a {
color:#fff;
}
#site_info a:hover {
color:#000;
}
/* AJAX sliding shelf
----------------------------------------------- */
#loading {
float:right;
margin-right:14px;
margin-top:-2px;
}
.block {
padding-bottom:1px;
}
/* Accordian
----------------------------------------------- */
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size:1.1em;
font-weight: normal;
}
.element h4 {
margin: 0;
padding:4px;
line-height:1.2em;
}
.element p {
margin: 0;
padding: 4px;
}
.float-right {
padding:10px 20px;
float:right;
}
#accordian-block {
padding-bottom:10px;
}
/* Mootools Kwicks
----------------------------------------------- */
#kwick-box {
padding:0;
overflow:hidden;
}
#kwick-box h2 {
margin:0;
}
#kwick {
position: relative;
}
#kwick .kwicks {
display: block;
background: #999;
height: 120px;
list-style:none;
margin:0;
overflow:hidden;
}
#kwick li {
float: left;
margin:0;
padding:0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 100px;
width: 215px;
padding: 10px;
background: #fff;
}
#kwick .kwick span {
color:#fff;
}
#kwick .one {
background: #666;
}
#kwick .two {
background: #777;
}
#kwick .three {
background: #888;
}
#kwick .four {
background: #999;
}
/*
-----------------------------------------------
Navigation
----------------------------------------------- */
/* navigation (horizontal subnavigation)
----------------------------------------------- */
ul.nav, ul.nav * {
margin:0;
padding:0;
}
ul.nav {
position:relative;
background:#666;
max-width:100%;
height:2.5em;
}
ul.nav li {
cursor:pointer;
float:left;
text-align:center;
list-style-type:none;
font-weight:normal;
}
ul.nav li ul {
cursor:default;
width:100%;
max-width:100%;
position:absolute;
height:auto;
top:2.5em;
background-position:0 0 !important;
left:-9000px;
}
ul.nav li ul li {
padding:0;
border:none;
width:auto;
max-width:none;
}
ul.nav li a {
color:#fff;
background:#666;
font-weight:bold;
text-decoration:none;
display:block;
float:left;
padding:0 1em;
height:2.4em;
line-height:2.5em;
}
ul.nav li ul li a {
position:relative !important; /* ie Mac */
cursor:pointer !important;
white-space:nowrap;
line-height:2em;
height:2em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
}
ul.nav li:hover a, ul.nav li a:hover, ul.nav li a:focus {
color:#000;
background:#ccc;
}
ul.nav li a:active {
color:#666;
background:#fff;
}
ul.nav li:hover ul {
left:0;
z-index:10
}
ul.nav li ul, ul.nav li {
background:#ccc !important
}
ul.nav li:hover ul li a {
color:#444;
}
ul.nav li:hover ul li a:hover {
color:#000;
background:#fff;
}
ul.nav li:hover ul li a:active {
color:#666;
background:#fff;
}
ul.nav li.current a {
color:#666;
background:#fff;
cursor:default;
font-weight:bold;
}
ul.nav li.current ul {
left:0;
z-index:5
}
ul.nav li.current ul, ul.nav li.current {
background:#ccc !important
}
ul.nav li.current ul li a {
color:#444;
background:#ccc;
font-weight:normal;
}
ul.nav li.current ul li a:hover {
color:#000;
background:#fff;
}
ul.nav li ul li.current a, ul.nav li ul li.current a:hover, ul.nav li.current:hover ul li a:active {
color:#666;
background:#fff;
}
/* navigation (vertical subnavigation)
----------------------------------------------- */
ul.nav {
background:#990000;
}
ul.main li {
position:relative;
top:0;
left:0;
}
ul.main li ul {
border-top:0;
}
ul.main li ul li {
float:left;
}
ul.main li a {
height:2.5em;
line-height:2.5em;
border:0;
color:#fff;
background:#990000;
}
ul.main li ul li a {
width:12em;
line-height:2em;
height:2em;
text-align:left;
color:#fff;
border-top:1px solid #990000;
background:#444;
}
ul.main li a:focus {
color:#fff;
background:#990000;
}
ul.main li ul li a:hover {
color:#fff;
background:#555;
}
ul.main li:hover a {
color:#fff;
background:#b90302;
}
ul.main li:hover ul li a {
color:#fff;
}
ul.main li:hover ul li a:hover {
color:#fff;
background:#990000;
}
ul.main li:hover a:active {
background:#444;
}
ul.main li:hover ul li a:active {
color:#fff;
background:#770000;
}
/* secondary list
----------------------------------------------- */
ul.nav li.secondary {
float:right;
color:#cde;
background:transparent !important;
}
ul.nav li.secondary span.status {
float:left;
padding:0 1em;
line-height:2.77em;
height:2.77em;
font-size:0.9em;
}
ul.nav li.secondary span.status a {
float:none;
display:inline;
padding:0;
height:auto;
line-height:auto;
color:#cde;
background:transparent;
}
ul.nav li.secondary span.status a:hover {
color:#fff;
background:transparent;
}
ul.nav li.secondary span.status span {
text-transform:capitalize;
}
ul.nav li.secondary:hover a {
color:#fff;
background:#666;
}
ul.nav li.secondary:hover a:hover {
background:#555;
}
ul.nav li.secondary:hover a:active {
background:#444;
}
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a {
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
display:none;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #B8C4CF;
color: #FFFFFF;
}
.cs-title {
width: 545px;
padding: 10px;
background-color: #000000;
color: #FFFFFF;
-webkit-border-top-right-radius:5px;
-moz-border-radius-topright:5px;
}
.cs-prev, .cs-next {
background-color: #000000;
color: #FFFFFF;
padding: 0px 10px;
}
</style>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
<style>
/*
Fluid 960 Grid System - IE6 Fixes
Learn more ~ http://www.designinfluences.com/
Licensed under GPL and MIT.
*/
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16
{
margin-left: .8%;
margin-right: .8%;
}
</style>
<![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<style>
</style>
<![endif]-->
<script type="text/javascript" src="http://www.redflag.be/prospect/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.redflag.be/prospect/js/coin-slider.min.js"></script>
</head>
<body>
<div class="container_12">
<div id="contents">
<div class="grid_12">
<h1 id="branding"> <a href=""><img src="img/logo.png" alt="logo"/></a> <span class="profilebox"> <br/>
<b>Welcome back Mustek</b><br/>
You have 0 messages<br/>
Profile - Sign Out </span> <span class="profilebox"> <a href="#" class="image"><img src="http://www.redflag.be/prospect/img/blank_avatar.png" height="60" width="60" alt="photo" /></a> </span> </h1>
</div>
<div class="clear"></div>
<div class="grid_12">
<ul class="nav main">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Recently Added</a> </li>
<li> <a href="#">Categories</a>
<ul>
<li> <a href="#">Action</a> </li>
<li> <a href="#">Adventure</a> </li>
<li> <a href="#">Casino & Cards</a> </li>
<li> <a href="#">Classics</a> </li>
<li> <a href="#">Fighting</a> </li>
<li> <a href="#">Puzzle & Mind</a> </li>
<li> <a href="#">Racing</a> </li>
<li> <a href="#">Shooters</a> </li>
<li> <a href="#">Sports</a> </li>
</ul>
</li>
<li> <a href="#">Multiplayer</a> </li>
<li> <a href="#">Newsblog</a> </li>
<li> <a href="#">Community</a> </li>
<li class="secondary">
<input style="padding:0px;margin-top:4px;margin-bottom:0px;" class="search" type="text" value="Search" />
<input class="search" type="button" value="Search" />
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid_12" id="coin-slider"> <a href="img01_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_1.png' width="940" alt="Welcome to Project Prospect"/> <span> Welcome to Project Prospect! </span> </a> <a href="img02_url"> <img src='http://www.redflag.be/prospect/img/scroller/test_2.png' width="940" alt="Jamlegend, new on Project Prospect"/> <span> Play the popular music-game Jamlegend, right here! </span> </a> </div>
<div class="clear"></div>
<div class="grid_12">
<div class="box news">
<h2 class="r_bot"><b>News:</b> No releasedate set.</h2>
</div>
</div>
<div class="clear"></div>
<div class="grid_4">
<div class="box">
<h2 class="r_top">Newest Games (more)</h2>
<div class="block">
<p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<h2 class="r_top">Most Popular Games (more)</h2>
<div class="block">
<p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<h2 class="r_top">Staff Picks (more)</h2>
<div class="block">
<p>01. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>02. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>03. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>04. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>05. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>06. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>07. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>08. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>09. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
<p>10. <a href="#">CTArcade Shooter</a> by <a href="#">Mustek</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="container_16" style="padding-top:30px;">
<div id="footer">
<div class="grid_16" id="site_info">
<div class="box">
<p>©2010 - Redflag.be, all content on this website is property of their respected owners. <b>Pre-Alpha Build, do not leak!</b></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 940, height: 300, navigation: true, spw:9, sph:5, delay: 5000 });
});
</script>
</body>
</html>
Probably needs tweaking but basically working.
Okay, I followed that, up untill the 5px border thing.
Also, the footer almost works like it should, it still goes a few pixels over my container before it stops.
EDIT: I’ve removed the border temporarily
Since my edit button is gone,
I fixed the footer location by placing a spacer in there, I know it’s kind of cheating, but it works
Now for that black bar at the top…
Now for that black bar at the top…
Just use a repeating image on the body x-axis to create the top border and then apply a border top to #contents.
#contents {
[B] border-top:5px solid #000;[/B]
position:relative;
padding-bottom:40px;/*height:100%;*/
}
Then remove the border-top from the body styles.
That’s the easiest solution
And it works,
Thanks for the help on this, I’ve been messing in the css for a day before I came to here.