CSS Layout

The Span and Div Tags

The <span> and <div> tags allow content to be grouped together and to be treated as a single element. The only difference between the two is that the <span> tag does not introduce any linebreak either before or after itself and the <div> tag does introduce a linebreak both before and after itself.

The <span> is used to apply a style to part of an element, such as some text within a paragraph. For example, the code below produces the output shown immediately under it:

<p>Within this paragraph, 
<span style = "border:thin solid red">
this part has a style applied to it</span> using a <span> tag. 
The style does not insert a newline into the paragraph.</p>

Within this paragraph, this part has a style applied to it using a <span> tag. The style does not insert a newline into the paragraph.

Using the <div> tag in place of the <span> tag results in the code and output below:

<p>Within this paragraph, 
<div style = "border:thin solid red">
this part has a style applied to it</div>using a <div> tag. 
The style inserts two newlines into the paragraph.</p>

Within this paragraph,

this part has a style applied to it
using a <div> tag. The style inserts newlines into the paragraph.

Layers

The <div> tag is 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.

Positioning an Element

In order to position a div (or other element), we need to specify:

  1. what other element or window the postition of the element is with respect to.
  2. a set of coordinates that say where the element should be placed.

1) position

The position property is used to determine what the coordinates are with respect to. Elements can be positioned in one of four ways:

static
Static positioning is the default layout of webpages.
relative
Relative positioning places an element with respect to where it would normally (statically) be positioned.
absolute
Absolute position lets a developer say where the top left hand corner of an element should be located with respect to its parent element.
fixed
Fixed position lets a developer say where the top left hand corner of an element should be located with respect to its containing window. Regardless of how the webpage is scrolled, the element remains fixed in the same location on the window.

2) Coordinates

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.

top
The top property specifies where the top of an element will be placed. The top property is an offset from either:

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.

bottom
Same as top, but from the bottom.
left
Same as top, but from the left.
right
Same as top, but from the right.

Size

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>
div#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?

Z-Index

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>
div#bottomLayer
{ 
  position:absolute;
  width:100px;
  height:100px;
  top:100px;
  left:100px;
  
  z-index:1;
 
  background-color:red;
  border:thin black solid;
}

div#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.

Nested Layers

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>
div#containerLayer
{
  position:absolute;
  width:100px;
  height:100px;
  top:100px;
  left:100px;
 
  background-color:red;
  border:thin black solid;	
}

div#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.

Overflow

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:

visible
The browser should increase the actual width and/or the height of the element to display all of its contents.
hidden
The browser should "clip" the contents, displaying only the contents that are visible within the element's specified width and height.
scroll
The browser should place scrollbars on the element whether or not the content of the element has overflowed.
auto
The browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element.
Example of a layer that has overflow set to auto (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 Overflow layout</title>
<style>
div#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.

Visibility

The visibility property makes an element either visible or invisible. Visibility can be specified as one of three keywords:

visible
Show an element.
hidden
Hide an element.
inherit
Set the element’s visibility is that of its parent.

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>
div#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.

float

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:

none
An element flows as it would naturally in the flow of its webpage.
left
An element is detached from the natural flow of the webpage, and is treated as a block element to the left of the rest of the contents of its parent element.
right
an element is detached from the natural flow of the webpage, and is treated as a block element to the right of the rest of the contents of its parent element.

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>
div#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.

clear

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:

none
An element does not allow floating on either side.
left
An element does not allow floating on its left.
right
An element does not allow floating on its right.
both
An element will not float with previous elements.

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>
div.photo
{ 
  position:relative;
  width:300px;
  height:300px;
  margin:20px;
  float:left;
  border:thin black solid;
}

div img
{
  width:100%;
  height:100%;
}

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

Nav tags are used to hold menus. We shall cover the nav tag when we look at the CSS Menus section of these notes.

Main

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

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

Footer tags are used to contain copyright details, registered trade marks and perhaps contact details.

<footer>
<p>Copyright DkIT</p>
</footer>

WebPage Layout

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

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

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

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>

Figure and Figcaption

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

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

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>

Menu

Menu tags provide a way to provide pop-up or context menus. Menus are currently only supported in Firefox.

Each menu can contain one or more menuitems. Menuitems can have a:

Example of a menu (Run Example)

<script>
function changeColor (newColor) 
{
  document.getElementById('dkitLogo').style.borderColor = newColor;
}
</script>

<p>Right click on the image below to invoke the context menu.<br>This is currently only supported in Firefox.</p>
<img id = "dkitLogo" src = "images/dkit01.gif" contextmenu = "photoMenu" style = "float:left;border:20px solid black;" alt = "DkIT logo">

<menu type = "context" id = "photoMenu">
  <menuitem label = "Black" onclick="changeColor('black');"></menuitem> 
  <menuitem label = "Red" onclick="changeColor('red');"></menuitem>
  <menuitem label = "Blue" onclick="changeColor('blue');"></menuitem>
</menu>

 

Example of a menu with sub-menus (Run Example)

<script>
function changeColor (newColor) 
{
  document.getElementById('dkitLogo').style.borderColor = newColor;
}

function changeBorderThickness (newBorderThickness) 
{
  document.getElementById('dkitLogo').style.borderWidth = newBorderThickness;
}
</script>

<p>Right click on the image below to invoke the context menu.<br>This is currently only supported in Firefox.</p>
<img id = "dkitLogo" src = "images/dkit01.gif" contextmenu = "photoMenu" style = "float:left;border:20px solid black;" alt = "DkIT logo">

<menu type = "context" id = "photoMenu" >
  <menu label="Change Border Colour">
    <menuitem label = "Black" onclick="changeColor('black');"></menuitem> 
    <menuitem label = "Red" onclick="changeColor('red');"></menuitem>
    <menuitem label = "Blue" onclick="changeColor('blue');"></menuitem>
  </menu>

  <menu label = "Change Border Thickness">
    <menuitem label = "20px" onclick="changeBorderThickness('20px');"></menuitem>
    <menuitem label = "100px" onclick="changeBorderThickness('100px');"></menuitem> 
  </menu>
</menu>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>