4 - Layout
advertisement
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 layout
v1 - 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 layout
v2 – 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 layout
v1 – 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 layout
v3 – 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>
