Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>markit strategies and pr - client work</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<link href="../global/markit_n.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"> <!-- keep layout tidy -->
<div id="colorbar">
</div> <!-- top green -->
<div id="topnav"> <!-- navigation as tabs -->
<ul>
<li>a list</li>
<li>goes here</li>
</ul>
</div>
<div id="col1">
<!-- to the left -->
<div id="logo">an image
</div>
<div id="orange"> some images go in this box<br />
</div>
</div>
<div id="col2"> <!-- to the right -->
<div id="content">
<h1>title</h1>
<p>content</p>
</div>
</div>
<div id="footer">
<!-- to the bottom -->
<div class="sidenav">
<ul>
<li>a list</li>
<li>goes here</li>
</ul>
<br />
</div>
<div id="bottomnav">
<ul>
<li>another</li>
<li>list</li>
<li>goes here</li>
</ul>
<br />
</div>
</div>
</div>
</body>
</html>some css:
body {
margin:0;
padding:0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .8em;
line-height: 1.6em;
}
#wrapper {
position: relative;
margin: auto;
background-image: url(../images/colorsb.jpg);
background-repeat: repeat;
width: 100%;
}
#colorbar {
background: #898741; /* green top background */
height: 100px;
}
#col1 {
position: relative;
width:260px;
margin: 0;
padding: 0;
}
#logo {
float: left;
margin: 24px 0 100px 14px;
padding: 0;
}
#orange {
width: 130px;
background-color: #d98927;
padding: 0;
margin-left: 145px;
}
#orange img {
padding: 0 0 10px 10px; /* left and bottom so orange shows */
}
#col2 {
min-height: 60%;
width: 412px;
background-color: #e9b97f;
margin-top: -80px;
margin-left: 278px;
border: 1px solid #FFFFFF;
}
#content {
margin:12px 24px 0 24px; /* text handling */
width: 373px;
}
#footer {
background-color:#898741;
clear:both;
margin: -40px 0 0 0;
padding: 0 0 50px 0; /* bottom lets green flow below bottomnav nicely */
}
/*
navigation items
tabbed now, easier to change in future
*/
#topnav {
background: #898741;
font-size:0.8em;
text-align:left;
}
#topnav ul {
text-align:left;
margin: 0;
padding:10px;
}
#topnav ul li {
list-style-type:none;
display:inline;
}
#topnav ul li a {
color:#fff;
padding:3px 10px 3px 10px;
text-decoration:none;
text-transform:uppercase;
}
#topnav ul li a.this {
color:#000;
padding:3px 10px 3px 10px;
}
#topnav ul li a:hover {
padding:3px 10px 3px 10px;
text-decoration:none;
}
Allow me to suggest that you simplify your problem and code for testing purposes primarily and next for queries on the forum.
Start with emptying your columns.
Does it work now?
Next drop in your content for them one by one.
Check each time whether it still works and detect the culprit in this manner.
Then adjust as appropriate.
Good luck.
