3.11: Building a Fluid Container for Content in Blackboard

Last updated
Save as PDF

Page ID: 51907

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Earlier we talked about using relative units such as em and % for font size and image width to create content that scales when a user changes her font size in her browser, or content that reflows when the user changes the browser window size. This same principle applies to HTML containers. In HTML, there is a generic type of container element, called a Div, that we can use to surround our content. It has an opening <div> tag before the content, and a closing </div> tag at the end of the content. When we specify a width in percent (%) for a container, its content will reflow as a browser window is scaled down. In the past, people used tables to layout just about everything on a web page. While this works for sighted users, it causes problems for people using screen readers. Using tables for layout should be reserved for tabular data or information that has a two-way relationship, such as found in rubrics or course schedules. Sometimes, tables can be used for layout if the content within is read in a logical order. A screen reader reads linearly, from top to bottom, line by line, in the order that content appears in the HTML. This holds true for both the content in the HTML code and content within a table. If the default language is read from left to right, the screen reader also reads from left to right, line by line, from top to bottom.

Below I’ll give you some code to create fluid content containers. Their basic structure can be re-used and you can put your choice of text, images or media within.

Single container with rounded corners

Here’s a single container with rounded corners in which you can write whatever you would like. This box will respond to your screen size so that the text reflows and remains visible without scrolling, until Blackboard’s content area hits its minimum width of 1150 pixels. It doesn’t use an image in its background, so it is light weight in terms of downloading content. Its only limitation is set within Blackboard Learn’s minimum width size for the parent element (the content area).

The code that you would enter into the HTML Code View is:

<div style=”border-radius: 25 px; background-color: #006a4d; color: # fff; padding: 1.5em; margin:1.5em; font-size: 1 em; font-weight: bold; font-family: Arial, Helvetica, sans-serif;”><p>Here’s a single container with rounded corners in which you can write whatever you would like. This box will respond to your screen size so that the text reflows and remains visible without scrolling, until Blackboard’s content area hits its minimum width of 1150 pixels. It doesn’t use an image in its background, so it is light weight in terms of downloading content. Its only limitation is set within Blackboard Learn’s minimum width size for the parent element (the content area).</p></div>

Note the words contained within the <div> element that display in white letters. You can simply select this text, delete it or type over it, and enter whatever message you would like to appear here. The essentials to keep are: <div style=”border-radius: 25px; background-color: #006a4d; color: #fff; padding: 1.5em; margin:1.5em; font-size: 1 em; font-weight: bold; font-family: Arial, Helvetica, sans-serif;”><p></p> </div> . Write whatever you would like in between the paragraph (<p>) tags.

The style=”border-radius: 25px; background-color: #006a4d; color: #fff; padding: 1.5em; margin:1.5em; font-size: 1 em; font-weight: bold; font-family: Arial, Helvetica, sans-serif;” is not HTML, but “inline” CSS. CSS is another web language, that styles the content laid out by HTML. CSS stands for Cascading Style Sheet. Most web designers use separate (external) style sheets of CSS and link to them within their web page. We have to use what is called “inline” CSS within a content management system in order to impose the styling that we want and override the basic styling set within the learning management system’s CSS files.

Below, you can see a video of the contents within the container reflowing as I scale the viewport size down.

An interactive or media element has been excluded from this version of the text. You can view it online here: https://pressbooks.ulib.csuohio.edu/accessibility/?p=350