Using CSS style rules to position elements on a page.
Putting some positioned content into your Index page.
Use the same stylesheet that you have been using for your other assignments.
You will put some additional content (and tags) into your Index page. Here are the details:
Put a fourth <div> tag into your
Index page, underneath the three <div> tags that you added in the second assignment.
Make sure the new <div> tag has a unique id attribute in it.
Put two paragraphs (<p> </p> tags) into the new <div> tag,
containing any text that you want; as long as the text is not illegal, offensive,
or defamatory.
Use the id attribute's value from the fourth <div> tag to add a new id selector to your stylesheet.
Put these
CSS properties in the new id selector:
position: relative;
margin-bottom: 6em;
(You might need to make the margin-bottom larger, e.g., up to 10em. It depends on the content of your two new paragraphs.)
Add an "id" attribute to each of the two new paragraphs.
Use matching "id" selectors in your stylesheet to position your paragraphs
with these properties:
width: 40%;
position: absolute;
left: 5%; /*(for the first new paragraph)*/
left: 50%; /*(for the second new paragraph)*/
top: 0;
border: 1px solid gray;
padding: 1em;
If you position your paragraphs properly, they should look like a two-column layout like you might
see in a magazine.
Validate your index.html page with the W3C's
HTML Validator page.
I will also be validating your page, so this validation will be part of your
grade.
Validate your stylesheet page with the W3C's
CSS Validator page.
I will also be validating your page, so this validation will be part of your
grade.
Upload your pages to your Freehostia site.
You can test your pages on the server by selecting the
"Student Sites" link on the class site and then
clicking your student number in the bulleted list. You will probably
need to refresh/reload the page in your browser in order to see
your changes.