Why isn't my footer at the bottom?

[ed222gg]

Why isn’t my footer at the bottom? What part do I have to change? :)

https://projekt-wordpress-ed222gg.c9users.io/personal/

[Atelierbram]

You can search for examples of “sticky footer” or maybe do something like:

body {
  position: relative;
  min-height: 100%;
  min-height: 100vh;
}
footer {
  position: absolute;
  right: 0;bottom:0;left:0;
}

[ed222gg]

No, if I chanche to that, other things will fuck up. AAhhh, what have I done. Everything looks like shit. Like my logo with the tree, looks fine at the front page but not in any other. And my footer… What should I do?

the page that is under construction is
1. The frontpage https://projekt-wordpress-ed222gg.c9users.io/
2. Möt linneuniversitetet –> Personal https://projekt-wordpress-ed222gg.c9users.io/personal/
3. Utbildning –> Välj program eller kurs https://projekt-wordpress-ed222gg.c9users.io/valj-program-eller-kurs/
4. Logga in https://projekt-wordpress-ed222gg.c9users.io/logga-in/

Please take a look around and tell me what I should change so I dont fuck it up. :P I’m very good at that

[I.m.learning]

I think my post was removed; but,

WHAT DID YOU DO?

Hey, make sure you are making a backup of EVERYTHING you plan on changing. Usually just copy the file/folder and paste in the same location. DO NOT EDIT THE COPY!

If you mess up enough, just copy the contents of your “copy” file and paste it back to your original file contents.

Let me see if I can help you. I been messing around with trying to add text to visited links and need a break anyways. If I am going to fix something today, it might as well be someone else’s!

[Atelierbram]

I don’t see the position: relative on the body element, which is needed when you want a sticky footer with position: absolute; this will fix most of the issues.

[I.m.learning]

You have really made a mess of things! I’m trying to look at it and you have a lot of unnecessary codes; mainly the reason we use div containers is to contain that content in a divider; hence the “div” You have 4 divs in one div to contain an unordered list with one item!

One thing to think of is to use one page as a template; once you have perfected that page, use it as the template for the others.

I like this page:
https://projekt-wordpress-ed222gg.c9users.io/

I’m writing this and see someone posted…if you want it “fixed,” use fixed, not relative.
This is Bootstrap:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

[I.m.learning]

@Atelierbram
Chris posted something about positioning.

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

[I.m.learning]

@ed222gg
Have you thought about PHP for your pages?

I am using dozens of pages that use the same format.

First off, you can take half the code you have, place that into a text file, have PHP, JS, or even HTML read that file.
If you are using the same header, you can change the title, the canonical, description, and other information. The problem is:

I have to use 2 pages for each to get the order right.

In the PHP page I set the variables.
Then I create a “content” page in html.
The content is specific for that page.
I also have an “includes” folder.

My includes is where I make the changes to ensure all my pages are the same.

These includes are : header.php, navigation.html, preferences.html, and footer.html…

Then I use variables in my header.php

All data that WILL NOT CHANGE are kept as-is; the info that needs changing are:

<title><?php echo $pageTitle;?></title>
<meta name="description"content="<?php echo $pageDescription;?>">
<meta name="keywords"content="<?php echo $pageKeywords;?>">
<link rel="canonical" href="<?php echo $canonical;?>">

In the page I am working on, I set as a PHP page and set those variables.

For example, I am writing up character sets; this page is “alt_codes.php”; which has this as the only content:

<?php
$pageTitle="Character Sets [Alt Codes]";
$pageDescription="Page to describe character sets, many refer to these as Alt Codes, and much more ";
$canonical="http://localhost/honestlee/Topics/alt_codes.php"; 
$pageKeywords=" alt codes, character sets, ASCII, ANSI, Binary, memory size, file size"; 
include("../include/header.php"); 
include("../include/navigation.html"); 
include("../content/alt_code.html"); 
include("../include/preferences.html"); 
include("../include/footer.html");?>

It makes changing pages easier.

You should use a styles page, but then, in certain circumstances, you can reference those specific pages. As in, people use separate styling sheets for their @media inquiries. If <768, then use this page; between this and that, use this page, anything over, use this page. The same can be used for scripts.

In fact, your scripts can be put into a text file and use “file_get_contents” and it will pull the data from that file. It will make you page easier to manage.

You have a page that looks absolutely beautiful, there’s no reason your other pages shouldn’t look the same. Using reference pages, as in PHP, will allow you to create other pages faster. I cannot make heads or tails of your code because there is a lot of code that is not needed.

This is my opinion, we all have them. I like opinions because it is a collaboration of multiple experiences all in one place. That’s what I initially thought Stack Overflow was…I was wrong there and it cost me.

[Atelierbram]

@lip_lostinprogramming So?

In that post on absolute positioning:

Remember that these values will be relative to the next parent element with relative (or absolute) positioning.

Hence my remark on putting position: relative on body

[I.m.learning]

@Atelierbram

Let me help you here a minute because you just defined ABSOLUTE, not relative. This is from Chris Coyer, the owner of this website, the link I referenced earlier.

Static. This is the default for every single page element. Different elements don’t have different default values for positioning, they all start out as static. Static doesn’t mean much, it just means that the element will flow into the page as it normally would.

Relative. This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be.

Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the html element itself meaning it will be placed relatively to the page itself.

Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself.

If they place the footer at the bottom of the body, there’s no reason to use any of them because it is the last item to be displayed (static). The issue I saw was too much redundant code. Also, tags were closed off in the wrong place.

[Atelierbram]

@lip_lostinprogramming

Print it out, frame it in, and hang it above your PC to look at ;)

I guess you are missing my point, … yes that is what I meant: position: absolute on the footer, but you need position: relative on the next parent -> the body element, for this to work. But I am repeating myself, going to call it a day now.

[I.m.learning]

Well maybe you need glasses because the original post was:

Why isn’t my footer at the bottom?

I guess if you want to add redundant code, go ahead. Because as I stated, if the footer is the last item to be placed in the html document there’s no need to use any code at all.

Redundancy is good for many things, coding isn’t one of them.
:-þ

I should know, I have a lot of it I still need to get rid of.

[I.m.learning]

@ed222gg

Where you at with your code? Any progress?

[bearhead]

@lip_lostinprogramming

I don’t think you understand the use-case for a sticky footer. If you can be sure that the content of a webpage will extend further than the height of the user’s browser window, then yes, simple static positioning should suffice. However, if the page has a short amount of content on it, a statically positioned footer may not render at the bottom of the user’s browser window.

A sticky footer will guarantee that it is always placed at the bottom of the browser window AND after all the content, regardless of the length of content on the page.

The advice Atelierbram gave was very good.

[ed222gg]

Oh, i know I made a mess out of my webbsite. I’ts horrible. You guys have give me some good tips. I’ve have a lot to learn. I have come to the conclusion that not have a sticky footer. But before it was floating all over the place, but that is fixed now. Thanks for all the help.

[Author]

Posts