Layout using CSS. Using multiple classes In the...
-
Upload
tyra-ewart -
Category
Documents
-
view
216 -
download
0
Transcript of Layout using CSS. Using multiple classes In the...
Layout using CSS
Using multiple classes
In the head:<style type="text/css" >
.important{font-style:italic;}
.title{color:red;}
</style>
In the body:<p class="title important">Here's a type of paragraph that is intended to be displayed in italic.</p>
The goal
Part 1: Layout
The concept
• Use <div> tags to structure the blocks of the page. (content)
• Define a style for <div> tags to achieve the desired output. (presentation)
1. Basic properties
• width (default is 100%)• padding (ex: padding: 10px;)• background (ex: background: #ffffff;)• etc
2. Floating elements
• Enables blocks to be aligned• Property:– float: left;– float: right;– float: none;
2. Floating elements, example
• Three divs in a page, with following style:
div.title{float:left;border:1px solid gray;padding:10px;}Output: layoutb.html
2. Floating elements, example
• Three divs in a page, with following style:
div.title{width:200px;float:left;border:1px solid gray;padding:10px;}Output: layoutc.html
3. Positioning
• Elements can be positioned at any coordinates in the page
• Property:– position: static;– position: relative;– position: absolute;
Positioning example• Three divs in a page, with following style:div.title{width:200px;position: absolute;top: [100,200,300]px;left: [100,200,300]px; border:1px solid gray;padding:10px;}Output: layoutd.html
1. no layout
<body><h1>Page Title</h1><p>This is the first block.</p><p>This is still the first block.</p>
<p>This is the second block.</p></body>
layout1.html
Output
2. Three sections (1)
<body><div> <h1>Page Title</h1></div>...</body>
2. Three sections (2)<body>...<div> <p>This is the first block</p> <p>This is still the first block.</p>
</div>...</body>
2. Three sections (3)
<body>...<div> <p>This is the second block.</p>
</div></body>
Output
2. Three “typed” sections (1)
<body><div class=”title”> <h1>Page Title</h1></div>...</body>
2. Three sections (2)<body>...<div class=”part1”> <p>This is the first block</p> <p>This is still the first block.</p>
</div>...</body>
2. Three sections (3)
<body>...<div class=”part2”> <p>This is the second block.</p>
</div></body>
Output
3. Writing a style (1)
<style>div.title{ border:1px solid gray; padding:10px;}...</style>
3. Writing a style (2)
<style>...div.part1{ border:1px solid gray; padding:10px;}...</style>
3. Writing a style (3)
<style>...div.part2{ border:1px solid gray; padding:10px;}</style>
layout2.html
Output
4. Two column layoutv1 - right column has variable width
4. Two column layout v1
4. Two column layout v1 (1)
<style>div.title{ border:1px solid gray; padding:10px;}...</style>
4. Two column layout v1 (2)
<style>...div.part1{float: left;width:200px;border:1px solid gray;padding:10px;}...</style>
4. Two column layout v1 (3)
<style>...div.part2{margin-left:222px;border:1px solid gray;padding:10px;}</style>
Output
• As required• Right column has variable width
• layout2col1.html
5. Two column layoutv2 – left column has variable size
5. Two column layout v2
5. Two column layout v2 (1)
<style>div.title{ border:1px solid gray; padding:10px;}...</style>
5. Two column layout v2 (2)
<style>...div.part1{margin-right:222px;border:1px solid gray;padding:10px;}...</style>
5. Two column layout v2 (3)<style>...div.part2{float:right;width:200px;border:1px solid gray;padding:10px;}</style>
Output
• As required• Left column has variable width• In Body of document, part1 and part2 have
been swapped, otherwise doesn't work• At home, try to swap them back and see
what happens ...• There's a way to make the layout work
without swapping. See three column example further on ...
• layout2col2.html
6. Three column layoutv1 – Right column has variable width
6. Three column layout v1
6. Change in the document body
<body><div class=”part1”>...</div><div class=”part3”>...</div><div class=”part2”>...</div></body>
layout3col1.html
6. Three column layout v1 (1)
<style>...div.part1{float: left;width:200px;border:1px solid gray;padding:10px;}...</style>
6. Three column layout v1 (2)
<style>...div.part3{float: left;width:200px;border:1px solid gray;padding:10px;}...</style>
6. Two column layout v1 (3)
<style>...div.part2{margin-left:444px;border:1px solid gray;padding:10px;}</style>
8. Three column layoutv3 – All three columns have variable widths
8. Three column layout v3
8. Three column layout v3 (1)
<style>...div.part1 {float: left;width:20%;border:1px solid gray;}...</style>
layout3col3.html
8. Three column layout v3 (2)
<style>...div.part3 {float:left;width:58%;border:1px solid gray;}...</style>
8. Three column layout v3 (3)
<style>...div.part2 {float:left;width:20%;background:#ffffff;border:1px solid gray;}</style>