Skip to main content
L
lsdebdj
Participant
March 30, 2020
Answered

Scrolling Beyond Content in Dream Weaver

  • March 30, 2020
  • 2 replies
  • 884 views

Is there a way to stop the scrolling on my pages beyond the content.  I have a template page and 6 other pages and you can continue to scroll down past the content on each page.

This topic has been closed for replies.
Correct answer BenPleysier

If you have a look at the page in Code view, you will see, on line #422

<th height="2531" colspan="2" scope="row"><p>&nbsp;</p>

This is followed by many rows containing 

<p>&nbsp;</p>

 I suggest that you delete lines #421 through to and including #566

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 30, 2020

1. Validate code and fix reported errors.

2. Remove explicit height values from your CSS code.

3. Or maybe you don't have enough content to fill a page. Try this.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alt-Web Demo :: Flexbox filled viewport </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.4.1 CSS-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/**some custom styles**/
body {
min-height: 100vh;
padding-top: 25vh;
background: url( https://placeimg.com/1000/900/nature?t=1531616140833) no-repeat center center fixed;
background-size: cover;
}
.flex-grow { flex: 1; }
main {text-shadow: 2px 2px 1px #000 }
</style>
</head>
<body class="d-flex flex-column">
<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-info justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded"  src="https://dummyimage.com/300x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="#">Menu2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu4</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu5</a></li>
</ul>
</div>
</nav>

<!--BEGIN MAIN CONTENT-->
<main class="container flex-grow">
<div class="row text-warning">
<div class="col">
<h1 class="p-1">Hello World!</h1>
<p class="p-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos, distinctio.</p>
</div>
</div>
</main>

<!--BEGIN FOOTER-->
<footer class="bg-info text-white mt-4">
<div class="container-fluid py-3">
<div class="row">
<div class="col-md-4 text-center">
<h5>Footer Column 1</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 2</h5>
</div>
<div class="col-md-4 text-center">
<h5>Footer Column 3</h5>
</div>
</div>
<div class="row">
<div class="col-md-6"> <small>Footer remains at page bottom on short pages.</small></div>
<div class="col-md-3"></div>
<div class="col-md-3 text-right small align-self-end"><small>©2020 XYZ Company</small></div>
</div>
</div>
</footer>
<!--First jQuery, then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Popper JS--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<!--latest Bootstrap 4.4.1 JS--> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
</body>
</html>

 

 

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
March 30, 2020

Short answer: Yes, when your code validates.

 

Long answer: It is very hard to help you when we are not privy to what is going on. please give us a link to your site.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
L
lsdebdjAuthor
Participant
March 31, 2020

Sorry I didn't include the link first time.  It is www.lightningsound.org.  Hope you can help

 

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
March 31, 2020

If you have a look at the page in Code view, you will see, on line #422

<th height="2531" colspan="2" scope="row"><p>&nbsp;</p>

This is followed by many rows containing 

<p>&nbsp;</p>

 I suggest that you delete lines #421 through to and including #566

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices