{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

Assn10 - main content 6 Move the picture to the position...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
Assignment #10: Fixed, relative and absolute position Learning Objective: Know how to use relative and absolute positioning and adding email links. After viewing the Dream Weaver videos add a banner to the header and a contact button you’re your email address. See my complete assignment. This includes the following tasks: 1) Create a banner in any software (MS Word, MS Office Picture Manager, etc.) by resizing a picture to 800x235 pixels. 2) Insert the banner in your assignment #8 at the top as shown in my example and save it as assignment #10. 3) Resize the #wrapper to 800. 4) Resize the main content to width 530 and the header to height 235 (the height of your banner). 5) Add the contact button which I posted on Moodle. Place the curser right after <div id="header"> and insert the picture. This picture is now positioned in the left upper corner of our
Background image of page 1
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: main content. 6) Move the picture to the position shown in my example. To do this first create a compound selector: #wrapper #contactbutton . Change the positioning in your #wrapper #contactbutton to "absolute" and left placement to 800px as shown in the video. 7) Click on the contact button and go to "Insert--Layout Objects---Div Tag and choose the contact button in the ID Pull down menu. Your contact button will move to the right. 8) Apply relative positioning to the #header and change the #contactbutton to 650 rather than 800. 9) Insert your email address into the contact button as shown in the movie. 10) Link the assignment #10 to your index page. Set Target equal to _blank so that a new window opens....
View Full Document

{[ snackBarMessage ]}