Web Analytics Made Easy -
StatCounter My layout is completely screwed up in Dreamweaver - CodingForum

Announcement

Collapse
No announcement yet.

My layout is completely screwed up in Dreamweaver

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • My layout is completely screwed up in Dreamweaver

    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
    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;
    }
    index.html
    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>

  • #2
    You have quite a few errors in your css. You can validate and view these errors here.

    Not sure what this is:
    Code:
    *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' );
    }
    nor why you'd need javascript to fix an element, but its throwing some of the errors I saw. You can simply use position: fixed; along with top and left rules to get the same effect.

    Also, you cant rely on DW's browser rendering tools to accurately represent what a document will look like in a real browser. But, fixing these errors seems to cause the render in DW to be alot better.
    Teed

    Comment


    • #3
      Thanks for that post, and for the link to the CSS checker. I shall run my code through that when I get back home and make amends. I have tested the site in Firefox, Safari and IE and all seems to be alright.

      As for the messy code - I've been experimenting quite a bit, and I suppose it's about time I cleaned out all the crap I left behind.

      Will report back once I've checked it if there are any more errors.

      Thankyou

      Comment


      • #4
        Hi

        So I've rectified all of the errors in my CSS that were found using the online checker. The problem is still there and so I'm still baffled!

        After looking at some older revisions, I found that the issue lies somewhere in this new structured navigation:
        Code:
        <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>
        I think it is most likely in the h2 class part.

        Cheers

        Comment

        Working...
        X