Forum Moderators: not2easy
I've searched through the forums and seen similar problems to the one I'm having so I've tried a few things but had no luck so far - so I wondered if anyone could help - its probably something quite simple.
I have a web page with navigation and then main content - I've applied stylesheets to these but the main content seems to be displaying on top of the navigation. I think it might be something to do with 'float' but I'm not sure how I should correct it. The code is below.
HTML
<!--start of tabbed navigation-->
<div id="navigationpurple">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="trainer_guide.htm">Trainer Guide</a></li>
<li id="current"><a href="module_one.htm">Module 1</a></li>
<li><a href="module_two.htm">Module 2</a></li>
</ul></div>
<!--end of navigation-->
<!--start of main content-->
<div id="image"><img src="images/28.jpg"></div>
<div id="background">
<div id="contentbox">
<div id="boxheadpurple">
<h1>Module 1: Introduction and Foundation</h1>
</div>
<div id="boxbody">
<p><a href="../pdf/exercise1.pdf">Exercise 1</a></p>
<p><a href="../pdf/exercise2.pdf">Exercise 2</a></p>
<p><a href="../pdf/exercise3.pdf">Exercise 3</a></p>
<p><a href="../pdf/exercise4.pdf">Exercise 4</a></p>
</div>
</div>
</div>
<div id="bottombar"> </div>
<!--end of main content-->
CSS
/*---------------------------
Global Tags
---------------------------*/
body {
background: #FFFFFF;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-color: #000000;
}
img {
border: 0;
margin: 0;
padding: 0;
}
table {
margin: 0;
padding: 0;
}
a {
margin: 0;
padding: 0;
}
/*---------------------------
Headers
---------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-size: 14px;
color: #FFFFFF;
margin: 0;
padding: 5px 0 5px 12px;
background: #ADACDC;
}
/*---------------------------
Styles for tabbed navigation
---------------------------*/
#navigationpurple {
float:left;
background:#ffffff url("images/tab_bg_purple.gif") repeat-x bottom;
width:100%;
line-height:normal;
}
#navigationpurple ul {
margin:0;
padding:20px 20px 0;
list-style:none;
}
#navigationpurple li {
float:left;
background:url("images/tab_left.gif") no-repeat left top;
margin:0;
padding:0 0 2px 7px;
}
#navigationpurple a {
float:left;
background:url("images/tab_right.gif") no-repeat right top;
display:block;
padding:5px 15px 18px 6px;
text-decoration:none;
font-weight:normal;
color:#ffffff;
}
/* commented backslash hack hides rule from Mac IE5 \*/
#navigationpurple a {float:none;}
/* End Mac IE5 hack */
#navigationpurple a:hover {
color:#333399;
}
#navigationpurple #current {
background-image:url("images/tab_left_purple.gif");
}
#navigationpurple #current a {
background-image:url("images/tab_right_purple.gif");
padding-bottom:18px;
color:#333399;
}
/*---------------------------
Main content box
---------------------------*/
a {
color:#333399;
}
a:hover, active {
color:#666666;
}
a:visited {
color:#A977D8;
}
/*---------------------------
Main content box
---------------------------*/
/* Show only to IE PC \*/
* html .boxheadpurple h1 {height: 1%;} /* For IE 5 PC */
#contentbox {
position:relative; top: 20px; left: 20px;
width:95%;
background: #ffffff url("images/bottomright_curve_white.gif") no-repeat bottom right;
font-size: 100%;
}
#boxheadpurple {
background: #ADACDC url("images/topright_curve_purple.gif") no-repeat top right;
margin: 0;
padding: 0;
text-align: center;
}
#boxheadpurple h1 {
background: url("images/topleft_curve_purple.gif") no-repeat top left;
text-align: left;
margin: 0;
padding: 5px 10px 5px;
color: white;
}
#boxbody {
background: url("images/bottomleft_curve_white.gif") no-repeat bottom left;
text-align: left;
margin: 0;
padding: 0px 10px 5px;
}
/*---------------------------
General styles
---------------------------*/
#logo {
position:relative; top: 20px; left: 20px;
padding-bottom: 30px
}
#bottombar {
background-image:url("images/bottom_bar.gif");
}
#background {
background: #EFEEF8;
padding-bottom: 40px
}
#image {
float:right;
margin: 20px 10px 10px 10px;
border: 1px solid #A977D8;
}
Thanks in advance for any advice.
<div id="navigationpurple">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="trainer_guide.htm">Trainer Guide</a></li>
<li id="current"><a href="module_one.htm">Module 1</a></li>
<li><a href="module_two.htm">Module 2</a></li>
</ul><div id="clearing"></div></div>
CSS -
#clearing{
clear: both;
}
This may help for now..
