- Create a new folder in the HTML Files folder called Advanced Layout.
- Create a new page with all necessary HTML tags.
- Title the page Advanced Layout.
- Save the page in the Advanced Layout folder
- with the file name advlayout.html.
- Using
- tags, insert two areas in the page: topleft and topright.
- Use the tag to link advlayout.html to layout.css.
- Create a new style sheet called layout.css, and save it in the Advanced Layout folder.
- In layout.css, set up formatting for the topleft and topright areas:
#topleft {
}
#topright {
}
- Give both the topleft and topright areas a dark blue background color (#000099).
- In layout.css, make the topleft area 100 pixels wide and 100 pixels tall.
- TIP: Use the height property.
- Give the topleft area the float:left property.
- Give the topright area a left margin of 100 pixels.
- Make it 100 pixels tall.
- Create a folder in the Advanced Layout folder called graphics.
- Go to:
- www.inpics.net/files/html/advlayout/pics
- Right-click techtool.gif, and save it in the graphics folder.
- In advlayout.html, insert techtool.gif in the topleft area:
- Go to:
- www.inpics.net/files/html/advlayout/pics
- and save bkgd.gif in the graphics folder.
- In layout.css, make it the background of the topright area:
- #topright {
- background: #000099;
- margin: 0 0 0 100px;
- height: 100px;
- background-image: url(graphics/bkgd.gif);
- }
- Save both layout.css and advlayout.html.
- View advlayout.html in the browser.
- It should look like this:
- In layout.css, give the topleft and topright areas padding of 10px.
- Change the width and height of the topleft area to 120px.
- Change the height of the topright area to 120px.
- Save layout.css.
- View advlayout.html in the browser.
- It should look like this:
