Page cannot Scrolling in Dreamweaver Live
I am developing a website using dreamweaver cs6 using basic HTML/CSS. I can't scrolling when i click live and also doesnt scroll in internet explorer.Before of this it was working but today suddenly does not work. What should do I do??
Here is the HTML & CSS. sry for messy.
HTML:
<!doctype html>
<html>
<head>
<meta name="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Sunway College Ipoh</title>
<link rel="stylesheet"type="text/css"href="style.css">
<link href="head.css" rel="stylesheet" type="text/css">
<style type="text/css">
p {
text-align: center;
color: #3399CC;
font-size: 18px;
}
.contain {
font-size: 12px;
}
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
left: 115px;
top: 1168px;
}
#apDiv2 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
left: 451px;
top: 1166px;
}
#apDiv3 {
position: absolute;
width: 200px;
height: 115px;
z-index: 3;
left: 114px;
top: 1386px;
}
#apDiv4 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 405px;
top: 1798px;
}
#apDiv5 {
position: absolute;
width: 200px;
height: 115px;
z-index: 4;
left: 448px;
top: 1385px;
}
#apDiv6 {
position: absolute;
width: 200px;
height: 115px;
z-index: 5;
left: 803px;
top: 1384px;
}
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 6;
left: 452px;
top: 1617px;
}
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 7;
top: 1151px;
left: 779px;
}
</style>
</head>
<body>
<nav>
<h1 class="logo">
<img src="imges/Sunway College Ipoh Logo (New) copy.png" width="20%" height="70
" longdesc="file:///Macintosh HD/Users/siaoyun97122/Desktop/web design/Final Project/imges/Sunway College Ipoh Logo (New) copy.png">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PROGRAMMES</a></li>
<li><a href="#">POTENTIAL STUDENT</a></li>
<li><a href="#">HIGHLIGHTS</a></li>
<li><a href="#">CONTANCT US</a></li>
<li><a href="#">EN</a></li>
</ul>
<div style="clear:both"></div>
</nav>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="imges/cover-banner2 copy.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="imges/Web Banner_1,100px - Open Day March 2018.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="imges/Web-Banner_1,100px-x-375px - 2018 Intakes.jpg"style="width:100%">
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<p> </p>
<p> </p>
<p>WHY SUNWAY COLLEGE IPOH ?</p>
<p>_____</p>
<span class="contain">At Sunway College Ipoh, education is not just about gathering qualifications but is an interesting and rewarding learning experience that can enhance many aspects of your life.
</span>
<p> </p>
<p> </p>
<p>Our Programmes</p>
<p>_____</p>
<p> </p>
<p1>
Sunway College Ipoh offers a wide range of Professional, Diploma and Pre-University programmes which lead to qualifications that are relevant to market needs, and which enhance the employability of young professionals today.
<p> </p>
<p> </p>
</section>
<div style="text-align:center">
</div>
<!-- The three columns -->
<div class="row">
<div class="column">
<img src="imges/interior design.png"style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imges/GRAPHIC DESIGN.png" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imges/foudation in art copy.png" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imges/CAT ACCA.png" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imges/business adm.png" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imges/business info sys.png" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imges/marketing.png" style="width:100%" onclick="myFunction(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>
<script>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
</body>
<p> </p>
<p> </p>
<footer class="site-footer">
All information is correct at the time of publishing (January 2018).
Copyright © 2013-2018 Sunway College Ipoh (600640-K) DK265-03(A)
A member of Sunway Education Group (146440-K)
Owned and governed by the Jeffrey Cheah Foundation (800946-T)
All Rights Reserved.
This website is best viewed in Firefox 25 / Chrome 31 / Internet Explorer 10 and above.
PDPA (English) | PDPA (BM) | Site Map </
<img src="imges/4.-Partner-7-Sunway.jpg" width="160" height="18" longdesc="imges/4.-Partner-7-Sunway.jpg">
</footer>
</html>
CSS:
@charset "UTF-8";
body{
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif/* CSS Document */
}
nav
{
width:100%
background:#202c45
padding:0 50px;
box sizing:border-box:
background-color: #006;
background-color: #252059;
}
nan h1
{
margin:0;
padding:15px 20px;
float:left;
}
nav ul
{
margin: 0;
padding: 0;
float: right;
font-size: 10px;
font-style: normal;
font-weight: lighter;
}
nav ul li
{
list-style:none;
display:inline-block;
padding:20px 30px;
transition:.5s;
}
nav ul li a
{
color:#fff;
text-decoration:none;
}
nav ul li:hover
{
background:#6CC;
}
{box-sizing: border-box}
body {
font-family: Verdana, sans-serif;
margin: 0;
position: fixed;
}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 134px;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: -7px;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@14668356 fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.sidenav {
width: 200px;
position: fixed;
z-index: auto;
top: 20px;
left: 10px;
background: #E3EEF1;
overflow-x: hidden;
padding-top: 10px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #000066;
display: block;
}
.sidenav a:hover {
color: #064579;
position:fixed
}
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
float: left;
position: fixed;
}
.sidenav a {font-size: 18px;}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.vertical-menu {
width: 200px; /* Set a width if you like */
}
.vertical-menu a {
background-color: #eee; /* Grey background color */
color: black; /* Black text color */
display: block; /* Make the links appear below each other */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove underline from links */
}
.vertical-menu a:hover {
background-color: #D6E5ED; /* Dark grey background on mouse-over */
}
.vertical-menu a.active {
background-color: #252059; /* Add a green color to the "active/current" link */
color: white;
}
.contain{
text-align: justify;
box-sizing: inherit;
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
letter-spacing: normal;
vertical-align: middle;
word-spacing: normal;
}
.contain 1{
text-align: center;
box-sizing: inherit;
position: relative;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
letter-spacing: normal;
vertical-align: middle;
word-spacing: normal;
}
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
.content <p>{
width:900px;
margin:30px auto;
text-align:justify;
font-size:20px;
line-height:30px;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: #252059;
font-size: 14px;
color: #FFF;
text-align: left;
}
AdChoices