Computer literacy, assistance and repair

How to use CSS to push the footer to the bottom of the browser window. New Footer tags html design

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
We use it to the fullest!

New markup

Site header

Post #1

Here we will write the text of the first post.

Post #2

Here we will write the text of the second post.

Author of the post (article): Alexander Pobedinsky

Here 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 look at possible footer design options and some approaches to creating it.

What is a footer

The 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):

">

Now let’s remove the extra code from lines 210 to 217; as a result, the code for the footer will be like this:

">

Essentially, we removed everything that was possible, leaving only the ability to display modules in the footer; this line is responsible for this:

We save the index file, go to the site and refresh the page. The footer content disappeared, which is what we wanted. Now you can add new information to the footer at your discretion, but before adding it, it’s worth answering the question - what can be in the footer of the site?

What information to display in the site footer

In order to make the footer effective, it must contain information that may be of interest to site visitors. Depending on the focus of the site, this information may vary. Here is a small example of the same information that may be contained in the footer:

  • Extra menu- this menu can duplicate an existing one, or be unique. Duplicating the menu in the footer is useful when your site is often visited from mobile devices; the visitor, having scrolled to the very bottom of the page, can take advantage of additional site navigation.
  • Contact Information- for selling sites, or for sites that provide various services, the presence of contact information is simply necessary, and the footer is the place for it.
  • Social media buttons- in the modern world, social networks are everything for many people, so such information will never be superfluous.
  • Various links- for example, links to a site map, news feeds, etc.
  • Widgets- you can display in the footer information reflecting activity on the site, traffic counters, recent comments, etc.
  • Advertising- there comes a time when you want to get from the site not only its presence, but also profit, in this case the footer may not be a bad container for advertising.

Don’t try to cram all of the above into the footer of your site; an overabundance of information, like its absence, will also not lead to anything good.

On the other hand, it doesn’t matter what information will be contained in the footer of your site, the main thing is that it fits into the overall design and is beautifully designed.

Creating a footer for the site

Now let's discard the theory and proceed directly to creating the footer. There can be several ways to form a footer:

  • Auto- involves the use of various modules to display certain information
  • Manual- modules are not used, all changes are made manually using template file editing tools
  • Mixed- in this case, both of the above options are used together

Each of the methods is good in its own way, for example, at the initial stage, using modules will greatly simplify the task, and the method when modules are not used will speed up page loading. In any case, the choice is yours.

In order to consider all possible options, I will opt for the third option. This way, you will have a general idea of ​​what is being edited and how.

As an example, I decided to divide the footer into three vertical parts, links to certain pages of the site will be displayed on the left, some kind of logo will be in the center, and small text will be displayed on the right. Modules will be responsible for displaying the left and right parts of the footer, and we will write the logo manually in the index file.

First, let's create new positions for modules in the footer (we talked about how to do this in the lesson on setting up and editing templates) in the amount of two pieces. Since they will be located on the left and right sides of the footer, they have a corresponding name - footer-left And footer-right. We declare them in the file templateDetails.xml.

Now we make changes to the template index file, my code turned out like this:

baseurl. "templates/". $this->template . "/images/joom4all.png"?>" />

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:

baseurl. "templates/". $this->template . "/images/joom4all.png"?>" />

At first glance, it looks like an ordinary HTML tag for an image, but instead of the usual file path, PHP code is written. 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:

  • - start of php code
  • echo- responsible for outputting a string
  • $this->baseurl- this line returns the site name
  • templates/- here we indicate that the image is stored in the templates folder
  • $this->template- returns the name of the current template
  • /images/joom4all.png- path to the image inside the template root folder and name of the file with the image
  • ?> - end of php code

As a result of using this 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.

Often when installing buttons, banners, etc. there is a need inserting html, css and javascript codes in the body of the body and head tags. Failure to perform this operation correctly manually can damage the site and even completely disrupt its functionality.

A wonderful plugin has been created to automate this process, go to the settings in the admin panel and work with pleasure. It is easy to use and has the following features:

To enlarge the picture, click on it. To zoom out, click again.

1. Page Head and Footer. Adding code to the main page of the site.

Code to be added on HEAD section of the home (code that must be inserted into the header of the home (main) page). Allows you to insert meta tags, codes for advertising banners, buttons, etc. in the body of the tag . More often this is an invisible part of the code for lack of visual display on the site. The result of the visible part of the code will appear above the header on the main page.

Code to be added on HEAD section of every page (code that must be inserted into the header of each page). Adding Code to the Tag Body to the HEAD section. The result of the visible part of the code will appear above the header on all pages, including the main one.

Code to be added before the end of the page (code that must be inserted at the end (footer) of the page). Adding code to the footer on all pages before the closing tag. This only works for themes that have a footer and a footer.php file.

Almost all counters consist of two parts - these are codes for the invisible and visible (informer) parts of the counter. The invisible part code is inserted after the opening tag , as high as possible to the top of the page. To do this, you can use a plugin or make corrections directly to the header.php file, . The code of the visible part (informer) is inserted into the footer of the site using the Header and Footer plugin before the closing tag or in the sidebar using a widget.

2. Post content. Adding code to the beginning and end of the post on all category pages, when the post is fully displayed.

Code to be inserted before each post (code that must be inserted before each post). Insert code at the beginning of each category post (article) after the title, only if the article is shown in full.

Code to be inserted after each post (code that must be inserted after each post). Insert code after each category post.

3. Page content. Adding code to the beginning and end of the post of all static pages, when the post is fully displayed.

Code to be inserted before each page. Inserting code at the beginning of each post (article) of a static page after the title, only if the article is shown in full.

Code to be inserted after each page. The code will be inserted after the post on each static page.

4. Facebook. If you add a meta-feature og:image (Open Graph protocol, with which you can enter metadata in Social Graph format on resource pages), for example, a Faceboock contact list, then when you click the Faceboock button at the beginning or end of posts, you can control image selection on all pages, which will be sent to the user’s wall.

5. Snippets. It is possible to set excerpts that are sent to the user’s wall when they click the social network button located at the beginning or end of the post. Passages are sent as , where N is the number of the passage from 1 to 5.

6. Notes and parked codes. Notes

Hello, dear readers of the blog site. We continue the topic of block layout, which was started and continued in the three previous articles. In principle, we have already managed to create both a two- and three-column site layout, and we even managed to consider the nuances of creating a fluid layout.

In addition, in the first articles on website layout (), some basic concepts of webmastering were discussed, without understanding which it would be quite difficult to understand the nuances.

What problems did we have with our website layout?

Today we will try to solve one small problem that may arise with the layout we created earlier. Most often, this situation occurs when viewing it on large monitors (with high resolution) and when displaying a page with a small amount of information.

In this case, it may turn out that the footer will not be pressed to the bottom of the screen, but will be located almost in its middle height, which in most cases will look ugly and not aesthetically pleasing.

Still, in my opinion, it is necessary to press the footer to the very bottom of the site layout, and this will be especially true in the case when the page height is less than the height of the user’s screen. This can be represented schematically like this:

Those. The correct footer behavior for the case of a small amount of information on the page and a large user screen will be as follows:

To implement this, we need to perform a number of manipulations with the code of our layout. Moreover, we will make changes not only to the CSS style file Style.css, but also to Index.html, which contains the Html code and forms the Div blocks. But first things first.

As an example, we will use the three-column website layout we created earlier. In this case, Index.html will look like this:

Heading

Page Contents Page Contents Page Contents Page Contents

And the following CSS properties were written in the Style.css file:

Body, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( background-color:#FFC0FF; clear:both; )

Well, the layout itself looked something like this:

As you can see, the footer is not pressed to the bottom and, therefore, does not meet our requirements (it is always located under the lowest column), so we will have to make adjustments to the code. The same thing can be done for a two-column layout, and for a rubber layout too. The method is universal.

How to push the footer to the bottom of the website layout

So, we need to move the Div container with the footer to the bottom of the screen. To do this, you will first need to set the height of the entire page to one hundred percent (it will occupy the entire screen). This will be necessary in order to then change the size of the main block with the layout to 100%.

The entire content of the site page is placed in the opening and closing Body tags, and therefore we need to add another CSS property for the Body tag in Style.css, setting the height to 100%:

Body, html ( margin:0px; padding:0px; height: 100%; )

This will not affect the appearance in any way yet, but now the main blog can be stretched to the full height of the screen. Those. it was a kind of preparatory stage.

Basic CSS properties, if desired, you can look at. Now let’s set the container Div that contains our entire layout to a minimum height of 100%:

I also want to highlight it (div with id="maket"). To do this, I’ll give it a frame using the corresponding Border() property:

The border: solid 3px black property allows you to set a solid border (solid) 3 pixels thick in black for this container. This will allow you to clearly see that the container with the layout has stretched to the entire height of the screen, even with a small amount of information on the page:

Now we will need to take the footer block out of the general container and place it below, immediately after the general one. What will it give? And the fact that, finally, the footer in the layout will deign to go down, and will not, as before, be pressed against its longest column. In this case, Index.html will look like this:

Heading

Left column Menu Menu Menu Menu
Page Contents Page Contents Contents

Please note that the block with the footer is no longer located inside the general container (maket), and therefore its width is no longer regulated by the CSS properties specified for maket in the Style.css file. The width of the footer will stretch across the entire screen, but it will still be located at the bottom of the screen, immediately below the main block:

But again a problem arises, because in order to see the footer, you now have to scroll the screen in the browser (see the scroll bar in the picture above).

This happens because the main container (maket) occupies the entire height of the screen (this is determined by the min-height property: 100%), and the footer is located immediately behind it and to view it you will have to scroll, which is not very convenient and functional .

You can solve this problem by setting a negative padding for the Div container with the footer so that it moves upward by a distance equal to its height. In this case, the footer container will overlap the main one and fit into the height of the browser screen (i.e., you will not need to scroll to view it).

But in order to set a negative offset from the top, you need to know this very height of the footer, but we don’t know it yet.

Therefore, first we will set the height of the container containing the footer by setting the corresponding property in Style.css:

#footer( background-color:#FFC0FF; clear:both; height: 50px; )

And then we set a negative margin for it at the top to a height equal to its height:

This will allow the footer to rise up exactly to its own height and thereby fit into the browser screen (now we can remove the CSS property border: solid 3px black from the maket rule, so that the thickness of the border does not prevent our entire layout, including the footer, from fitting in the height of the screen) :

As you can see, now the scroll bar does not appear in the browser and our entire three-column block-based site layout fits on one screen (in case there is little information on the page) and has a footer located at the very bottom. Which is exactly what we needed to do.

We insert the spacer and fight Internet Explorer

But a problem arises, which will appear only when there is more information on the layout page and the following situation may arise:

It turns out that a situation may arise when the information in one of the layout columns overlaps the footer, which will not look nice. This happens because of the notorious negative padding that we set for it and which helped raise our basement against the main layout container.

Those. It turns out that at the bottom of the screen there are two blocks overlapping each other in the basement area.

The solution to this problem is to add a new empty Div container (the so-called spacers) into the main container of our layout (maket), in the place where the block with the footer was previously located.

By setting this new container to a height equal to the height of the footer, we can avoid information from the main container colliding with the block with the footer. Let's assign an ID () to this container called Rasporka and as a result the Index.html of our three-column layout will look like:

Heading

Left column Menu Menu Menu Menu
Page Contents Page Contents Page Contents Pages Pages Pages Pages Pages

And in Style.css we will write for this ( , which sets the height of this spacer container equal to the height of the basement:

#rasporka ( height: 50px; )

As a result, the footer will be pressed from below not to the information contained in the main container (for example, the text in the highest column), but to an area equal to the height of the footer with a spacer container containing no information.

This way we avoid collisions and distortions in our three-column layout. Everything will be clear and beautiful (delicate and noble):

As I mentioned above, the width of the footer must now be set separately, because... this container is no longer part of the main one. To do this, you need to add additional properties for the Footer to the CSS file, allowing you to set its width and align it horizontally in the middle of the screen.

It makes sense to set the width equal to the width of the entire layout using the Width property, and horizontal alignment can be done in the same way as we did for the entire layout on a block layout.

Thus, we will need to add additional properties for the ID Footer:

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

Using the width:800px property, the width is set to 800 pixels, and using the two properties margin-left: auto and margin-right: auto, the indentation to the left and right of the footer is set automatically, as a result of which these indents will be equal and our hero will be aligned to middle:

Well, it seems like there’s nothing left to improve, but that wasn’t the case. As always, our favorite browser Internet Explorer 6 does not understand something from the CSS properties we use. In this browser (and, perhaps, in some other old ones too), despite all our efforts, the footer will not be pressed to the bottom, but will still stick to the highest column of the site layout.

All this happens because ( does not understand the min-height: 100% property, which we used to set the minimum height of the main block equal to the screen height.

Therefore, to solve this problem we will have to use a so-called hack that allows us to explain (on our fingers) to older browsers what to do. Before the list of CSS properties for maket, you will need to insert the following combination:

* html #maket ( height: 100%; )

This rule will be applied only to the Internet Explorer 6 browser; others will not take it into account and implement it.

So, the final look of Style.css with the footer pressed to the bottom of the screen will be as follows:

Body, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; ) #rasporka ( height: 50px; )

Well, the final form of Index.html was given just above. That’s it, this series of articles devoted to block layout of 2 and 3 column fixed and fluid website layouts can be considered complete.

You can also watch the video “Working with Html div tag”:

Good luck to you! See you soon on the pages of the blog site

You might be interested

Block layout - We create two-column, three-column and fluid layouts for the site
DiV layout - Create blocks for a two-column layout in HTML, determine their sizes and set positioning in CSS

Share with friends:
Related publications