is1825 developing multimedia applications for business lecture 4: css positioning and flow rob...
Post on 29-Dec-2015
214 Views
Preview:
TRANSCRIPT
IS1825Developing Multimedia Applications for BusinessLecture 4: CSS Positioning and FlowRob Gleasure
R.Gleasure@ucc.iehttp://corvus2.ucc.ie/phd/rgleasure/index.html
IS1825
Today’s lecture CSS flow CSS positioning CSS backgrounds CSS layers
The doctype declaration
Generally when we are creating HTML pages, we will start with a <DOCTYPE> tag that lets a browser know the version of HTML that we are running
We haven't worried about this until now, but we need to add this in to help our CSS render consistently across browsers
We are using HTML 4.01 transitional, which can be represented by the following <DOCTYPE> tage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
A starting point for your HTML files For all of your HTML pages, you can start with the following basic
template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
<title></title></head> <body> </body>
</html>
This line lets a browser know the version of HTML that we are running (HTML 4.01 transitional)
This line specifies the character set used for the page
CSS Flow
We noted previously that <div> and <span> behave differently in one key way
Placing an item in a <div> caused the item to be placed on a new lineIt did this because <div> has a flow type of ‘block’, whereas <span> has a flow type of ‘inline’
We’ve come across this before, e.g. <h1> and <p> are displayed by default according to a ‘block’ flow, <a> and <img> are displayed by default according to an ‘inline’ flow
CSS Block Flow
Block FlowBlock elements by default are as wide as the container surrounding them and fall on a new line
Try out this code:<html>
<head>
<style type="text/css">
div {height: 200px; border-style: solid; padding:10px; }
div#container { width: 550px; height:700px; }
div.small { width: 250px; background-color: red;}
div#big { background-color: green;}
</style>
</head>
<body>
<div id="container">
<div id="big"></div>
<div class="small"></div>
<div class="small" style="position:relative; left:100px;"></div>
</div>
</body>
</html>
CSS Inline Flow
Inline FlowInline elements stack left until a new line is necessary to fit content. They also technically ignore width specifications*
Try out this code:<html>
<head>
<style type="text/css">
div {height: 200px; border-style: solid; padding:10px; }
div#container { width: 550px; height:700px; }
div.small { width: 250px; background-color: red; display: inline;}
div#big { background-color: green; display: inline;}
</style>
</head>
<body>
<div id="container">
<div id="big"></div>
<div class="small"></div>
<div class="small" style="position:relative; left:100px;"></div>
</div>
</body>
</html>
CSS Floats
Items can also be set to rest to the leftmost or rightmost available position using the float property, Try out this code:
<html>
<head>
<style>
img#left { float:left; }
img#right { float:right; }
div#container { border-style:solid; width: 600px; height:400px; }
</style>
</head>
<body>
<h1> Look what happens to the positioning of the images</h1>
<div id="container">
<img id= "left" src="http://bis.ucc.ie/Images/UCC%20logo.png" width="95" height="84" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at rhoncus magna.
Sed leo nunc, viverra eget tincidunt ut, venenatis in nibh
<img id="right" src="http://bis.ucc.ie/images/PanelNewsAndEvents.png" width="95" height="84" />
Vivamus leo nunc, malesuada fermentum consequat id, sagittis vel urna. Mauris nunc
justo, convallis lacinia lacinia nec, tincidunt pellentesque felis.
</div>
</body>
</html>
Three Kinds of Positioning
Fixed positioning, i.e. Element is positioned relative to the browser window and will not move even if the window is scrolled, e.g.
#fixedEg { position: fixed; top: 100px; left: 100px; }
Absolute positioning, i.e. Element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>, e.g.
#absEg { position: absolute; top: 100px; left: 100px; }
Relative positioning, i.e. Element is positioned relative to its normal default position, e.g.
#relEg { position: relative; top: 100px; left: 100px; }
Relative Positioning of Divs
Look at what happens when we try out the following code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Relative positioning</title>
<style type="text/css">
<!--
#first {
border:2px solid rgb(00,250,00);
position: relative;
top: 0px; left: 0px;
width: 800px; height: 800px;
padding:0px; margin:0px; }
#second {
border:2px solid rgb(250,00,00);
position: relative;
top: 200px; left: 200px;
width: 400px; height: 400px;
padding:0px; margin:0px; }
Relative Positioning of Divs (cont)
#third {
border:2px solid rgb(00,00,250);
position: relative;
top: 100px; left: 100px;
width: 200px; height: 200px;
padding:0px; margin:0px; }
-->
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
</body>
</html>
Absolute Positioning of Divs
Look at what happens when we try out the following code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Absolute positioning</title>
<style type="text/css">
<!--
#first {
border:2px solid rgb(00,250,00);
position: absolute;
top: 0px; left: 0px;
width: 800px; height: 800px;
padding:0px; margin:0px; }
#second {
border:2px solid rgb(250,00,00);
position: absolute;
top: 200px; left: 200px;
width: 400px; height: 400px;
padding:0px; margin:0px; }
Absolute Positioning of Divs (cont)
#third {
border:2px solid rgb(00,00,250);
position: absolute;
top: 300px; left: 300px;
width: 200px; height: 200px;
padding:0px; margin:0px; }
-->
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
Fixed Positioning of Divs
Look at what happens when we try out the following code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fixed positioning</title>
<style type="text/css">
<!--
#first {
border:2px solid rgb(00,250,00);
position: absolute;
top: 0px; left: 0px;
width: 800px; height: 800px;
padding:0px; margin:0px; }
#second {
border:2px solid rgb(250,00,00);
position: fixed;
top: 200px; left: 200px;
width: 400px; height: 400px;
padding:0px; margin:0px; }
Fixed Positioning of Divs (cont)
#third {
border:2px solid rgb(00,00,250);
position: absolute;
top: 300px; left: 300px;
width: 200px; height: 200px;
padding:0px; margin:0px; }
-->
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
CSS Backgrounds and Images Background Images
We have seen already that CSS allows images to be used as a background for images,
e.g.body { background-image: url(‘bg.gif’);}
We can also choose whether we would like the backgroudn image to be fixed or to scroll with the page using the background-attachment property, e.g.
background-attachment: fixed;
or background-attachment: scroll;
Background Property
Tiled backgrounds We can also specify whether the image repeats on the screen, as
well as how it repeats
p{ background-repeat: repeat-x; } /* Tile Horizontally */p{ background-repeat: repeat-y; } /* Tile Vertically */p{ background-repeat: repeat; } /* Tile Vert. & Horiz. */p{ background-repeat: no-repeat; } /*Do not tile*/
Note: resizing background images is awkward with CSS and is best done with Photoshop, GIMP, etc
Background Property
Try out the following code
<html><head>
<style type="text/css">div#container {
background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png');
width: 550px; height:700px; border-style: solid;
}div.small { width: 250px; }
</style></head><body>
<div id="container"></div></body>
</html>
Background Property
You should see the following:
Insert the following line of code andyou should see:
div#container { background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png');width: 550px; height:700px; border-style: solid; background-repeat: repeat-y;
}
Background Property
To place the image only once, changethis to:
div#container { background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png');width: 550px; height:700px; border-style: solid; background-repeat: no-repeat;
}
Background Property
We can also stop an image from scrolling using the background-attachment: value of fixed:
<html><head>
<style type="text/css">div#container {
background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png');
width: 550px; height:900px; border-style: solid;
}body {
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSzg142QHHn3NvFWHK6w0y4EsjMHtKhkhTJO31VPNaO-3LP7SniAg');
background-repeat:no-repeat;background-attachment:fixed;background-position:center;
}</style>
</head><body>
<div id="container"></div></body>
</html>
CSS and Layering
As we discussed when we were covering the CSS ‘box model’, HTML elements are layered on top of one another automatically, each item nested inside others
We can over-ride this for our layout using CSS
To manually define a priority, we set a z-index value.
The larger the value of an element, the higher the priority
h1{ z-index: 2;}
p { z-index: 1;}
Here, the heading would be placed on top of the paragraph
CSS and Layering (cont)
Copy the following code into a new webpage and save it as layers.html
<html>
<head>
<style type="text/css">
#first { background-color:rgb(00,150,200); z-index: 0; position: fixed; top: 100px; left: 100px;
width: 400px; height: 400px;}
#second { background-color:rgb(00,200,100); z-index: 1; position: relative; top: -50px; left: 250px;
width: 200px; height: 200px;}
#third { background-color:rgb(200,00,50); z-index: 2; position: absolute; top: 100px; left: 100px;
width: 200px; height: 200px; }
#fourth { background-color:rgb(200,00,250); z-index: 3; position: absolute; top: 250px; left: -50px;
width: 200px; height: 200px; }
#fifth { background-color:rgb(250,200,00); z-index: 4; position: absolute; top: 275px; left: 75px;
width: 200px; height: 200px; }
</style>
</head>
<body>
<div id="first"> first
<div id="second">second</div>
<div id="third">third</div>
<div id="fourth">fourth</div><
div id="fifth">fifth</div></div>
</body>
</html>
Note on Centralising Content in CSS We centre things in CSS using a very simple line of code, i.e.
margin: 0 auto Note that for this to work in IE we need to include the doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div {height: 200px; border-style: solid; padding:10px; }
div#container { width: 550px; height:700px; }
div.small { width: 250px; background-color: red; margin: 0 auto}
</style>
</head>
<body>
<div id="container">
<div class="small"></div>
</div>
</body>
</html>
Exercise
Save this basic template as lecture13.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head> <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> <title></title><style type="text/css">
div { border-style:solid; border-width: 2px;}div#left_nav { padding-left:10px; background-color: #99CC00; }
</style></head> <body>
<div id="banner"></div><div id="left_nav">
<h3> Lorem </h3><a href="http://bis.ucc.ie"> Lorem ipsum </a><br><a href="http://bis.ucc.ie"> Lorem ipsum </a><br><a href="http://bis.ucc.ie"> Lorem ipsum </a><br><a href="http://bis.ucc.ie"> Lorem ipsum </a><br><a href="http://bis.ucc.ie"> Lorem ipsum </a><br>
</div><div id="main_content"></div><div id="footer"></div>
</body> </html>
Exercise (continued)
In the internal CSS For the body element
Set the background-image to url(‘http://media.24ways.org/2011/verou/1.png’)
Set the background-position to right Set the background-repeat to repeat-y
Create the banner ID, then set the width to 1000px and the height to 250px
Create the main_content ID, then set the width to 750px and the height to 800px
Create the footer ID, then set the width to 850px and the height to 100px
Exercise (continued)
Centre-align the banner, main_content and footer IDs by setting the margin property to 0 auto
For left_nav Set the width to 750px and the height to 800px Set position to be fixed, then set top to 250px and left to
275px Use the z-index to bring this div to the front
Set the a:hover to increase font-size to 200%
Exercise
You should end up with a page that looks like this
Want to read more?
http://www.w3schools.com/css/ http://www.vision.to/articles/the-difference-between-the-flow-
and-positioning-for-web-pages.php http://www.tizag.com/cssT/index.php http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-
Layout-with-CSS/2/ http://www.yourhtmlsource.com/stylesheets/csslayout.html http://css-tricks.com/absolute-positioning-inside-relative-
positioning/ http://dev.opera.com/articles/view/37-css-absolute-and-fixed-
positioning/ http://www.tizag.com/cssT/background.php
top related