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

null

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

More info:

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

Availability:

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

03/29/2010

pdf

text

original

 
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.
Start
the main container immediately
after
the opening body tag (<body>) by typing
<div id=”wrapper”>Close
the main container immediately
before
the closing body tag (</body>) by typing
</div>
View the code of your html page.
Start
the left container immediately
before
the image tag (<img...) by typing
<div id=”leftCol”>Close
the left container immediately
after
the image tag ( .../>) by typing
</div>
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

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