A Notice at Bottom of Browser Window

On this webpage, at the bottom of your browser window you should see a notice. The notice stays there as you scroll the page.

The best deal in town!

This article describes how to publish a notice on your web page that is fixed at the bottom of the site visitor's browser window.

You've seen notices saying the website uses cookies, which generally are at the bottom of the browser window. Other notices can be published, instead. The notice at the bottom of your browser window is an illustration of the idea.

Here are a few ideas for custom notices.

• A special announcement, such as a newborn baby on a family website or a new book on an author website.

• A special, important menu item or items, such as "Contact" and "FAQ".

• An ad about a discount that will soon expire.

• Today's lunch or dinner special for restaurant websites.

The source code for the protruding image is separate so it can be removed if you don't want it for your implementation.

Both the CSS and the HTML source code are here. Notes follow.

<style type="text/css">
#article-fixed-message-container {
   position:fixed; 
   bottom:20px; 
   cursor:pointer;
   }
#article-fixed-message-text {
   background-color:blue; 
   position:relative; 
   color:white; 
   padding:10px 70px;
   border-radius:2em;
   }
#article-fixed-message-image {
   background-color:transparent; 
   position:absolute; 
   top:-95px; 
   left:-20px; 
   }
</style>

<div id="article-fixed-message-container" onclick="location.href='https://example.com/'">

<div id="article-fixed-message-text">
The best deal in town!
</div><!-- id="article-fixed-message-text" -->

<div id="article-fixed-message-image">
<img src="https://www.willmaster.com/images/icons/howcanwehelpyou-icon.png">
</div><!-- id="article-fixed-message-image" -->

</div><!-- id="article-fixed-message-container" -->

Notes —

Both the CSS and the HTML are in the above code.

Let's start at the top. With each CSS definition, we'll talk about the HTML code it affects.

CSS Definition: article-fixed-message-container

This is the id of the div that contains the message text div and the message image div. The CSS position:fixed; is required to keep the message div fixed in the browser window. The CSS bottom:20px; is required to position the message, although the position itself may be changed. Other CSS defintions may be removed, modified, or added.

The id="article-fixed-message-container" div is the first line of the HTML. It contains an onclick attribute that may be removed or changed. The ending </div> tag is the last line of the HTML.

CSS Definition: article-fixed-message-text

Here is all the CSS for the message. Generally, it would include styling for the message and some kind of border or background color for the box with the message.

In the HTML section, it is the first div inside the message container and it contains the message text.

CSS Definition: article-fixed-message-image

This is the CSS for the image protruding above the message div. The CSS position:absolute; is required, as are positioning definitions.

In the HTML section, it is the last div inside the message container and it contains the <img...> tag.

If you prefer not to publish a protruded image, the CSS and HTML can be omitted from your implementation.

With the template that the example provides, you should be able to construct your own notice at the bottom of site visitor's browsers.

(This content first appeared in Possibilities newsletter.)

Will Bontrager