Formatting problem template does not fill browser

Report · Jul 28, 2017

I have finished a template in dreamweaver but when I open it in my web browser, the format is wrong and the template does not fill the browser. Parts are spliced all over the place and some of the template is missing.

Report · Jul 28, 2017

Screenshots are better than posting 3.7MB JPG photos of your screen.

https://support.microsoft.com/en-au/help/13776/windows-use-snipping-tool-to-capture-screenshots

Or post the code here. This issue is code driven.

Even better if you upload the problem page to a web location and post the web address so we can take a look.

Report · Jul 29, 2017

I don't know how to upload it so I took screenshots

Report · Jul 29, 2017

When in code view,

hit CTRL + A
hit CTRL + C
click on the Reply button at the right hand bottom of this post
click inside the new dialog
hit CTRL + V
click on Add Reply

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jul 29, 2017

The original was written in HTML5 and I rewrote it in HTML4.01 and it looks a little better but it's still cut and pasted all over the browser. The logo at the top should stretch across the screen. And the bullet points aren't lined correctly.

Report · Jul 29, 2017

<!doctype html>

<head>

<title>Light Theme</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h4 class="logo">ConnectWise

Notification</h4>

</a>

<nav>

<ul>

</ul>

</nav>

<h2><strong> RE: Mapping a Network Drive</strong></h5>

</header>

<h2 class="hidden">About</h2>

<h2 class="text_column"><strong>Hello! <br>

</strong></h2>

<h3 class="text_column"> As per your inquiry to connect to map a network drive this step by step guide will enable you to do so. </h3>

<p class="text_column"> <li>1. To map a network drive, you must use the search box which can be found by clicking on either the Start button or the Windows icon on your computer.

<li> 2. Using your search box, type This PC into the box and select This PC from the list of results</li>

<li> 3. Click on the computer tab which is located next to the File tab.</li>

<li> 4. In the Network section you will find ‘map a network drive’ seen in the image below, click on it – doing so will open a window. </li> <br>

<h4 class="text_column"> photo cred. http://devnet.kentico.com/docs/7_0rc/devguide/index.html?webdav_mapping_a_network_drive.htm </h2> <br>

<li> 5. Select a letter from the Drive dropdown menu. </li>

<li>6. For the box labeled Folder, click the Browse button and select the folder that you want to map. </li>

<li>7. Click the finish button as seen in the image below. </li>

<h4 class="text_column"> photo cred. http://devnet.kentico.com/docs/7_0rc/devguide/index.html?webdav_mapping_a_network_drive.htm </h4>

<h3 <li>9. You have now successfully mapped your drive and it can be found under "This PC". From here you can connect to a shared network folder. </li> </h3>

</p>

<h3> Thank you for your inquiry I hope this email was helpful. If you have any questions, please let me know.</h3>

<h2> Sincerely,</h2>

<h2> Patricia Pothier </h2>

<h2> REFERENCES </h2>

<li>1. file:///C:/Users/Admin/Downloads/Candidate_Email_Test.html</li>

<li>2. https://www.laptopmag.com/articles/map-network-drive-windows-10</li>

<li>3. http://devnet.kentico.com/docs/7_0rc/devguide/index.html?webdav_mapping_a_network_drive.htm</li></h3>

</section>

<h1 class="parallax">ConnectWise</h2>

<h1 class="parallax_description">Make every day a little easier with ConnectWise on your business journey.</h1>

</section>

</section>

</div>

</body>

</html>

Report · Jul 29, 2017

I think the display problems are to investigate inside the file:

singlePageTemplate.css

Report · Jul 29, 2017

The original single-page-template works just fine. It does not fill the entire viewport on desktop but it works as expected & is responsive on small devices.

Compare the original code below with yours & note the differences.

<!doctype html>

<head>

<title>Light Theme</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h4 class="logo">LIGHT</h4>

</a>

<nav>

<ul>

<li><a href="#about">ABOUT</a></li>

<li> <a href="#contact">CONTACT</a></li>

</ul>

</nav>

</header>

<h2 class="hero_header">HERO <span class="light">LIGHT</span></h2>

<p class="tagline">Light is a simple one page website</p>

</section>

<h2 class="hidden">About</h2>

<p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

</section>

<h4>TITLE</h4>

<p>One line description</p>

</div>

<h4>TITLE</h4>

<p>One line description</p>

</div>

<h4>TITLE</h4>

<p>One line description</p>

</div>

<h4>TITLE</h4>

<p>One line description</p>

</div>

<h2 class="parallax">PARALLAX HERO</h2>

<p class="parallax_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>

</section>

<h3>ABOUT</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>

</article>

<h3>LOCATION</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>

</article>

</footer>

<h2 class="hidden">Footer Banner Section </h2>

<p class="hero_header">FOR THE LATEST NEWS & UPDATES</p>

<div class="button">subscribe</div>

</section>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 2017

Use the Validation tool to check your code for errors. You have quite a few. Code errors will definitely effect display in DW and browsers. Your goal should be to work with error free code at all times.

Incidentally, HTML5 is the current web standard. Why do you think you need HTML4?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Formatting problem template does not fill browser

1 Correct answer