IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob...

IS1825Developing Multimedia Applications for BusinessLecture 4: CSS Positioning and FlowRob Gleasure

[email protected]://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


<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>




div.small { width: 250px; background-color: red; display: inline;}

div#big { background-color: green; display: inline;}

</style>

</head>

<body>


<div id="big"></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>


<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


<html>

<head>

<title>Relative positioning</title>


<!--

#first {

border:2px solid rgb(00,250,00);

position: relative;

top: 0px; left: 0px;

width: 800px; height: 800px;

padding:0px; margin:0px; }

#second {


position: relative;

Relative Positioning of Divs (cont)

#third {


position: relative;




-->

</style>

</head>

<body>

<div id="first">

<div id="second">

<div id="third"></div>

</div>

</div>

</body>

</html>

Absolute Positioning of Divs



<html>

<head>

<title>Absolute positioning</title>


<!--

#first {


position: absolute;




#second {


position: absolute;

Absolute Positioning of Divs (cont)

#third {


position: absolute;




-->

</style>

</head>

<body>

<div id="first"></div>

<div id="second"></div>


</body>

</html>

Fixed Positioning of Divs



<html>

<head>

<title>Fixed positioning</title>


<!--

#first {


position: absolute;




#second {


position: fixed;

Fixed Positioning of Divs (cont)

#third {


position: absolute;




-->

</style>

</head>

<body>

<div id="first"></div>

<div id="second"></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>


#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;


#fifth { background-color:rgb(250,200,00); z-index: 4; position: absolute; top: 275px; left: 75px;


</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>




div.small { width: 250px; background-color: red; margin: 0 auto}

</style>

</head>

<body>



</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

IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob...

Documents

Transcript of IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob...