Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

using xhtml transitional 1.0 A div that is centered and visible (acts as a buffe

ID: 3587605 • Letter: U

Question

using xhtml transitional 1.0

A div that is centered and visible (acts as a buffer) and contains within it three divs that are centered and horizontally next to each other (for me, it is the pink, green, and yellow divs).

Tip: to center the three divs, put them in another centered div (below the red div is centered and there is another div centered in that which you cannot see, but it is just acting as a container for the pink, green, and yellow divs).

Link to all of your other pages. These links should have pseudo classes assigned so that the color of the link varies depending on if the user is hovering, it is active, visited, or if it is just a link. In addition, place the “title” attribute in the anchor tag and see what happens (Google title attribute HTML if you are having trouble. The first result should be a w3 schools site, which we have all seen before. This will have a good answer). Assign the title attribute a value.

An email link

Note: the email link is slightly different then a normal hyperlink, you should Google this to find out.

All of the above criteria should have a comment tag underneath them in the HTML code. In addition, place some comments in the CSS so that anyone can easily tell which class is associated with each div (i.e. for my heading div I might put a comment under the class for it that reads “heading class”)

A nice color scheme including a background color. Since we do have a background color, to make sure we can see it at all times, do not make any div span the entire browser window.

Resume of n,..e C:i..is Telmplate

Explanation / Answer

1. Resume_internal (1st Page):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resume of Prof. Gervais</title>
<style type="text/css">
body {
text-align: center;
width: 80%;
margin-left: 125px;
font-family:Sans-serif;
line-height: 1.5em;
}

#container {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 14px;
}
#container1 {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 35px;
}
  
#container .column {
position: relative;
float: left;
}
  
#center {
padding: 10px 20px;
width: 100%;
}
  
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
  
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
  
#footer {
clear: both;
}
  
#container {
overflow: hidden;
}
#container1 {
overflow: hidden;
}

#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
  
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
  
p {
color: #555;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
  
nav ul a {
color: black;
text-decoration: none;
font-size: small;
}

#header{
font-size: large;
padding: 1.3em;
background: #BCCE98;
}
#header1{
font-size: large;
padding: 0.3em;
background: #2da9d2;
}

#left {
background: #fff;
}
  
#right {
background: #5396ac;
}

#center {
background: #5396ac;
}

#container .column {
padding-top: 1em;
}
  
</style>
  
</head>

<body>

<div id="header"><p>Resume of Prof. Gervais</p>
<div id="header1"><p>Work Experience</p>
<div id="container">

<div id="center" class="column">
<article>
  
<h5>Pizza Shop</h5>
<p><a href="#">Pizza Shop Site</a></p>
  
</article>   
</div>

<nav id="left" class="column">
<h5>Other Pages</h5>
<ul>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Educational Experience</a></li>
<li><a href="#">Related Awards and Skills</a></li>
</ul>
</nav>

<div id="right" class="column">
<h5>Random NYS Agency</h5>
<p><a href="#">Agency Site</a></p>
</div>

</div>
<div ><a href="#">Email Me!</a></div>
</div>
</div>
</body>

</html>

2. Resume_Related_Awards(2nd Page)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resume of Prof. Gervais</title>
<style type="text/css">
body {
text-align: center;
width: 80%;
margin-left: 125px;
font-family:Sans-serif;
line-height: 1.5em;
}

#container {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 14px;
}
#container1 {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 35px;
}
  
#container .column {
position: relative;
float: left;
}
  
#center {
padding: 10px 20px;
width: 100%;
}
  
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
  
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
  
#footer {
clear: both;
}
  
#container {
overflow: hidden;
}
#container1 {
overflow: hidden;
}

#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
  
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
  
p {
color: #555;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
  
nav ul a {
color: black;
text-decoration: none;
font-size: small;
}

#header{
font-size: large;
padding: 1.3em;
background: #BCCE98;
}
#header1{
font-size: large;
padding: 0.3em;
background: #2da9d2;
}

#left {
background: #fff;
}
  
#right {
background: #5396ac;
}

#center {
background: #5396ac;
}

#container .column {
padding-top: 1em;
}
  
</style>
  
</head>

<body>

<div id="header"><p>Resume of Prof. Gervais</p>
<div id="header1"><p>Work Experience</p>
<div id="container">

<div id="center" class="column">
<article>
  
<h5>Awards</h5>
<p>Award Scholarship 'X'</p>
<p>Employee of the month</p>
  
</article>   
</div>

<nav id="left" class="column">
<h5>Other Pages</h5>
<ul>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Educational Experience</a></li>
<li><a href="#">Related Awards and Skills</a></li>
</ul>
</nav>

<div id="right" class="column">
<h5>Skills</h5>
<p>Web Design</p>
<p>Photoshop</p>
<p>Team Player</p>
<p>Programming</p>
</div>

</div>
<div ><a href="#">Email Me!</a></div>
</div>
</div>
</body>

</html>

3. Resume_Education(3rd Page)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Resume of Prof. Gervais</title>
<style type="text/css">
body {
text-align: center;
width: 80%;
margin-left: 125px;
font-family:Sans-serif;
line-height: 1.5em;
}

#container {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 14px;
}
#container1 {
padding-left: 237px;
padding-right: 229px;
margin-bottom: 35px;
}
  
#container .column {
position: relative;
float: left;
}
  
#center {
padding: 10px 20px;
width: 100%;
}
  
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
  
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
  
#footer {
clear: both;
}
  
#container {
overflow: hidden;
}
#container1 {
overflow: hidden;
}

#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
  
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
  
p {
color: #555;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
  
nav ul a {
color: black;
text-decoration: none;
font-size: small;
}

#header{
font-size: large;
padding: 1.3em;
background: #BCCE98;
}
#header1{
font-size: large;
padding: 0.3em;
background: #2da9d2;
}

#left {
background: #fff;
}
  
#right {
background: #5396ac;
}

#center {
background: #5396ac;
}

#container .column {
padding-top: 1em;
}
  
</style>
  
</head>

<body>

<div id="header"><p>Resume of Prof. Gervais</p>
<div id="header1"><p>Work Experience</p>
<div id="container">

<div id="center" class="column">
<article>
  
<h5>High School Diploma</h5>
<p><a href="#">School Name</a></p>
  
</article>   
</div>

<nav id="left" class="column">
<h5>Other Pages</h5>
<ul>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Educational Experience</a></li>
<li><a href="#">Related Awards and Skills</a></li>
</ul>
</nav>

<div id="right" class="column">
<h5>BS Computer Science</h5>
<p><a href="#">SUNY Albaay</a></p>
</div>

</div>
<div ><a href="#">Email Me!</a></div>
</div>
</div>
</body>

</html>