Tweet
Hi
So I'm working on a Sports Management website for a friend. All seems to be going well - I'm experimenting with different CSS elements as I'm pretty new to the whole thing. I have managed to create a fixed sidenav, which I am quite happy with, by following this tutorial: http://designm.ag/tutorials/sticky-sidenav-layout/
When I preview the page in Firefox, it looks like this:
All well and good. In dreamweaver however, it looks like this:
The content is completely out of place - I have to scroll for about five minutes to the right, then two minutes downwards to find it. Now although the site displays fine in all browsers - this problem with Dreamweaver makes it very hard to manage the editing side.
Any input would be appreciated. I have copied and pasted my main CSS and HTML at the bottom.
Thanks
main.css
index.html
So I'm working on a Sports Management website for a friend. All seems to be going well - I'm experimenting with different CSS elements as I'm pretty new to the whole thing. I have managed to create a fixed sidenav, which I am quite happy with, by following this tutorial: http://designm.ag/tutorials/sticky-sidenav-layout/
When I preview the page in Firefox, it looks like this:
All well and good. In dreamweaver however, it looks like this:
The content is completely out of place - I have to scroll for about five minutes to the right, then two minutes downwards to find it. Now although the site displays fine in all browsers - this problem with Dreamweaver makes it very hard to manage the editing side.
Any input would be appreciated. I have copied and pasted my main CSS and HTML at the bottom.
Thanks
main.css
Code:
@charset "utf-8";
/* CSS Document */
body {
border-top: 0px solid #244686;
margin: 0;
padding: 0;
background-color:#FFFfff
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #444;
}
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background:#fff
font-size:16px; position: relative;
}
#sidenav {
width: 300px;
position: fixed;
float: left;
background-color:#FFF;
height: 100%;
border-right: 0px solid #b56a55;
}
*html #sidenav {
position: absolute;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
#sidenav h2 {
text-indent: -99999px;
height: 30px;
padding: 0;
margin: 20px 0px 10px;
background-position: 37px top;
}
h2.management {background: url(../images/h2_management.png) no-repeat ;
}
h2.services {background: url(../images/h2_services.png) no-repeat ;
}
h2.clients {background: url(../images/h2_clients.png) no-repeat ;
}
#sidenav ul {
margin: 0; padding: 0px 50px 0px;
list-style: none;
background:url(../images/) no-repeat right bottom;
font-size:12px
}
#sidenav ul li{
margin: 0px;
padding: 0px;
display: inline;
}
#sidenav ul li a{
display: block;
margin: 0; padding: 5px 0 5px 15px;
background: url(../images/sidenav_arrow.png) no-repeat left center;
text-decoration: none;
color: #333;
}
#sidenav ul li a:hover {
color: #999;
}
#content {
float: right;
width: 640px;
padding: 0px 20px 20px;
}
#content h1 {
background: url(../images/h1_home.png) no-repeat center top;
text-indent: -9999px;
height: 145px;
width: 680px;
margin: 0 0 0 -20px; padding: 0;
}
{
margin: 10px 0;
padding: 10px 0;
height: 30px;
color:#256529;
font:Verdana, Geneva, sans-serif;
}
#content h2 {
color: #244686;
margin: 10px 0;
padding: 10px 0;
font-size: 2em;
font-weight: normal;
}
#content p {
line-height: 1.8em;
padding: 7px 0;
margin: 7px 0;
}
.mainContainer {
margin: 0 auto;
text-align: center;
}
.centerSlider {
width: 610px;
margin: 0 auto;
}
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Revo Sports Management</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div id="sidenav">
<img src="images/logo.png" alt="Logo" />
<h2 class="management"></h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<h2 class="services"></h2>
<ul>
<li><a href="services.html">Management</a></li>
<li><a href="contact.html">Sponsorship</a></li>
<li><a href="contact.html">Legal</a></li>
<li><a href="contact.html">Financial</a></li>
</ul>
<h2 class="clients"></h2>
<ul>
<li><a href="services.html">Football</a></li>
<li><a href="services.html">Golf</a></li>
</ul>
</div>
<div id="content">
<h1>Revolution Sports Management</h1>
<h2>Welcome</h2>
<p>The following is example text, mainly to exhibit the scrolling features of the site.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nunc erat, varius non lacinia vitae, blandit quis nisi. Pellentesque iaculis mi nec metus venenatis mollis. In faucibus tellus turpis. Suspendisse dictum feugiat nunc eu ullamcorper. Donec feugiat nulla vitae quam egestas vitae venenatis dolor tristique. Sed eget tortor a enim sollicitudin vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed semper feugiat volutpat. Duis sed accumsan sem. Pellentesque ut tellus nulla, ornare ultricies orci. Vestibulum lectus enim, aliquam convallis tristique dapibus, aliquam ac sapien.</p>
<p>Maecenas tempus, felis nec tempus sagittis, est arcu auctor arcu, vitae imperdiet quam urna quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla libero dignissim metus aliquet at molestie neque interdum. Duis dapibus, sapien at porttitor ultrices, lacus est porta mi, non sodales tellus nisi molestie nunc. Cras vitae posuere ipsum. Nullam viverra, enim eget dignissim malesuada, ante libero rutrum lorem, a euismod diam diam vitae justo. Aliquam mauris urna, lobortis at porta in, cursus vitae sapien. Curabitur in nisi mi. Cras lacinia eleifend imperdiet. Sed tempus nunc lobortis est rutrum scelerisque. Vestibulum eros dolor, varius a bibendum ut, sagittis ac mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</body>
</html>
Comment