Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
The <div> tag is often used to create layers (we shall see further down these notes that other elements can also be used to create layers too). Layers allow webpage content to be placed anywhere in the browser window. We use styles to define layer properties.
In order to position a div (or other element), we need to specify:
The position property is used to determine what the coordinates are with respect to. Elements can be positioned in one of four ways:
When using the relative, absolute or fixed position, we must give offset coordinates for the placement. For elements with a position set to static, we cannot give offset coordinates. We can state where the top, bottom, left or right side of an elements is to be placed.
A top value can be negative. Negative top values move an element up the webpage, positive top values move the element down the webpage.
The top of an element can be specified using length values or percentage values.
When the top is specified using a length value, the element is offset up or down the webpage with respect to a location determined by the position value of the element.
When top is specified as a percentage value, the element is offset up or down the webpage by this percentage of the height of its parent element.
We can specify the width, height, min-width, max-width, min-height and max-height of an element.
Example of a Layer (Run Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of an Absolute layout</title>
<style>
#topLayer
{
position : absolute;
width : 100px;
height : 100px;
left : 20px;
top : 50px;
background-color : yellow;
border : thin black solid;
}
</style>
</head>
<body>
<p>
A line of text.<br>
A line of text.<br>
A line of text.<br>
A line of text.<br>
A line of text.<br>
</p>
<div id = "topLayer">This layer sits on top of the webpage's body content.</div>
</body>
</html>
Write code to place an absolute layer at each of the four corners of a webpage, as shown here.
Place other content into the body of the webpage in the example above, as shown here. What happens with the above example if you scroll down the webpage?
Write code to place a fixed layer at the bottom of the screen, as shown here.
Place other content into the body of the webpage in the example above, as shown here. What happens with the above example if you scroll down the webpage?
The "stacking order" of overlapping elements is specified using the z-index property. It determines which elements will appear in front of others when they overlap. An element with the higher z-index will be placed in front of one with the lower z-index. If an element has no z-index, then it is automatically assigned a z-index that is equal to its parent.
Example of z-index layers (Run Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of z-index Layers</title>
<style>
#bottomLayer
{
position:absolute;
width:100px;
height:100px;
top:100px;
left:100px;
z-index:1;
background-color:red;
border:thin black solid;
}
#topLayer
{
position:absolute;
width:100px;
height:100px;
top:150px;
left:150px;
z-index:2;
background-color:yellow;
border:thin black solid;
}
</style>
</head>
<body>
<div id = "bottomLayer">This is the bottom layer</div>
<div id = "topLayer">This is the top layer</div>
</body>
</html>
Remove the "z-index:1" from the bottomLayer in the example above. Notice that the code still works, as it defaults to a value of it parent.
Change the above example code so that the top layer sits on the top right of the bottom layer, as shown here.
A layer can contain other layers. the nested layers top, bottom, left and right values will be with respect to their container layer. Nested layers can be placed anywhere on the browser window and are not restricted to being displayed inside the screen space occupied by their parent layer.
Example of a nested layer layout (Run Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Nested Layers</title>
<style>
#containerLayer
{
position:absolute;
width:100px;
height:100px;
top:100px;
left:100px;
background-color:red;
border:thin black solid;
}
#nestedLayer
{
position:absolute;
width:100px;
height:100px;
top:150px;
left:150px;
background-color:yellow;
border:thin black solid;
}
</style>
</head>
<body>
<div id="containerLayer">
Container Layer contents.
<div id = "nestedLayer">
Nested Layer contents
</div>
</div>
</body>
</html>
Write code to display a company's phone, name and brief details, in such a way that the photo sits on top of the other details, as shown here. You will need to make use of a container layer and negative layer offset postitions.
The overflow property specifies how a browser should display an element where its content does not all fit inside the element. Overflow can be set to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of an Overflow layout</title>
<style>
#overflowLayer
{
position:absolute;
width:300px;
height:200px;
left:400px;
top:200px;
overflow:auto;
background-color:white;
border:thin black solid;
}
</style>
</head>
<body>
<div id = "overflowLayer">
<p>...some text to fill the layer. </p>
</div>
</body>
</html>
Write code to extend the functionality of the example in the "Container" notes above, so that the brief details are contained in a scrollable layer, as shown here.
The visibility property makes an element either visible or invisible. Visibility can be specified as one of three keywords:
Example of a Layer that can be set to visible or hidden (Run Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Hidden layout</title>
<style>
#topLayer
{
position:absolute;
width:100px;
height:100px;
left:20px;
top:50px;
background-color:yellow;
border:thin black solid;
visibility:hidden;
}
</style>
<script>
function showLayer(state)
{
document.getElementById("topLayer").style.visibility = state;
}
</script>
</head>
<body>
<input type = "button" value = "Show Layer" onClick = "showLayer('visible')">
<input type = "button" value = "Hide Layer" onClick = "showLayer('hidden')">
<div id = "topLayer">This layer sits on top of the webpage's body content.</div>
</body>
</html>
Write code to use a single button that toggles the visibility of the layer, as shown here.
Write code that shows up related content when a user hovers over a product image, as shown here. You should contain the pop-up photo and information layers within the pop-up product title layer, so that making the the pop-up title layer visible or hidden will have the same effect on the pop-up photo and information layers.
The effect of the float property is to take an element out of the flow and place it to the left or right of other elements in the same parent element. An element does not inherit the float of its parent. Float can be specified by one of three keywords:
Example of a layer that is floated to the right (Run Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of z-index Layers</title>
<style>
#floatToRightLayer
{
width:100px;
height:100px;
float:right;
background-color:red;
border:thin black solid;
}
</style>
</head>
<body>
<div id = "floatToRightLayer">Floating to the right.</div>
</body>
</html>
By placing some content, such as images and quotes, to the left and some content to the right, we can vary the look of a webpage. Write code to do this, as shown here.
If an element is set to float to the left or the right, then all future elements will behave the same way until they are given an instruction to stop. Clear will force floating to stop. The clear property can be used in conjunction with float to specify whether and/or where an element allows floating alongside it. We can specify whether an element can have other elements floated to its left, to its right, or at all. When an element does not allow floating on a side, where an attempt is made to float an element to that side, the element appears below the floated element. Clear can be specified as any one of the keywords:
Example of clear that places two photos on each line (Run Example)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of a Clear:Both</title>
<style>
.photo
{
position:relative;
width:300px;
height:300px;
margin:20px;
float:left;
border:thin black solid;
}
img
{
width:100%;
height:100%;
}
.start_of_row
{
clear:both;
}
</style>
</head>
<body>
<div class = "photo"><img src="images/dkit01.gif"></div>
<div class = "photo"><img src="images/dkit02.gif"></div>
<div class = "start_of_row photo"><img src="images/dkit03.gif"></div>
<div class = "photo"><img src="images/dkit04.gif"></div>
</body>
</html>
How do the images display if the start_of_row class is removed from the code above?
Nav tags are used to hold menus. We shall cover the nav tag when we look at the CSS Menus section of these notes.
When laying out webpages, various tags can be used to identify the type of content. Main tags are used to identify the main content of a webpage. Main content should be the unique content of a particular webpage.
<main> <!-- place unique content for this qebpage here --> <!-- This can include various other tags --> </main>
Header tags contain heading information for a webpage. Examples of content that should be placed in a header include company names and company logos, as is shown in the example below.
Example of a figure and figcaption tag (Run Example)
<header>
<img src="images/dkit02.gif" width= "100px">
<p>DkIT</p>
</header>
<p>Text about DkIT</p>
Footer tags are used to contain copyright details, registered trade marks and perhaps contact details.
<footer> <p>Copyright DkIT</p> </footer>
Layers can be used to lay out the content on a webpage.
Webpage Layout using divs, nav, head and footer Example (Run Example Code)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Example</title>
<link href="css/main.css" rel="stylesheet" type = "text/css"/>
<style>
#container
{
position : relative;
width : 800px;
height : 600px;
margin-left : auto;
margin-right : auto;
border : thin red solid;
}
#banner
{
position: absolute;
top:0px;
left:0px;
width:800px;
height:200px;
border: thin solid green;
}
#menu
{
position: absolute;
top:200px;
left:0px;
width:100px;
height:370px;
border: thin solid orange;
}
#main_content
{
position: absolute;
top:200px;
left:100px;
width:690px;
height:360px;
border: thin solid purple;
overflow:auto;
padding:5px;
}
#copyright
{
position: absolute;
top:570px;
left:0px;
width:800px;
height:30px;
border: thin solid blue;
}
</style>
</head>
<body>
<div id="container">
<header id="banner">
Banner
</header>
<nav id="menu">
Menu
</nav>
<main id="main_content">
Main content of webpage
</main>
<footer id="copyright">
Copyright
</footer>
</div>
</body>
</html>
Adjust the code above so that the webpage includes a banner image, a white coloured on grey background, centred, large, copyright notice that links to 'www.dkit.ie' and image menu links to 'Home', 'About Us' and 'Contact Us' webpages, as shown here.
Article tags are used to hold self-contained content. The content of an article should make sense if it is taken out of a website and displayed on its own. Examples of articles include forum posts, blogs, archive items and news items.
The content from the article will be shown along with the other content of a webpage, as shown in the example below.
Example of an article tag (Run Example)
<p>Some other content on a webpage</p> <article> <h1>DkIT</h1> <p>DkIT is a third level college, which is located in Dundalk, County Louth, Ireland.</p> </article> <p>More content on the same webpage</p>
Aside tags are used to give further information about content that is an aside from the content that it is placed in. For example, as a student, you might include an aside about DkIT on your personal webpage.
The content from an aside will be shown along with the other content of a webpage, as shown in the example below.
Example of an aside tag (Run Example)
<p>I am a student at DkIT</p> <aside> <h3>DkIT</h3> <p>DkIT is a third level college, which is located in Dundalk, County Louth, Ireland.</p> </aside> <p>I live in County Louth..... etc </p>
Cite tags are used to identify the name of a book, movie, song or any other citable work.
Example of a cite tag (Run Example)
<p><cite>Reservoir Dogs</cite> is a Quentin Tarantino movie that was made in 1992.</p>
Use the figure tag to place related figures into a webpage. Each figure should have an associated figcaption (figure caption) associated with it, as shown in the example below.
Example of a figure and figcaption tag (Run Example)
<figure><img src="images/dkit01.gif"> <figcaption>Fig. 1 DkIT logo</figcaption> </figure> <figure> <img src="images/dkit02.gif"> <figcaption>Fig. 2 DkIT logo</figcaption> </figure>
Mark tags are used to highligh items within a webpage, as shown in the example below.
Example of a mark tag (Run Example)
<p>Use the mark tag to <mark>highlight important</mark> words.</p>
Write code to change the <mark> colour to green.
Details tags provide a way to toggle content between being displayed and hidden.
Details tags usually have a summary tag, which remains displayed even when the content is hidden.
Example of a details tag (Run Example)
<details> <summary>Dundalk Institute of Technology</summary> <h3>DkIT</h3> <p>Some details about DkIT</p> <img src="images/dkit01.gif"> </details> <p>Some other content outside of the details tag</p>
By default, the content of a details tag is hidden. It can be automatically displayed by setting the attribute "open", as shown in the example below.
Example of a details tag that automatically shows its content (Run Example)
<details open>
<summary>Dundalk Institute of Technology</summary>
<h3>DkIT</h3>
<p>Some details about DkIT</p>
<img src="images/dkit01.gif">
</details>
<p>Some other content outside of the details tag</p>
A <progress> tag displays a progress bar that shows the completion progress of a task. A progress bar should be used to show dynamically changing information, such as completion rate of a file upload or degree of progress of a process.
If no maximum value is provided, then the progress bar will default to a range of 0 to 1, as shown below.
<progress value="0.4"></progress>
If a "max" value is provided, then the progress bar will scale to this size, as shown below.
<progress max="100" value="40"></progress>
If a progress bar is not given a value, then it animates, as shown below
<progress max="100">
List some other possible uses of a <progress> tag.
Use CSS to change the look of a progress bar, so that the progress is shown orange on a blue background, as shown here.
A <meter> tag shows a bar showing a value within a known range. It defaults to a range between 0 and 1. A meter bar should be used to show static information on a known scale, such as current free disk space on your computer or results from an election poll.
<meter value="0.4"></meter>
If a "min" and "max" value are provided, then the progress bar will scale to this size, as shown below.
<meter min="0" max="100" value="40"></meter>
Meters can contain various other measures, as listed below.
If the optimal value is between the low and high range, then both the low and high range will show up as orange.
In all three examples below, low = 20, high = 80 and optimal = 50
If the optimal value is within the low range, then the middle range will be orange and the high range will be red, as shown below:
In all three examples below, low = 20, high = 80 and optimal = 10
Likewise, if the optimal value is within the high range, then the middle range will be orange and the low range will be red, as shown below:
In all three examples below, low = 20, high = 80 and optimal = 90
List some other possible uses of a <meter> tag.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.