I’ve got an assignment for an introductory web design course, and so far it’s been real easy, but when the professor introduced div and span tags, I really lost my momentum and have fallen into a slump. I’ve registered for the course late, and as luck would have it, an assignment on div and span is due tomorrow.
I have been using w3schools extensively thus far, as well as StackOverflow itself, but I can’t really find a specific answer to my question, or the answers I find are well beyond my ‘skill level’.
I want to emulate a website provided to me; no source code is provided, just an image of what the final product should look like, as well as resources like images, text sizes, etc. Here is the link to the assignment itself.
http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf
I’ve gone through the first few bits myself, but the meatier portion of the assignment I’m lost on. I need to make one large div element (I’m assuming), and inside that I need more div elements. I’ve got to this area:
“Below the main heading is the page’s overall content area, with an overall 32% rating for the film, several critics’ reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)”
The image in the link is how it should look, and so far I have everything above the rounded border section with all of the meatier content. Here is what I have thus far:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="http://www.cosc.brocku.ca/Offerings/2P89/Images/rotten.gif"
type="image/x-icon">
<title>Abraham Lincoln: Vampire Hunter - Rancid Tomatoes</title>
<link href="abe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="banner" style="background: url
(http://www.cosc.brocku.ca/Offerings/2P89/Images/bannerbg.png) repeat-x;width:100%;height:50px;">
<img src="http://www.cosc.brocku.ca/Offerings/2P89/Images/banner.png" alt="">
</div>
<h1>Abraham Lincoln: Vampire Hunter (2012)</h1>
<div class="reviewshell">
<div class="reviewleft">hi</div>
</div>
</body>
</html>
…and style sheet…
.banner {
margin:0px;
text-align:center;
}
.reviewshell {
margin-left:auto;
margin-right:auto;
border:4px solid;
border-radius:20px;
border-color:grey;
width: 800px;
}
.reviewleft {
margin:0px;
text-align:left;
}
.reviewright {
}
.reviewbottom {
}
body {
background-image:url("http://www.cosc.brocku.ca/Offerings/2P89/Images/background.png");
background-attachment:fixed;
font-size:8pt;
font-family:Verdana, Tahoma, sans-serif;
margin:0px;
}
h1 {
text-align:center;
font-size:24pt;
font-family:Tahoma, Verdana, sans-serif;
font-weight:bold;
text-shadow:#999999 3px 3px;
}
blockquote {
}
a:link {
}
a:visited {
}
ul.a {
}
I apologize in advance if homework help is frowned upon here; I’ve been at this for about 9 hours reading up on HTML and I can’t find out how to continue. There is no prof or TA available on Sundays unfortunately.
edit; I should probably mention that I don’t need a specific answer, just a link to a page or guide that can help me figure it out. w3schools is indepth, but I still can’t get it.
This is a pretty good Smashing Magazine tutorial: http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
I could write up a guide for you if no one supplies a better answer…
HTH.