IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob...
-
Upload
sandra-wilcox -
Category
Documents
-
view
214 -
download
0
Transcript of IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob...
![Page 1: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/1.jpg)
IS1825Developing Multimedia Applications for BusinessLecture 4: CSS Positioning and FlowRob Gleasure
[email protected]://corvus2.ucc.ie/phd/rgleasure/index.html
![Page 2: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/2.jpg)
IS1825
Today’s lecture CSS flow CSS positioning CSS backgrounds CSS layers
![Page 3: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/3.jpg)
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">
![Page 4: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/4.jpg)
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
![Page 5: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/5.jpg)
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
![Page 6: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/6.jpg)
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>
![Page 7: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/7.jpg)
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>
![Page 8: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/8.jpg)
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>
![Page 9: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/9.jpg)
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; }
![Page 10: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/10.jpg)
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; }
![Page 11: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/11.jpg)
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>
![Page 12: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/12.jpg)
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; }
![Page 13: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/13.jpg)
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>
![Page 14: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/14.jpg)
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; }
![Page 15: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/15.jpg)
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>
![Page 16: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/16.jpg)
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;
![Page 17: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/17.jpg)
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
![Page 18: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/18.jpg)
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>
![Page 19: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/19.jpg)
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;
}
![Page 20: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/20.jpg)
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;
}
![Page 21: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/21.jpg)
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>
![Page 22: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/22.jpg)
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
![Page 23: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/23.jpg)
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>
![Page 24: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/24.jpg)
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>
![Page 25: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/25.jpg)
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>
![Page 26: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/26.jpg)
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
![Page 27: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/27.jpg)
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%
![Page 28: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/28.jpg)
Exercise
You should end up with a page that looks like this
![Page 29: IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie .](https://reader030.fdocuments.in/reader030/viewer/2022032611/56649e7d5503460f94b8089d/html5/thumbnails/29.jpg)
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