First, this is my CSS for my website. It's not complete yet but most of it is there.
- Code: Select all
@charset "UTF-8";
/* CSS Document */
/*Body and Links*/
body{
background-color:#f6f5e7;
background-image: url(images/bg_01.png);
background-repeat: no-repeat;
margin: 0px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a:link{
color: #003399;
text-decoration: none;
font-weight: bold;
border: none;
}
a:visited{
color: #003399;
text-decoration: none;
font-weight: bold;
border: none;
}
a:active{
color: #003399;
text-decoration: none;
font-weight: bold;
border: none;
}
a:hover{
color: #003399;
text-decoration: none;
font-weight: bold;
border:none;
}
/*Layout*/
#container{
float: none;
width: 100%;
margin: 0px;
height: auto;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:left;
}
/*Header*/
#img0
{
width: 202px;
height: 112px;
overflow: hidden;
background: url(images/header_01.png) top left no-repeat;
display: inline;
float: left;
}
#img1
{
width: 198px;
height: 112px;
overflow: hidden;
background: url(images/header_02.png) top left no-repeat;
display: inline;
float: left;
}
#img2
{
width: 200px;
height: 112px;
overflow: hidden;
background: url(images/header_03.png) top left no-repeat;
display: inline;
float: left;
}
#img3
{
width: 200px;
height: 112px;
overflow: hidden;
background: url(images/header_04.png) top left no-repeat;
display: inline;
float: left;
}
/*spacer*/
#img4
{
width: 50px;
height: 48px;
overflow: hidden;
display: inline;
float: left;
}
/*Links*/
#img5
{
width: 137px;
height: 48px;
overflow: hidden;
background: url(images/header_06.png) top left no-repeat;
display: inline;
float: left;
}
#img6
{
width: 130px;
height: 48px;
overflow: hidden;
background: url(images/header_07.png) top left no-repeat;
display: inline;
float: left;
}
#img7
{
width: 130px;
height: 63px;
overflow: hidden;
background: url(images/header_08.png) top left no-repeat;
display: inline;
float: left;
}
#img8
{
width: 130px;
height: 48px;
overflow: hidden;
background: url(images/header_09.png) top left no-repeat;
display: inline;
float: left;
}
#img9
{
width: 130px;
height: 48px;
overflow: hidden;
background: url(images/header_10.png) top left no-repeat;
display: inline;
float: left;
}
#img10
{
width: 93px;
height: 48px;
overflow: hidden;
background: url(images/header_11.png) top left no-repeat;
display: inline;
float: left;
}
#img11
{
width: 700px;
height: 33px;
overflow: hidden;
background: url(images/content_11.png) top left no-repeat;
display: inline;
float: none;
}
/*Containers*/
.c0{
float: none;
width: 800px;
margin: auto;
height: auto;
color:#000000;
text-align:left;
vertical-align:top;
text-align:center
}
.c1{
float: none;
width: 700px;
margin: auto;
height: auto;
background-color:#FFFFFF;
color:#000000;
text-align:left;
vertical-align:top;
}
/*Text containers*/
.main{
float: left;
width: 423px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom:10px;
height: auto;
text-align:left;
}
.nav{
float: right;
width: 235px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom:10px;
height: auto;
text-align:left;
}
/*Text*/
.title{
color: #F5E9DA;
font-size: 18px;
font-weight: bold;
}
.subtitle{
color: #6a2525;
font-size: 14px;
font-weight: bold;
}
.cont{
color: #000000;
font-size: 12px;
font-weight: bold;
}
.desc{
color: #000000;
font-size: 12px;
font-weight: bold;
font-style: italic;
}
And in the designer view / split view in dreamweaver, this is what happens:
As you can see the white content box is up behind the links.
(in the CSS that is .c1 showing up behind .c0 and to the left)
It's not noticable online http://www.nnjoi.com where it gets centered properly but the white still floats behind the links.
Why does it do this and is there a fix for it?
The second part of my question is adding an image to the bottom of the white container that stays below it as it expands. For some reason when I throw they image in there whether it be in a classed Div, or on it's own, the image doesn't appear.
Any ideas?
Thanks guys
