Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1


Ratings: (0)|Views: 29|Likes:
Published by api-25886274

More info:

Published by: api-25886274 on Mar 29, 2010
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





ComputerApplications I
DHA 2334
CSS Part 2
Using CSS to define the layout of a basic html page
First, the main container...
1. Create and define an id named “wrapper” in your existing style1.css file1. Create and define an id named “leftCol” in style1.css2. Put the image on your page into this “leftCol” container2. Put all the content in your html page into this “wrapper” container
Now, the left column
View the code of your html page.
the main container immediately
the opening body tag (<body>) by typing
<div id=”wrapper”>Close
the main container immediately
the closing body tag (</body>) by typing
View the code of your html page.
the left container immediately
the image tag (<img...) by typing
<div id=”leftCol”>Close
the left container immediately
the image tag ( .../>) by typing
This code will create a containerthat is 1024 pixels wide and centeredon the page. The text within thiswill all be left aligned. Percent valuescan also be used for a flexible layout.We will edit this code later toproperly fit your image. You canalso set this to be a percentage valuefor a more flexible column presentation.
You’ve already created a CSS file to control the appearance of the elements on your html page.Now we are going to use CSS to dynamically position where these elements appear on the page.We will create a layout that is two columns (left and right) contained within a main ‘wrapper.’
Before we begin
let’s set our site to immediately upload any changes we make. This way we canview our site live (i.e., online) and see what happens when we update and change the CSS.Site > Manage Sites > Edit > (Advanced tab) > Remote Info >Check the “Automatically upload files to server on save” option
Now, let’s begin!

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->