I remember that at the moment when I began to switch from tables to div layout, one of the difficulties that I encountered was the following - how to press the site footer to the very bottom of the browser window so that the page would look stretched out to the full height, regardless of the volume of text, and if the page height is greater than the height of the browser window (when a scroll appears), the footer would remain in its proper place.
If with the help of tables this problem is solved only by specifying the height for the table and/or the cell nested in it, then when using CSS block layout uses a completely different approach.
In the process of practice, I identified 5 ways to push the footer to the bottom of the browser window using CSS.
The HTML code of all presented methods has the following structure (the only difference is the CSS code):
The CSS code below includes only those properties that are minimally necessary to implement the corresponding method. For each of them you can see a live example.
First wayThe Footer is pressed down by positioning it absolutely and stretching the height of the parent blocks (html , body and .wrapper) to 100%. In this case, the content block.content needs to specify a bottom margin that is equal to or greater than the height of the footer, otherwise the footer will cover part of the content.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( position: relative; min-height: 100%; ) .content ( padding-bottom: 90px; ) .footer ( position : absolute; left: 0; bottom: 0; width: 100%; height: 80px; )
Second wayThe Footer is pressed down by pulling the content block and its “parents” to the full height of the browser window and lifting the footer up through a negative margin (margin-top) to get rid of the vertical scroll that appears. In this case, it is necessary to indicate the height of the basement, and it must be equal to the amount of indentation.
* ( margin: 0; padding: 0; ) html, body, .wrapper ( height: 100%; ) .content ( box-sizing: border-box; min-height: 100%; padding-bottom: 90px; ) . footer ( height: 80px; margin-top: -80px; )
Thanks to the box-sizing: border-box property, we prevent the box with class .content from exceeding 100% height. That is, in this case min-height: 100% + padding-bottom: 90px equals 100% of the browser window height.
Third wayIt is good because, unlike other methods (except for the 5th), the height of the footer does not matter.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: table; height: 100%; ) .content ( display: table-row; height: 100%; )
Here we emulate the behavior of a table by turning the .wrapper block into a table and the .content block into a table row (display: table and display: table-row properties respectively). Thanks to this, and the fact that the .content block and all its parent containers are set to 100% height, the content is stretched to its full height, minus the footer height, which is determined automatically - table emulation prevents the footer from extending beyond the height of the browser window.
As a result, the footer is pressed to the bottom.
Fourth methodThis method is unlike any of the previous ones, and its peculiarity is the use of the CSS function calc() and the vh unit of measurement, which are only supported by modern browsers. Here you need to know the exact height of the basement.
* ( margin: 0; padding: 0; ) .content ( min-height: calc(100vh - 80px); )
100vh is the height of the browser window, and 80px is the height of the footer. And using the calc() function we subtract the second value from the first, thereby pressing the footer to the bottom.
You can find out which browsers support calc() and vh on caniuse.com using the following links: calc() function support, vh unit support.
Fifth method (the most relevant)This The best way of all those presented, however it only works in modern browsers. As in the third method, the height of the footer does not matter.
* ( margin: 0; padding: 0; ) html, body ( height: 100%; ) .wrapper ( display: flex; flex-direction: column; min-height: 100%; ) .content ( flex: 1 0 auto ; ) .footer ( flex: 0 0 auto; )
You can find out about browser support for the flex property.
If shoes are the final component of any outfit, then the footer for an e-Commerce site is the final element of its selling design. By focusing on the bottom element, the footer, modern websites are ready to showcase their personality in every way possible. In a competitive e-commerce environment, there are enough original ideas, creativity and design trends. Before diversifying the footer of an E-commerce site, it is worth considering important points. What to place first and what is the best way to do it? Our roundup of inspiring footer designs has some interesting options.
Read also: 13 e-commerce marketing trends of 2019
Interesting statistics from Chartbeat. A study of the behavior of 25 million users showed how deeply they browse pages. It turns out that the user's attention is drawn to the space below the fold line. Getting more practically useful information, visitors linger longest in the area 1200px from the top of the page (with an average 700px vertical screen in the browser), or behind the second screen.
View time (sec.) / Distance from top of page (pixels)
There is a large gap in the duration of viewing the first and second screens. The TOP is 4 seconds, the duration reaches a maximum (16 seconds) at 1200 pixels from the top and with further scrolling, it slowly decreases.
Share of visitors (%) / Distance from top of page (pixels)
A significant portion of visitors (more than 25%) do not even wait for the content to load and start scrolling the page. This means that only 75% will see the very top first. The most viewed area of the page is 550px (just above the fold line).
The study dispels the myth that users don't scroll to the bottom of the page and watch all the content. The footer is also important for a modern eCommerce site, and even has its own advantages.
Ideas on how to design a “basement” (footer), examples of selling designsThese 10 tips will tell you how to beautifully design the footer for a website - according to the rules of composition in web design and solving priority tasks. Apply the most appropriate tactics to improve usability, UX (user experience) and even increase sales.
1. Required informationTraditionally, the required organizational and legal issues are covered in the footer of the site. Notifications are designed with less noticeable text, which frees up other areas of the pages for more meaningful elements. Here's a sample list to consider:
- Copyright notices
- Legal Disclaimers
- Billing information
- Cookie Notice
The website selling the product must meet legal requirements and provide information about the procedure and return periods. Its location in the footer is convenient for both the selling resource and visitors.
Footer example: Yves Rocher
Online store trademark Yves Rocher: full screen footer with nice design from alternating layers. Informs about the company, the infrastructure of the selling website - from order tracking to personal data policy. There are also tips on using the product, bonuses, promotions
Example footer: Lumity
Dealers of nutritional supplements are subject to increased legal requirements. responsibility. There are quite a few things they should/shouldn't say on their sales website. Links to legal information are highlighted in bold for better visibility.
A footer with a beautiful background image fits very organically into the overall design of the site. There is no clear boundary, rather the content itself serves as a separator
Example footer: Saddleback Leather Co
A selling website with a beautiful retro header and footer design. 100-year warranty against defects in material and finish. The return conditions are accompanied by interesting stories... not everything is so sad with the necessary e-Commerce information, it turns out
2. Negative space – sufficient visual distanceWhen limiting the number of footer links, don't skimp on negative space - this will have a stunning effect on visual perception and improve readability. The general rule is that if you maintain visual hierarchy, central elements are noticed faster (can be used to your advantage!).
Footer example: QUAY AUSTRALIA
With a minimalistic style and a fixed drop-down menu, the online store can afford a spacious footer
Footer example: Incase
About the large amount of micro-negative space (between small elements) we can say this: while all necessary information is present, it is legible and quickly perceived - everything is fine
Example footer: Stumptown Coffee Roasters
The spacious footer of a coffee site is an excellent completion of a clean design composition, in which there is a lot of macro-negative space (“air” between sections/sections)
3. Final call to actionRead also: 30+ examples and ideas for designing target action buttons
The stylish design of the footer speaks volumes about the resource itself. It’s important to note: the buyer stays here a little longer than in other parts of the page. A convenient opportunity for one more, final call to action. Often this is a subscription/newsletter, but you can also link a CTA call to account registration.
Footer example: Greetabl
Greetabl has a modestly designed bottom of its pages that includes a call to subscribe. With a minimum of elements, the call becomes noticeable, and in harmony with the turquoise background it turns into a decoration of the site
Footer example: Ecwid
Nice design with calls to action at the bottom of the pages. The structure of the selling website builder is universal. It has been translated into 35 languages for its million customers.
4. Floating cart – increasing the availability of selling functionalityAccessing the shopping cart from the bottom of the site is a great way to improve the usability and selling qualities of the site.
Footer example: Lemonadela
The selling website of the catering company is pleasant to look at and convenient for the buyer
5. Footer navigationThe bottom part of the site is ideal for information that is not often viewed: about the company, terms of service and privacy policy. In this case, the function of the footer is to save everyone. Feeling lost in the eCommerce environment, someone becomes interested in the e-commerce infrastructure, instinctively scrolling further...
Negative space is essential for the readability of content. In general, the “footer” is not for navigation purposes, unlike a menu or site map. Only in rare cases, e-commerce sites place individual product categories in the footer (
In HTML5, several new tags have been introduced for the code structure: , , , , , which in some cases replace the usual . Although it seems that there is not much difference between the tags, there is a huge gap between them. Tags are not aimed at people who have no reason to look into source pages, but to machines that interpret the code. Machines or robots do not understand, for them this is a typical markup tag - replace it with and the meaning will not change. Another thing is that the robot, having detected this tag, perceives it precisely as the header of a site or section.
What does this give in the end? Search engines They begin to index the site better because they clearly separate the page content from the auxiliary elements. Speech browsers designed for blind people skip the header and go directly to the content. Sites may automatically share content and other information with each other. All these capabilities are called semantics and allow you to present data in a form convenient for robots.
Let's first make the site header using a tag (example 6.2).
Example 6.2. Usage
An attempt to add a background to the tag in the styles did not lead to anything; the background does not want to be displayed in some browsers. All new tags should first be made block-level via the display property, then they will begin to be displayed correctly (example 6.3).
Example 6.3. Site header
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
header ( display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; )
This example will work in all browsers except IE7 and IE8. Internet Explorer does not add style to elements it does not understand. This misunderstanding can be corrected by creating a dummy element with using JavaScript. To do this, we will include this in the code.
document.createElement("header");
If there is one tag on the page, this script is quite suitable for the job. But we don’t want to repeat the line ten times for ten different tags, so we automate this process through a loop. The tags themselves are indicated in a list, separated by commas (example 6.4).
Example 6.4. Script for IE
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(","); for (var i = 0; i< e.length; i++) { document.createElement(e[i]); }
The script itself is enclosed in conditional comments so that it is executed only for IE version 8.0 and lower. IE9 already includes support for the new HTML5 tags.
You don’t have to embed the example above on your website; you can use a publicly available script written by Remy Sharp and distributed under the MIT license. To do this, just provide a link to it, as shown in example 6.5.
Example 6.5. Script for IE
All specified scripts must be located in the code before the CSS.
Thus, to fully use HTML5 tags in all browsers, it is enough to fulfill three conditions:
Now let's look at some HTML5 tags in more detail to understand their scope.
Example 6.6. Using a tag
HTML5 IE Cr Op Sa Fx
article Traces of unprecedented animals The story of how mysterious pink footprints with six fingers appeared near the dining room, and why this happened.
Defines a block that is not related to the main content for placing categories, links to the archive, tags and other information (example 6.7). Such a block, if it is located on the side, is usually called a “sidebar” or “sidebar”.
Example 6.7. Usage
HTML5 IE Cr Op Sa Fx
aside document.createElement("aside"); document.createElement("article"); aside ( background: #f0f0f0; /* Background color */ padding: 10px; /* Margins */ width: 200px; /* Sidebar width */ float: right; /* Wrap left */ ) article ( margin-right: 240px ; /* Right indentation */ display: block; /* Block element */ }
Save electricity
Whose stick is bigger
The story is about how electricity had to be saved, what measures were taken for this, and where it actually went.Used to group any elements, for example, images and captions (example 6.8).
Example 6.8. Usage
HTML5 IE Cr Op Sa Fx
figure document.createElement("figure"); document.createElement("figcaption"); figure ( background: #5f6a72; /* Background color */ padding: 10px; /* Margins around */ display: block; /* Block element */ width: 150px; /* Width */ float: left; /* Blocks are lined up horizontal */ margin: 0 10px 10px 0; /* Padding */ text-align: center; /* Center alignment */ ) figcaption ( color: #fff; /* Text color */ )
Contains a description for the tag. The tag must come first or last element in Group.
Specifies the “footer” of a site or section; it usually contains the name of the author, date of the document, contact and legal information(Example 6.9).
Example 6.9. Usage
HTML5 IE Cr Op Sa Fx
footer Personal website of Kristina Vetrova Welcome!
I am glad to welcome you to my website.
Copyright Kristina VetrovaDefines the “header” of a site or section.
Used to group web page or section headings (Example 6.10).
Example 6.10. Usage
HTML5 IE Cr Op Sa Fx
hgroup Kristina Vetrova Personal website
Sets site navigation (example 6.11). If there are several blocks of links on a page, then priority links are usually placed in them. It is also acceptable to use multiple tags in a document. Do not put inside.
Example 6.11. Usage
HTML5 IE Cr Op Sa Fx
nav Cheburashka and the crocodile Gena Cheburashka | Gene | Shapoklyak | Lariska Welcome!
Defines a section of a document, which may include headings, header, footer, and body (Example 6.12). It is allowed to nest one tag inside another.
Example 6.12. Usage
HTML5 IE Cr Op Sa Fx
section Filming Polypropylene
The story is about how they made a film where the heroes were relaxing on the beach, then the antagonist came, beat up the protagonists, threw them into the pool, and what happened.
Good languageThe story is about how a studio for studying the Esperanto language took place, while above it, on the veranda, there was a prank studio where jokes were told, and what came of it.
Marks text within a tag as a date, time, or both date and time. Can be specified directly inside the container, or specified through the datetime attribute (example 6.13).
The date and time are specified in the international format ISO 8601. Examples of formatting are given in table. 6.1.
Each unit has its own specified shape and limitations.
- The year is specified in four digits (1860).
- Month - two digits (01 - January, 02 - February, 12 - December).
- Day - two numbers from 01 to 31.
- Hour - two digits from 00 to 23.
- Minutes are two digits from 00 to 59.
- Seconds are two digits from 00 to 59.
- Time zone - hours and minutes indicated by a plus or minus sign.
The date and time are separated by a capital Latin letter T. The time zone, if necessary, is written after the time with a plus or minus sign. For example, for Moscow the time zone will be +03:00.
Example 6.13. Usage
HTML5 IE Cr Op Sa Fx
time
1957-10-04 first launched artificial satellite Earth.
1960-08-19 first flight of dogs into space.
1961-04-12 first manned space flight.
1963-06-16 first flight of a female astronaut.
1969-07-21 man landing on the moon.
This tag can be used, like previous tags, several times on a page. You probably already guessed from the name that it is the footer of the page. It can contain counters, text about copyright on the site, contact information, etc. It is also possible to insert a navigation bar () into the footer of the page. No one forbids inserting new elements such as aside and section, but I still wouldn’t do it if I were you.
and use it to the fullest!New markup body>header ( background:#FFEAD5 ) article( background:#CFCFCF; margin:10px; padding-top:5px; ) article p( padding-left:25px ) article, article>header hgroup ( -moz-border- radius:5px; /* Rounding radius */ -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;) article header hgroup ( text-align:right; width:40%; color:#CCC; background:#000; margin-left:55%; ) article footer ( background:#5c6183; -moz-border-radius:0px 0px 5px 5px; /* Fillet radius */ -webkit-border-radius :0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; padding-left:15px; color:#FFF ) header hgroup p ( background:#FFF; color:# 006; -moz-border-radius:0px 0px 5px 5px; /* Fillet radius */ -webkit-border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; padding-right:10px; ) footer (clear:both; background:#DDECE9) footer p( font-size:14px; text-align:center) Site header Post No. 1
Here we will write the text of the first post.
Post #2Here we will write the text of the second post.
Author of the post (article): Alexander PobedinskyHere they usually write that rights are reserved. Year, etc. Copying is prohibited))
The result should be the following:
From this example it follows that each individual article or post can have its own elements and regardless of the header and footer of the document page. It is in such cases that these elements can be used several times. Although I'm sure they can be used in the aside sidebar as well.
Well, now you have become acquainted with the basic structural elements of HTML5, and in the next lessons we will look at even more new elements, various forms that were not in other HTML specifications!
We are starting the fifth lesson on editing templates in CMS Joomla 3, this time we will talk about the footer for the site. Let's sort it out possible options Footer design and some approaches to creating it.
What is a footerThe footer or footer of a site is the lowest part of it, which usually contains information about the site, copyright, etc. Standard version in template Protostar, the footer does not contain any meaningful information:
The standard content of the footer is the current year, the name of the site and the “Back to Top” link leading to the top of the page. To be honest, this footer option is completely useless to visitors to our site, besides, the “Back to Top” link is absolutely unnecessary in our case, we have already made a beautiful button for these purposes.
Therefore, to begin with, I suggest getting rid of the standard footer content. Open the file index.php standard Protostar template and look for the code that is responsible for displaying the footer. The code between lines 205 and 219 is responsible for displaying the footer, which looks like this (depending on the version of Joomla and the changes made to the index file, the lines of code may differ):
" />
And for clarity, a screenshot:
It’s clear how the modules are displayed, but I’d like to dwell on the logo in more detail. The code responsible for displaying the logo is:
" />
At first glance, it looks like an ordinary HTML tag for an image, but instead of the usual file path it is written php code. This code may seem complicated and incomprehensible at first glance, but in fact, if you look at it, it becomes clear that there is nothing complicated in it:
- - end php code
As a result of use given php code we get the relative path to the image file. In other words, no matter what name the site has or what template is used, the image will be taken from the images folder of the selected template.
We save the file index.php, now we can close it, we will no longer need it.
Now let's create several modules, which we will display in the newly created new positions. The first module will display a menu in the footer, and the second will display small text.
At the next stage, we create modules - for a menu with the “Menu” type and for text with the “HTML code” type (how to create a module). We select the newly created module positions as positions for them:
To distinguish our footer menu from the rest of the menu on the site, in the menu module settings we add the “_footer” class suffix to it:
In order not to explain what kind of module with the “HTML code” type is, I will show the principle of its operation in the screenshot:
I filled this module with certain text that will be displayed in the footer, in addition to the regular text, I wrote a small php code that displays the current year:
We save the modules and go to the site to check the result and this is what I got:
Although the result is there, it is not very impressive. Now we need to more adequately style the footer elements using CSS.
First, let's create new footer blocks:
Foot-left, .foot-center(float: left;) /*footer block alignment*/ .foot-left (width: 20%;) /*left block width*/ .foot-center (margin-left: -6px ;) /*central block indent*/ .foot-right ( /*right block*/ float: none; height: 60px; )
The next candidate for styling is the menu, to which I applied the following styles:
Ul.nav.menu_footer (margin: 0;) /*zero margins for the menu*/ ul.nav.menu_footer li ( /*design of menu text*/ font-family: "Lobster", cursive; font-size: 16px; line -height: 18px; ) ul.nav.menu_footer li.item-179 a ( /*Sitemap menu item*/ margin-left: 15px; color: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /*Menu item About the site*/ color: #5aa426; border-top: 3px solid #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Menu item Contacts*/ margin-left: 45px; border- bottom: 3px solid #0f70ad; color: #0f70ad; )
And finally, we separate the footer from the main part of the content:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*separate the footer from the main content*/
Save the style file, go to the site and look at the result:
So we created a footer for our site that looks much more fun than the standard one. This concludes this lesson, and in the next lesson we will check possible errors in adaptive design and correct some shortcomings. In addition, I advise you to read the article on how to quickly create a Joomla 3 template and in particular a footer from scratch using Bootstrap.
Loading...
