Help With This CSS Template Please

Hi, I am supplying the CSS code and the html code for a template I want to use. I am wondering if someone can insert the proper CSS code to create a left margin where I can create a navigation menu on the text component of the html page. The margin should span the entire body of the page and be approximately 150 pixels wide. Once it is placed I believe I will know what to do to change it to my specs. It probably requires some type of div tag but I'm not experienced enough to manipulate the code to get what I want.

Thanks in advance for your help,
Peter

**********************
CSS
**********************
html, body {
background: #BABABA url(images/test.jpg);
margin:0;
padding:0;
font-family: Arial,Helvetica,sans-serif;
font-size: .9em;
}

.header {
width: 845px;
height: 68px;
border-style: solid;
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 0px;
margin: 0 auto 0 auto;
}

.header h1 {
margin: 0px;
background: url(images/test.jpg) top left no-repeat;
}

.header h1 a {
display: block;
text-indent: -5000px;
text-decoration: none;
width: 746px;
height: 68px;
}

.mainmenu {
width: 845px;
height: 25px;
border-style: solid;
border-top-width: 0px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 0px;
margin: 0 auto 0 auto;
}

.mainmenu ul {
cursor: default;
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
}

.mainmenu li {
cursor: default;
list-style-type: none;
display: inline;
margin: 0px;
padding: 4.85px;
line-height: 25px;
}

.mainmenu li a {
text-decoration: none;
font-weight: bold;
font-size: .95em;
padding: 5px;
}

.content {
padding: 10px;
width: 825px;
border-style: solid;
border-top-width: 0px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
margin: 0 auto 0 auto;
}

.content p {
margin: 0px;
}

.content img {
float: right;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}

.content img.left {
float: left;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}

.content iframe {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}

h1 {
font-size: 1.6em;
margin-bottom: 10px;
}

h2 {
font-size: 1.4em;
margin-bottom: 10px;
}

.minilinks {
text-align: center;
font-size: 0.8em;
}

.footer {
width: 845px;
height: 20px;
border: 0px;
margin: 10px auto 20px auto;
text-align: center;
font-size: 0.8em;
}

div.images {
margin: 0 auto;
text-align:center;
}

div.images img {
float: none;
margin: 0px;
}

**********************
HTML
**********************
<!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" lang="en" xml:lang="en">
<head>

<title>Test</title>
<meta name="description" content="Test" />
<meta name="keywords" content="Test" />

<h1 title="Test"><a href="Test.html" title="Test">Test</a></h1>

</div>

<li><a href="index.html">Test</a></li>
<li><a href="index.html">Test</a></li>
<li><a href="index.html">Test</a></li>
<li><a href="index.html">Test</a></li>
<li><a href="index.html">Test</a></li>
<li><a href="index.html">Test</a></li>

</ul>
</div>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum erat ut erat suscipit tempus. Sed mauris lorem, vulputate tincidunt eleifend vel, molestie faucibus orci. Nulla convallis, arcu non cursus laoreet, leo ipsum sagittis tellus, vitae egestas justo mauris id ipsum.</p> <br />

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum erat ut erat suscipit tempus. Sed mauris lorem, vulputate tincidunt eleifend vel, molestie faucibus orci. Nulla convallis, arcu non cursus laoreet, leo ipsum sagittis tellus, vitae egestas justo mauris id ipsum.</p> <br />

<div class="minilinks">
<a href="index.html">Test</a> ¦
<a href="index.html">Test</a> ¦
<a href="index.html">Test</a> ¦
<a href="index.html">Test</a> ¦
<a href="index.html">Test</a>
<br />
<a href="index.html">Test</a> ¦ <a href="index.html">Test</a> ¦ <a href="index.html">Test</a> ¦ <a href="index.html">Test</a> ¦ <a href="index.html">Test</a>
</div>

</div>

</body>
</html>

Help With This CSS Template Please

Peter54

limbo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week