Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help With Site Issue

    Hi

    I am building a site and have an issue that i cannot figure out how to rectify.

    For some reason i am unable to scroll down as it seems like the overflow has been disabled or something!

    Here is the code for the page:

    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>Paul Crook Consultancy</title>
      <style type="text/css">
    body {
    	background-color: #F7F7F7;
    	margin: 0;
    }
    #headerwrap {
    	height: 130px;
    	width: 100%;
    	background-image:url(images/headerback.jpg);
    }
    #header {
    	margin: 0 auto;
    	height: 130px;
    	width: 1100px;
    	background-image: url(images/header.jpg);
    	background-repeat: no-repeat;
    }
    #gap {
    	height: 50px;
    	width: 100%;
    	background-image:url(images/gap1back.png);
    }
    #navsliderwrap {
    	background-color: #FFFFFF;
    	height: 400px;
    	width: 1000px;
    	margin: 0 auto;
        box-shadow: 0px 2px 7px #c0c0c0;
    }
      #navbtns {
    	float:left;
    	height: 400px;
    	width: 300px;
    }
      #nivowrap {
    	padding: 15px;
    	float: right;
    	height: 370px;
    	width: 670px;
    }
      #dateclock {
    	float: right;
    	height: 160px;
    	width: 400px;
    	padding-top: 20px;
    }
    
    .container {
        width: 300px;
        overflow: hidden;
    }
    
    .clock {
        width: 300px;
        margin: 0 auto;
        padding: 30px;
        color: #19274f;
    }
    
    #Date {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        text-align: center;
    }
    
    ul {
        width: 260px;
        margin: 0 auto;
        padding: 0px;
        list-style: none;
        text-align: center;
    }
    
    ul li {
        display: inline;
        font-size: 26px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    #point {
        position: relative;
        -moz-animation: mymove 1s ease infinite;
        -webkit-animation: mymove 1s ease infinite;
        padding-left: 2px;
        padding-right: 2px;
    }
    
    /* Simple Animation */
    @-webkit-keyframes mymove {
        0% {opacity: 1.0;
    }
    
    50% {
        opacity: 0;
        text-shadow: none;
    }
    
    100% {
        opacity: 1.0;
    
    }	
    
    @-moz-keyframes mymove {
        0% {
            opacity: 1.0;
        }
    
        50% {
            opacity: 0;
            text-shadow: none;
        }
    
        100% {
            opacity: 1.0;
    };
    
    .nivoSlider {
        position:relative;
        background:url(images/loading.gif) no-repeat 50% 50%;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
    }
    .nivoSlider a {
        border:0;
        display:block;
    }
      #gap2 {
    	height: 50px;
    	width: 100%;
    }
      #bodywrap {
    	height: 500px;
    	width: 100%;
    }
      #bodysubwrap {
    	height: 500px;
    	width: 1100px;
    	margin: 0 auto;
    }
      #leftside {
    	height: 500px;
    	width: 600px;
    	float: left;
    	background-color:#FFF;
    }
      #rightside {
    	float: right;
    	height: 500px;
    	width: 300px;
    	background-color:#FFF;
    }
      </style>
      
      <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 1000, // Slide transition speed
            pauseTime: 6000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: false, // Next & Prev navigation
            controlNav: false, // 1,2,3... navigation
            controlNavThumbs: false, // Use thumbnails for Control Nav
            pauseOnHover: true, // Stop animation while hovering
            manualAdvance: false, // Force manual transitions
            prevText: 'Prev', // Prev directionNav text
            nextText: 'Next', // Next directionNav text
            randomStart: false, // Start on a random slide
            beforeChange: function(){}, // Triggers before a slide transition
            afterChange: function(){}, // Triggers after a slide transition
            slideshowEnd: function(){}, // Triggers after all slides have been shown
            lastSlide: function(){}, // Triggers when last slide is shown
            afterLoad: function(){} // Triggers when slider has loaded
        });
    });
    </script>
      
      <script type="text/javascript">
    $(document).ready(function() {
    // Create two variable with the names of the months and days in an array
    var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
    var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
    
    // Create a newDate() object
    var newDate = new Date();
    // Extract the current date from Date object
    newDate.setDate(newDate.getDate());
    // Output the day, date, month and year   
    $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
    
    setInterval( function() {
    	// Create a newDate() object and extract the seconds of the current time on the visitor's
    	var seconds = new Date().getSeconds();
    	// Add a leading zero to seconds value
    	$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    	},1000);
    	
    setInterval( function() {
    	// Create a newDate() object and extract the minutes of the current time on the visitor's
    	var minutes = new Date().getMinutes();
    	// Add a leading zero to the minutes value
    	$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
        },1000);
    	
    setInterval( function() {
    	// Create a newDate() object and extract the hours of the current time on the visitor's
    	var hours = new Date().getHours();
    	// Add a leading zero to the hours value
    	$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
        }, 1000);	
    });
    </script>
    
      </head>    
      <body>
      
    <div id="headerwrap">
    <div id="header">
    <div id="dateclock"><div class="clock">
    <div id="Date"></div>
      <ul>
          <li id="hours"></li>
          <li id="point">:</li>
          <li id="min"></li>
          <li id="point">:</li>
          <li id="sec"></li>
      </ul>
    </div>
    </div>
    </div>
    </div>
      
    <div id="gap"></div>
      
    <div id="navsliderwrap">
    <div id="navbtns"><img src="images/delete--navlinks.jpg" width="398" height="400" /></div>
    <div id="nivowrap"><div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
            <img src="images/mainimage1.jpg" alt="" />
            <img src="images/mainimage1.jpg" alt="" />
            <img src="images/mainimage1.jpg" alt="" />
            <img src="images/mainimage1.jpg" alt="" />
    </div>
    </div>
    </div>
    </div>
          
    <div id="gap2"></div>
      
    <div id="bodywrap">
    <div id="bodysubwrap">
    <div id="leftside"></div>
    <div id="rightside"></div>
    </div>
    </div>
    
      </body>
      </html>

    It looks fine in the design view on dreamweaver but when it goes live you cannot scroll down to the divs below navsliderwrap div.

    Any help would be greatly appreciated.

    Thanks,

    Dan
    Last edited by VIPStephan; 05-09-2013 at 07:44 AM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,801
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •