Create a page with several divs. Each div should have multiple block level eleme
ID: 3684094 • Letter: C
Question
Create a page with several divs. Each div should have multiple block level elements (heading, paragraphs, lists, etc...). The text on the page can be dummy text (Lorem Ipsum). Add enough divs/text so that the user will need to scroll down to read all of the text. Be sure that your web page validates (XHTML Strict or HTML5) Using an external style sheet, use css to place a border and a background on the divs. Feel free to have some fun and add more css (padding, margins, font changes, etc...) At least one of the divs should be floated and one should use absolute positioning. The remaining divs can be used for the "flow". For a couple of bonus points include a fixed image that peeks out from the right side of the page (check out pages 530-234) the book is called Head First HTML and CSS 2nd edition and can be found for free online at this address http://wickedlysmart.com/hfhtmlcss/.
Please help I have struggled this entire class. I am a finance major and this is suppose to be an elective and I hope to graduate this semester but what a shame if I can't graduate because I failed an elective!! Please help,please - you can just do it on notepad an attach the files if easier or however just please no files with software or programming I cannot open. Thank you a millions!
Explanation / Answer
1. create a html file with the following content.
2. external style sheet content will be next to this with the name style1.css
<!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" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Your Company Name</title>
<link rel="stylesheet" type="text/css" media="screen" href="style1.css" />
</head>
<body>
<div id="container">
<div class="header">
<p>Header </p>
</div>
<div class="leftCol">
<!-- nested div -->
<div class="content_box">
<!-- header -->
<div class="header">
<h2> heading 1 </h2>
</div>
<!-- content -->
<div class="content">
<p> Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum </p>
</div>
</div>
<!-- nested div -->
<div class="content_box">
<!-- header -->
<div class="header">
<h2> heading 2 </h2>
</div>
<!-- content -->
<div class="content">
<p> content Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum </p>
</div>
</div>
</div>
<div class="centerCol">
<p> Center Col </br>
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
</div>
<div class="rightCol">
<ul>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
<li><a href="">Lorem Ipsum</a></li>
</ul>
</div>
<p> Right Col </p>
</div>
<div class="footer">
<p> Footer </p>
</div>
</div>
</body>
</html>
external style sheet
create with a name style1.css
#container {width:100%;}
.header {width:100%; height:100px; background:white;
font size:14px; overflow:scroll;}
.leftCol {width:20%; background:#fff; float:left; overflow:scroll;}
.content_box {width:98%; margin: 0 auto; padding:2%;overflow:scroll;}
.header {width:100%; background:pink;overflow:scroll;}
.content_box {width:100%; background:orange;overflow:scroll;}
.centerCol {width:60%; background:blue; float:left;overflow:scroll}
.rightCol {width:20%;height:10% background:white; float:right;overflow:scroll}
.footer {width:100%; clear:both; background:pink; height:29px;overflow:hidden; float:left}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.