Basically my content is in the #papercontent div. When i view it on my laptop or on my desktop, the issue appears (where the text is behind the footer, and I can't scroll down to read it all). I want that to automatically adjust no matter how much or how little text I have on a page, and for there to be a small space between the end of the paragraph and the top of the footer. One of the issues I found is that I have the height set at 1250px (which is great for my desktop, but not for my laptop...leaves too much empty space between end of paragraph and start of footer). How am I able to achieve this? Any help would be greatly appreciated!
Here's is my coding:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title> The Effects Of Electronic Reading </title>
<style type="text/css">
div
{
padding: -8px;
margin: -8px;
}
body
{
width: 100%
}
.headerbg
{
position: float;
width: 100%;
height: 300px;
}
#header
{
position: fixed;
top: 0;
width: 100%;
height: 40px;
background-color: black;
}
#container
{
height: 100%;
margin-left: 150px;
margin-right: 150px;
margin-top: 70px;
margin-bottom: 4em;
border-style:solid;
border-width:2px;
}
#title
{
height: 100px;
text-align:left;
margin-left: auto;
letter-spacing:2px;
font-family: "Impact";
font-size: 250%;
color: #ffffff;
}
#menu
{
border-bottom: solid 2px white;
width: 65%;
height: 50px;
margin-top: -75px;
margin-left: 868px;
margin-right: 1px;
float: right;
text-align:center;
letter-spacing:4px;
word-spacing:4px;
font-family: "Arial";
font-size: 150%;
color: #ffffff;
}
#mainarea
{
margin-top: 70px;
width: 100%;
}
#page2title
{
margin-right: 162px;
margin-left: 5px;
height: 50px;
text-align: middle;
font-family: "Helvetica";
font-size: 400%;
color: #ffffff;
}
#content
{
height: 1380px;
margin-left: 10px;
text-align: middle;
font-family: "Book Antiqua";
font-size: 100%;
color: #000000;
}
#oneline
{
height: 50px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-top: solid 3px white;
border-bottom: solid 3px white;
font-family: "Arial Black";
font-size: 180%;
color: #ffffff;
}
#paperpagetitle
{
margin-left: auto;
margin-right: auto;
margin-top: 25px;
height: 200px;
text-align: middle;
font-family: "Helvetica";
font-size: 300%;
color: #ffffff;
}
#papercontent
{
margin-left: auto;
margin-right: auto;
margin-top: -160px;
width:auto;
height: 1250px;
max-height: 100%;
text-align: middle;
font-family: "Helvetica";
font-size: 150%;
color: #ffffff;
border-style:solid;
border-width:2px;
}
#footer
{
position: fixed;
bottom: 0;
width: 100%;
height: 160px;
text-align: middle;
font-family: "Helvetica";
font-size: 100%;
color: #ffffff;
background-color: black;
}
#footercontent
{
padding: 5px;
margin-left: 150px;
margin-right: 150px;
margin-top: 35px;
height: 85px;
text-align: middle;
font-family: "Helvetica";
font-size: 100%;
color: #ffffff;
}
a:link { color:#ffffff; text-decoration:none; }
a:visited { color:#ffffff; text-decoration:none; }
a:hover { color:#000000; text-decoration:none; }
a:active { color:#000000; text-decoration:none; }
</style>
</head>
<body>
<body bgcolor="#3399FF">
<div id="header">
</div>
<div id="container">
<div id="title">
The Affects of
<br>
Electronic Reading
</br>
</div>
<div id="menu">
<font size="4"><b><a href="html.html">HOME</a> | <a href="page1.html">PAGE 1</a> | PAGE 2 | PAGE 3 | PAGE 4 | PAGE 5 | PAGE 6</b></font>
</div>
<div id="mainarea">
<div id="page2title">
PAGE 1
</div>
<div id="content">
<img src="websitebanner.jpg" alt="Books and Technology" style="margin-top:45px" class="headerbg" />
<br>
<br>
<div id="oneline">
<font size="4.5">On this page you will find some valuable information on the context surrounding the emergence of electronic books and readings! </font>
</div>
<div id="paperpagetitle">
Context Matters
</div>
<br>
<div id="papercontent">
<p align="justify">From the start, I knew my space was going to deal with technology and creativity. Instead of using bisociation for the space itself, I decided to use the concept for my sign design. My space consists of technology, creativity and humans. Technology and humans are two completely different entities, yet in my space they combine to create a whole (I should note that while humans and technology are compatible, bisociation guided my thinking and the aesthetics of the sign design). Therefore, I wanted my signs to display this interaction between humans and technology, and ultimately us becoming one with technology. Moreover, I decided to proceed with a formal look for the body because I want my space to be a professional setting where creatively passionate individuals can express and explore their ideas (hence the suit). Further, I wanted my font to merge with my design and not appear as separate, so I decided to create a banner/script that is fully integrated within the design. The main feature that each sign has deals with the head. This is where the convergence of technology and humans is significantly displayed. For each area/activity, I thought of one image that best represented the area, and replaced the human head in each sign with an image reflecting the activity. While the roundness of the vinyl record, movie reel and the printer remind the viewer of the roundness of a human head, they are distinct enough (and very recognizable) that when viewed, the viewer will understand what each area in the space is for. In addition, when designing the signs I knew some level of consistency had to be present so the signs, while unique, appeared related to one another. This has to do with communication, which is a vital aspect to design. With regards to my signs, I focused on design of symbolic and visual communications, and took the time to consider what I wanted to communicate and what my signs would symbolize to the viewer and in relation to my space. Tied to this is the notion of communication theory, and I considered the three communication problems presented in class and tried to remove the problems from my signs by designing an easily recognizable sign that conveys the desired meaning of my space in an effective manner. In addition, the final area that I will discuss regarding my thought/design process deals with design elements and principles of design. The three signs use fairly basic shapes (the most obvious being the circle, lines and the pen tool to create other forms that complete each sign. Overall, there is a sense of hierarchy visible to the user, as each sign is meant to be viewed from the top down, with the technology symbol being the most prominent element in each sign, with the text being the next most significant. The colours used for the three signs represent the primary colours (i.e. RGB colours) with a slight gradient to allow for more depth and form in each sign (rather than a solid colour, which would make the sign appear flat). We are constantly dealing with technology, and this has us thinking about how and why we are using various technologies on a daily basis. With the actual technology in each sign representing the human head, this adds to my previous point about thought, with the technology and our thoughts interacting with one another to produce unique creative pieces. In addition, when designing the signs I knew some level of consistency had to be present so the signs, while unique, appeared related to one another. This has to do with communication, which is a vital aspect to design. With regards to my signs, I focused on design of symbolic and visual communications, and took the time to consider what I wanted to communicate and what my signs would symbolize to the viewer and in relation to my space. This has to do with communication, which is a vital aspect to design. With regards to my signs, I focused on design of symbolic and visual communications, and took the time to consider what I wanted to communicate and what my signs would symbolize to the viewer and in relation to my space. Tied to this is the notion of communication theory, and I considered the three communication problems presented in class and tried to remove the problems from my signs by designing an easily recognizable sign that conveys the desired meaning of my space in an effective manner. In addition, when designing the signs I knew some level of consistency had to be present so the signs, while unique, appeared related to one another. This has to do with communication, which is a vital aspect to design. With regards to my signs, I focused on design of symbolic and visual communications, and took the time to consider what I wanted to communicate and what my signs would symbolize to the viewer and in relation to my space. Tied to this is the notion of communication theory, and I considered the three communication problems presented in class and tried to remove the problems from my signs by designing an easily recognizable sign that conveys the desired meaning of my space in an effective manner. In addition, the final area that I will discuss regarding my thought/design process deals with design elements and principles of design. The three signs use fairly basic shapes (the most obvious being the circle, lines and the pen tool to create other forms that complete each sign. Overall, there is a sense of hierarchy visible to the user, as each sign is meant to be viewed from the top down, with the technology symbol being the most prominent element in each sign, with the text being the next most significant. The colours used for the three signs represent the primary colours (i.e. RGB colours) with a slight gradient to allow for more depth and form in each sign (rather than a solid colour, which would make the sign appear flat). We are constantly dealing with technology, and this has us thinking about how and why we are using various technologies on a daily basis. With the actual technology in each sign representing the human head, this adds to my previous point about thought, with the technology and our thoughts interacting with one another to produce unique creative pieces. In addition, when designing the signs I knew some level of consistency had to be present so the signs, while unique, appeared related to one another. This has to do with communication, which is a vital aspect to design. With regards to my signs, I focused on design of symbolic and visual communications, and took the time to consider what I wanted to communicate and what my signs would symbolize to the viewer and in relation to my space. This has to do with communication, which is a vital aspect to design. With regards to my signs, I focused on design of symbolic and visual communications, and took the time to consider what I wanted to communicate and what my signs would symbolize to the viewer and in relation to my space. Tied to this is the notion of communication theory, and I considered the three communication problems presented in class and tried to remove the problems from my signs by designing an easily recognizable sign that conveys the desired meaning of my space in an effective manner. </p>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footercontent">
<p align="justify"> <i>For each area/activity, I thought of one image that best represented the area, and replaced the human head in each sign with an image reflecting the activity. While the roundness of the vinyl record, movie reel and the printer remind the viewer of the roundness of a human head, they are distinct enough (and very recognizable) that when viewed, the viewer will understand what each area in the space is for. In addition, when designing the signs I knew some level of consistency had to be present so the signs, while unique, appeared related to one another. </i></p>
</div>
</div>
</div>
</div>
</body>
</html>
Last edited by Jake_A_T; 10-21-2012 at 07:37 PM..
Reason: added code BB tags
In future, 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.
Before you post, read our: 
