6b. Layout using Div Tags & CSS
Assignment Instructions
Use Text editing software such as Notepad or TextEdit to create 1
HTML and 1 CSS file in a root folder:
HTML
- Create html page called "lastname-6b.html".
- On this page in the upper left place your name inside an absolute postioned div tag with an orange background (200px x 200px).
- Create a second abolute positioned div tag that contains the provided image. 275 pixels from the left.
- After that create relative positioned div tag, centered 80% width, green background, dark green border.
- Nest 2 absolute positioned div tags inside the container div tag using the properties provided in the link below.
HTML CODE - complete
CSS Stylesheet
Create new style sheet for this page and save it in the css folder in your root folder. Call it "lastname_6b.css".
- Create 5 new ID selectors in stylesheet file to be applied to div tags on HTML page as seen in provided link below.
CSS CODE - complete
Details for code are privided in the green links as well as on the video demo.
|
It should look like this.

|