The Position of a Box
The styles we have just reviewed for the location of an object only
indicate how the browser should interpret them, not how a box should be
positioned. When specifying the location of a box, you may want the distance
(from left or top) to be based on the direct parent of the box or on the root,
the body element that is the ultimate parent of all elements.
To let you control the positioning relationship between a
box or an element and its webpage, CSS provides a style named position.
Its values can be:
- static: This is the default value. If you set it, the browser will
not care about the values set for the location of the box
- relative: The browser will position the boxes and elements in the
order they are added to the HTML code of the webpage. Here are examples:
<html>
<head>
<title>Social Science Studies</title>
<style>
#whole {
background-color: AntiqueWhite; }
#head-portion {
position: relative;
top: 0;
left: 0;
right: 0;
height: 2.60em;
width: auto;
text-align: center;
background-color: Brown; }
.main-title {
text-align: center;
font-weight: bold;
color: Yellow;
font-size: 0.86cm;
text-shadow: 0.10cm 0.10cm 0.02cm Black;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
#central {
position: relative;
top: 0.05em;
left: 0;
height: auto;
width: auto;
right: 0;
bottom: 5.5em; }
#bottom-part {
position: relative;
top: auto;
left: 0;
width: auto;
right: 0;
height: 4.5em;
bottom: 0;
background-color: Maroon; }
.introduction {
text-align: justify;
word-break: keep-all;
color: Black;
font-family: Georgia, Garamond, Times New Roman, serif; }
.sub-title {
text-align: left;
color: Chocolate;
font-size: 0.64cm;
font-family: Georgia, Times New Roman, serif; }
.references {
color: #FFF;
font-weight: bold;
text-align: center; }
</style>
</head>
<body id="whole">
<header id="head-portion">
<p class="main-title">Social Science Studies</p>
</header>
<div id="central">
<p class="sub-title">Introduction</p>
<p class="introduction">Social sciences cover a wide range of studies that
address all types of topics about human beings, their behaviors, their
history, their societies, and their environments. Regular social science
areas include sociology, psychology, philosoply, linguistics, communication,
history, geography, demography, ethnicity, anthropology, archaeology,
political science, law, education, criminology, and economy, just to name
a few. Some social science topics are grouped in categories, such as
individual or crowd, where studies tend to address the same categorical
isssues. Still, social sciences are highly interchangeable. Sometimes,
differences are a matter of interpretations based on the particular area(s)
being considered.</p>
</div>
<footer id="bottom-part">
<p class="references">Schools | Majors | Minors</p>
<p class="references">Copyright © 2015</p>
</footer>
</body>
</html>
This would produce:
- absolute: Regardless of the order in which the elements or boxes
are created in the code of the webpage, the absolute value positions
the box or element based on the area made available by the parent element.
Remember that if an element is directly nested in the body element, the
body is the parent. In an element A is nested in another element or box B,
the element or box B is the parent of element A. So the nested element can
only positioned inside the nesting element. Here are examples:
<html>
<head>
<title>Social Science: Religious Studies</title>
<style>
#head-portion {
position: absolute;
top: 0;
left: 0;
right: auto;
height: 4.60em;
width: 100%;
text-align: center;
background-color: LightBlue; }
#central {
height: auto;
width: auto;
bottom: 5.5em;
top: 4.65em;
left: 8.90em;
right: 1.20em;
position: absolute; }
#left-side {
left: 0;
top: 4.65em;
width: 8.50em;
height: auto;
bottom: 5.5em;
position: absolute;
background-color: #AF320F; }
#main-title {
line-height: 10pt;
font-weight: bold;
color: Navy;
font-size: 0.86cm;
text-align: center;
text-shadow: 0.06cm 0.06cm 0.6cm Blue;
font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }
#religions {
top: 0.00em;
width: 128px;
left: -2.20em;
color: Yellow;
position: absolute;
list-style-type: none;
font-family: Comic Sans MS, Helvetica, Arial, sans-serif; }
#relig-title {
top: -1.00em;
width: 135px;
height: 1.80em;
left: 2.25em;
background-color: #FF3300;
position: absolute;
}
#studies {
position: absolute;
left: 0;
top: 4.65em;
width: 8.50em;
height: auto;
bottom: 5.5em;
background-color: #AF320F; }
#topics {
left: 0;
position: absolute;
left: 1em;
color: Yellow;
font-size: 10pt;
list-style-type: none; }
#bottom-part {
position: absolute;
top: auto;
left: 0;
width: 100%;
right: 0;
height: 5.5em;
bottom: 0;
background-color: Black; }
.contribution {
color: Black;
text-align: justify;
word-break: keep-all;
font-family: Georgia, Garamond, Times New Roman, serif; }
.references {
color: #FFF;
font-weight: bold;
text-align: center; }
a.religion:link, a.religion:active,
a.religion:visited, a.religion:hover,
a.reference:link, a.reference:active,
a.reference:visited, a.reference:hover
{
font-weight: 500;
font-size: 10pt;
text-decoration: none;
}
a.religion:link, a.reference:link { color: #FFFF00 }
a.religion:active, a.reference:active { color: #66CCFF }
a.religion:visited, a.reference:visited { color: #FF9933 }
a.religion:hover
{
color: #FFFFFF;
background-color: #FF9900;
}
a.reference:hover
{
color: #99FFCC;
background-color: #999999;
outline: White solid 1pt;
}
</style>
</head>
<body>
<header id="head-portion">
<p id="main-title">Social Science: Religious Studies</p>
</header>
<div id="central">
<p class="contribution">A religion is a system in which an organization, as a
group of people, has a set of beliefs with the goal to worship. The beliefs
are mutual so that all or most people in the group share the same concept on
the object of worship, the concept of worship (or how the worship should be
conducted), and the end goal of the religion. A religion is created. As a
result, the beliefs, the worship, and the end goal of the religion must be
defined by the person who, and the entity that, creates or initiates the
religion.</p>
<p class="contribution">A religion is created, either by a person or a group
of people. As a religion becomes known, new people join it. Both existing and
new people bring new ideas. Different views are added or removed and its
directions may be adjusted or changed. If new and old tendencies become
difficult or impossible to reconcile or to consolidate, new branches may be
created. As a result, there are now many religions.</p>
</div>
<div id="studies">
<ul id="religions">
<li id="relig-title">Religions</li>
<li> </li>
<li><a class="religion" href="judaism.htm">Judaism</a></li>
<li><a class="religion" href="christianity.htm">Christianity</a></li>
<li><a class="religion" href="catholicism.htm">Catholicism</a></li>
<li><a class="religion" href="islam.htm">Islam</a></li>
<li><a class="religion" href="buddhism.htm">Buddhism</a></li>
<li><a class="religion" href="mormonism.htm">Mormonism</a></li>
<li><a class="religion" href="hinduism.htm">Hinduism</a></li>
<li><a class="religion" href="confucianism.htm">Confucianism</a></li>
<li><a class="religion" href="bahai.htm.htm">Bahá'í
Faith</a></li>
<li><a class="religion" href="atheism.htm.htm">Atheism</a></li>
</ul>
</div>
<footer id="bottom-part">
<p class="references">
<a href="denominations.htm" class="reference">Christian Denominations</a> |
<a href="eastern.htm" class="reference">Eastern Christianity</a> |
<a href="gnosticism.htm" class="reference">Gnosticism</a></p>
<p class="references">Copyright © 2015</p>
</footer>
</body>
</html>
This would produce:
- fixed: This value is mostly made for graphic intensive or smart
devices so that the box or element would remain in its fixed position even if
the user pans the page
|
|