Develop Reference

PDF Type view using html and css. Page overflow problem

I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here

You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}

What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page

copyrights text over an image is getting messed up in html

I have an HTML where I need to add copyrights text at the bottom of the page but I need to add that text on another image. Here is my div which I added:
<div class="copy-rights">
<img src="https://s30.postimg.org/ws4b9bff5/copyrights.png" />
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
I have created this jsfiddle in which I have added copy-rights div at the bottom of the page but somehow in my jsfiddle I see lot of white spaces between my copyrights div and the bottom page so I am not able to put an image first and then copyrights text on top of it properly.
My copy-rights div is getting messed up and that copyrights image is also messed up in my jsfiddle.
Technically it should be like this: https://s12.postimg.org/s70kwke59/copyright-image.png
What wrong I have done?

There seemed to be many mistakes in your code that were throwing out the layout.
When i amended the errors, the background was gray in parts and black in others. If this was not what you are aiming for, it should be easy enough to change now.
I didn't fix everything, but i did a few things. Your footer issue fixed anyway. There seems to be a problem in the left sidebar that was happened while other things fell into place. I'm sure you can fix it with a bit of margin-top or something, I didn't look at it closely.
Do review the changes in the css. You've said you're a beginner; it's a good way to learn.
Fiddle
Happy coding!
EDIT: Yaha! (fix i took out top/left/bottom etc positions and some padding) still might need a tweak til you're happy with it.. Preview

Paudel is right you can just set background: grey; and it will look the same.
Otherwise you will need to set wrapped div to be relative and the text element absolute. Something like:
.content {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Regards

Make the picture a background-image
HTML:
<div class="copy-rights">
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
CSS:
.copy-rights {
background-image: url('https://s30.postimg.org/ws4b9bff5/copyrights.png');
}
Update:
Since the image is just a grey area, background color can be applied as well:
.copy-rights {
background-color: grey;
}

Position image above or below text relatively.

This is a pretty absurd question but has been bugging me for a while now. I am designing this website and I am just finishing off on the responsive/mobile view. Currently it looks okay but that's because I delete the images with display : none: when the view port becomes too small for the image to look good. (Can bee seen at drleilamasson.com/css/responsive.css)
The images I want to change are the book (under the book section) and the parrot (under the social section) If I were to not delete them they would just go over the text / embedded post I have and block the content. What I want to happen is that the book image goes above the text centered perfectly. I have fiddled around with the styles of these images but never been able to figure it out.
I hope you guys can figure it out! Thanks :)

You've already set a flexbox parent on the <section id="about">, so we can play with the direction and ordering of the children.
#media (max-width: 1065px) {
#about {
flex-direction: column; /* stack the children */
}
.leila-book-img {
...
display: none; <-- remove
margin: 0 auto;
order: 2; /* put the image container after the text */
}
.about-content {
padding-bottom: 1em;
}
}

using jQuery slideUp causes "jumpy" interface

On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)

this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.

You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">

I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}

As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}

Javascript show/hide links not working

Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.
I'm using this to show/hide the div's on click
function ikesClick() {
filler.style.display='none';
FrontDeskDesc.style.display='none';
LoungeDesc.style.display='none';
StudyDesc.style.display='none';
IkesDesc.style.display='inline';
};
If you view the page source, you can see the entirety of the Javascript there.
My question is, what do I do to make the link clickable?
I'm almost certain this is happening because of the way it's displaying none/inline.
You can observe the HTML here:
<section id="roomInfo">
<section id="filler" style="display:inline">
Hover over or select a colored area for details about individual rooms and locations in the library.
</section>
<section id="IkesDesc" style="display:none;">
<h1>Ike's - Late Night Diner</h1>
<p>
In the hub of President’s Park, Ike’s provides a late night dining option. Visit dining.gmu.edu for hours of operation.
</p>
<img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
</section>
<section id = "FrontDeskDesc" style="display:none;">
Get your temporary keys and stuff here!
</section>
<section id ="LoungeDesc" style="display:none;">
loungin'
</section>
<section id ="StudyDesc" style="display:none;">
Studying for finals yo
</section>
</section><!--end room info-->
The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.

First of all, your link is incomplete:
dining.gmu.edu
So this should be something like:
dining.gmu.edu
Also, since you have jQuery already running on the page, you might want to simplify your code to:
$("#Ikes").click(function() {
$(".objects").hide();
$(this).show();
});
Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.
Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.
UPDATE
What seems to be causing the problem is your layout:
you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.
For example:
#svg {
display: block;
left: 0;
margin: -55px 0 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#roomInfo {
background-color: #CCCCCC;
margin-top: 75%;
outline: 1px solid gray;
padding: 5px;
width: 100%;
}
Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.
I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.
I helped you a bit in this jsFiddle, but I'll leave the rest for you.
Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:
$(document).ready(function() {
$("#area1").click(function() {
$(".extra").hide();
$("#IkesDesc").show();
});
$("#area2").click(function() {
$(".extra").hide();
$("#FrontDeskDesc").show();
});
$("#area3").click(function() {
$(".extra").hide();
$("#LoungeDesc").show();
});
$("#area4").click(function() {
$(".extra").hide();
$("#StudyDesc").show();
});
});
I made the example working so you can copy/paste as you please.
Also, I added the following:
var position = $("#IkesDesc").position();
scroll(0,position.top);
This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).
You can check it as a working example HERE.
I hope that helped you out!
Good luck!