Footer at top of page!?

Welcome to the forums, @lennycourvoisier.

Do you have a link to a live page where we can see the issue? If not, you’ll need to post the HTML and CSS here, or set up an example in CodePen (or similar). We can’t diagnose the problem without seeing the code.

Edit: Thanks for adding that code.

For future reference, you need to format code in your posts to have it show correctly. You can highlight your code, then use the </> button in the editor window, which will format it, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

ohkay i just posted the code. thanks for the reply!

1 Like

Oh okay thanks for the advice! :smiley:

I’m just about to leave for the evening, but two points to start with:

<link rel="stylesheet" href="style.css">

That should be in the <head> section of your page; it’s somehow wandered into the <header>.

<hr style="width: 100%; height: 3px; margin: 20;">

Adding inline styles is generally bad practice; use CSS to style elements.

In general, elements will follow one after another on the page, and your footer will sit below the navigation bar, because you have no content in between.

If you want the footer to always sit at the bottom of the viewport when there is not much content, then you need to use a “sticky footer”. Hopefully somebody else will be along shortly who has time to explain this better.

1 Like

yeah i was wondering why it was iin the header as well. thats how it was in the template i just updated that. and for the hr tag i was trying different things to see if i could get it to show up i usually style in css. it isnt showing either way though so i have no clue lol. thank you so much for the quick replys and all the help! i really appreciate it :slight_smile:

1 Like

Hi,

It’s not clear where you want the footer to be exactly but it is showing where I would expect from your code. It follows in the flow after normal in-flow content.

Your nav has been positioned using relative positioning which is a beginners mistake and you should not use relative positioning for this.

nav>a {
	position: relative;
	top: 90px;
	right: 50%;
	display: inline-block;
	font-size: 13px;
	line-height: 40px;
	padding: 0 2em;
	-webkit-transition: all .3s ease;
	background-color: grey;
	background:rgba(0,0,0,.6);
	color: white;
	margin: 0;
}

Relative elements are only moved visually but they still occupy the physical space in the document that they always did. A relative element is offset from its original position in the flow but the space that it previously occupied is always preserved as though the element had not been moved. It’s new position has no effect on the flow of the document and therefore will overlap if anything is in the way and all other elements on the page believe the element to be where it originally was.

Suffice to say don’t use relative positioning to move things around unless it is for some more subtle overlapping effect.

You could have use a margin-top to move the nav down the page and then the footer would naturally follow after the header element as expected.

Note that when you use multiple classnames you don’t add multiple attributes.

e.g. This is wrong:

<div class="container" class="wrapper">

It should be this:

<div class="container wrapper">

Your hr isn’t working because you haven’t given it a background to show, and you haven’t cleared the floats above so it snags, and you missed the unit from the value (px missing), and you set width:100% and also a margin:20px so it would be 40px too wide anyway :slight_smile: These again are all common beginner mistakes so don’t take it to heart as we all made the same mistakes at one time.

The rule should be this:

<hr style="height: 3px; margin: 20px;background:#000;clear:both">

Of course you should really add a class and style it from the css instead.

You have a lot of css posted above so I suggest that you start again but only with the css that you are using so far so that you can get your header and footer correct before moving on to other things.

You will need to position things without using relative positioning (and preferably not absolute either unless its a controlled space). Make sure you clear and contain your floats when needed.

Run your code through the validator as you have errors like this in your code:

.learn-more:hover {
 background: #* {
 margin: 0;
 padding: 0;
 outline: none;
 border: none;
 -webkit-box-sizing: border-box;
}

This reset rule you are using is too broad and will mess up a number of default elements like inputs and may harm accessibility aids like focus that use outline.

* {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	-webkit-box-sizing: border-box;
}

Instead look at some proper reset or normalise css (google it) to cater for the elements properly

You are also repeating things unnecessarily.

html {
	height: 100%;
	font-family: Helvetica, arial, sans-serif;
	font-size: 12px;
}
body {
	background: url('brushed_alu.png');
	height: 100%;
}
html, body {
	height:100%;
	background:center no-repeat fixed url('cyber.jpg');
	background-size: cover;
}

Don’t apply styles willy nilly to the html element but instead use the body element. The only basic rules you need for the html element are to set margin and padding to zero and when needed height:100% (but only when needed).

The rules above could be reduced to this:

html,body{
	margin:0;
	padding:0;
	height:100%;
}
body {
	background:url('cyber.jpg') no-repeat fixed 50% 50%;
	background-size: cover;
        font-family: Helvetica, arial, sans-serif;
	font-size: 12px;/* 12px is much too small for body text !! */
}

If you have a drawing of how the header should look then we can give more specific advice.

5 Likes

Thank you so much for all that advice! Very very helpful forum :slight_smile:
Now the css is copied from a template ; but I’ll be sure to clean it up. I decided to scrap it and start over and use all your advice. Now the only other problem I’m having is when I open it in chrome it looks how I want . But other browsers such as IE or Firefox it completely shifts everything and looks messy . What could be causing this to happen? Thanks again for all the great advice its VERY much appreciated :slight_smile:

It might help while you are learning if you set up a codepen free account and in that way you can post your code online so that we can see exactly where the problem lies. :slight_smile:

All modern browsers behave much the same these days and display valid code as expected. Once you start seeing major differences then that usually means you have errors in the code and the browsers can’t work out what you meant as all error handle differently.

Make sure you have a current doctype (the html5 doctype is recommended these days) or browsers revert to quirks mode and in quirks mode there are subtle and not so subtle differences.

As mentioned above first run the html through the html validator and the css through the CSS validator to ensure code is error free.

If you have done all the above and the page still looks different then here may be errors either in your code logic or your expectation :wink:

For example you may be opening various browsers at different widths and if your page contains absolute elements placed from the viewport you will find that things won’t look the same because they are placed with fixed dimensions rather than adapting responsively. If an element is placed 500px from the right but the viewport is only 300px wide then the element will be invisible.

If you can get a demo up and running on codepen then it will be much easier to collaborate with you as we can easily fork and play with the code to offer pertinent advice.

1 Like

so when i open my site in Chrome it looks the way i want it to be. but when i open it in internet explorer or firefox its completely messed up :confused: idk what im doing wrong or how to fix it

Have you tried running your HTML through
https://jigsaw.w3.org/css-validator/ (assuming it’s HTML5)

and your CSS through
https://jigsaw.w3.org/css-validator/

It’s always a good place to start.

1 Like

Threads merged as previous information is relevant to the discussion :slight_smile:

3 Likes

Lenny, post screenshots showing comparisons of desired and “messed up” renderings. We cannot read your mind. Your verbal descriptions are a bit weak; screenshots would help.

1 Like

Hello everybody ; apologies for my absence. I really appreciate all the support from you guys ; I finally got it to work ! But now I’m actually running into an issue with different screen resolutions :frowning: so I got the footer in place I got everything looking good in all browsers now just the different screen resolutions. Thank you guys so much for everything!

https://www.dropbox.com/sh/7wbuiag308y7qam/AAB7JO13kScHcZAvXhmkndHDa?dl=0 this is all the files ; excuse the slopy site lol thanks again guys

Hi,

I’ve already given you the answers to some of your problems but you seem to have continued with the same code that I told you was wrong :slight_smile:

Let’s make a start :slight_smile:

Right at the beginning you have this:

*{
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  -webkit-box-sizing: border-box;
}
*:before,
*:after{
    -webkit-box-sizing: border-box;
    
}

I told you not to do that as you will lose all borders on inputs and cause accessibility issues with outline. Also the last rule is a webkit only rule.

-webkit-box-sizing: border-box;

That means only -webkit browsers get the box-sizing rule but all other browsers will get the normal box model instead and in one fell swoop you have created a discrepancy between the major browsers. Never use a pre-fixed rule without using the valid proper rule otherwise no on else can play.

The correct way to set box-sizing:border-box is like this:


html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Modern browsers understand the un-prefixed version but if you need to support older webkit then add the prefix before the valid rule. The valid rule should always be last in sequence.

If you don’t understand what box-sizing does then look it up :slight_smile: Never use a rule you don’t understand. You don;t have to know all the ins and outs but you need to have an idea why a rule is in place.

You haven’t changed the html and body elements as I suggested either.

Your pagetitlebreak rule is causing a horizontal scrollbar on the viewport. A horizontal scrollbar is your worst enemy in responsive design so always seek to eliminate it. (I told you this in my last post also but you did nothing about it ;)).

.pagetitlebreak {
	position: relative;
	left: 50px;
	width: 100%;
	height: 2px;
	background: black;
	clear: both;
}

Think about the rules you are using and most of it becomes common sense. You have said width:100% and then you say left: 50px. That means the element is now 100% wide plus moved 50px to the left. How can that ever fit in any container? It will always be too big.

You will rarely use position:relative to move things so stop doing it as you have done it a number of times. In most cases a margin will do. Position:relative does not move things physically but visually as the space they originally occupied is always preserved. That means its never really moved at all as far as other elements on the page are concerned. Positoin:relative (with co-ordinates) is usually used for more subtle overlapping effects and not to position elements with other in flow elements.

Remove the width:100% and use a margin and it will fit.

This also brings up another issue in that you have created a 50px gutter down the left and right of the page by applying movement to all the individual items. You would have been better to use your page wrap and avoid all these unnecessary rules.

Do this:

.page-wrap {
/*width: 100%; remove*/
margin: 0 50px;/* add */
position: relative;
}

There is no need to add width:100% to block elements as normal block elements will stretch to fill the container anyway (they are width:auto). This is different for absolute elements and floats which shrink wrap and need a width if content width is not sufficient.

Your transbox and the iframe next to it are placed using methods that are unmanageable. Don’t drag things up with magic numbers as that is not a maintainable or workable approach.

You just needed to float the blocks next to each other, or use the display:table-cell approach or for modern browsers use flexbox.

The image in the transbox is a fixed width and height and will not resize and is placed absolutely when it does not need to be. Avoid percentage margins all the time as that relates to the width of the element and if you have multiple different sized elements then they all move at a different rate and look odd.

If you set a max-width:100% and height:auto to the biopic class then the image will resize smaller when the container squeezes it. You will need to remove the absolute psitioning form the image and let the container know it’s there.

}

img.biopic {
    margin:10px 20px;
    border-radius: 6px;
    max-width: 100%;
    height: auto;
}

Your media query approach is flawed:

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

You are testing for devices and orientation and these days there are just too many devices and resolutions to test for so forget about them all and only apply media queries when your design looks awkward or doesn’t fit. Open and close the browser window and if something overlaps or looks awkward add a media query at that width (chrome devtools will tell you the width) and make the design fit better. If you do this all across the range of the browser window you will automatically cater for all devices with just a few well placed media queries (don’t overdo it as you should have some elasticity built into your site to cater for much of the resizing). Don’t fall into the trap of detecting devices as they are changing practically daily.

Start with the header and close the browser window and you will see at some point your nav overlaps (at 1380px approx). Put in a media query and either move the nav to the right or move it under the logo but remember that may mean adjusting the height of certain things.

Generally you should avoid setting height on fluid content where possible though because you cannot control that easily.

Try to keep elements in the flow and not absolutely place them unless the space you are placing them is completely controlled.

Your footer is unworkable and use magic numbers that make no sense in terms of a usable layout. You just moved it with relative positioning using guesswork. That will never work and will never be usable. Just let the footer follow the content naturally but if you really want a 'sticky footer’ then you will need to use techniques that are well above your skill set at the moment and likely to confuse you even more. In web design simple is usually best :slight_smile:

I need a rest now, I’ll come back to this later :slight_smile:

5 Likes

Ok here’s roughly how I’d go about the home page.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- must have viewport meta tag for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
img,a img{border:none}
.clearfix:before, .clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.hr {
	height:3px;
	background: black;
	clear: both;
	color:#000;
	border:none;
	margin:20px 0;
}
html, body, .page-wrap {
	margin:0;
	padding:0;
	height:100%;
}
body {
	background:url('cyber.jpg') no-repeat fixed 50% 50%;
	background-size:cover;
	padding:0 50px;
	font-family: Helvetica, arial, sans-serif;
}
.page-wrap {
	display:table;
	width:100%;
	max-width:1480px;
	margin:0 auto;
}
.header, .footer, main {display:table-row}
/* height 1px on the header and footer is the sticky footer technique */
.header, .footer {height:1px}
.footer {
	font-size: 18px;
	text-align: center;
}
.logo {float:left;}
.logo img{max-width:100%;height:auto;}
.breadcrumbs {
	border-bottom:2px solid #000;
	font-size: 30px;
	font-weight: bold;
	position:relative;
	z-index:2;
	margin:0;
	clear:both;
}

/* navigation*/
.navbaritems {
	float:right;
	margin:70px 0 10px
}
.navbaritems > a {
	display: inline-block;
	font-size: 13px;
	line-height: 40px;
	padding: 0 2em;
	transition: all .3s ease;
	background-color: grey;
	background:rgba(0,0,0,.6);
	color: white;
	margin: 0;
}
.navbaritems > a:hover {
	background: white;
	color: black;
}
/* end navigation */

/* main content */
.content-wrap {
	padding:40px 0;
	display:flex;
}
.content-wrap > div {
	flex:1 0 0;
	margin:0 20px;
}
.iframe-wrap {
	float:right;
	width:52%;
	padding:39% 0 0;
	margin:8px;
	position:relative;
	box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
	border-radius: 5px;
}
.iframe-wrap .iframe {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	border-radius: 5px;
	border:none;
	background:#fff;
}
.transbox {
	float:left;
	width:40%;
	padding:20px;
	background-color: #181B1B;
	border: 1px solid black;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 10px;
	box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
}
.transbox p {
	font-size: 30px;
	color: #fff;
	margin:10px 5px;
}
.transbox img {
	margin:0 0 10px;
	width:100%;
	height:auto;
	display:block;
}
h1.biotext {
	font-family: florence, cursive;
	text-align: left;
	font-size: 30px;
	color: white;
	font-weight:normal;
	margin:0;
	padding:5px 0 0;
}
@media screen and (max-width:1280px) {
	h1.biotext {font-size:26px;}
}
@media screen and (max-width:950px) {
	.header{text-align:center}
	.logo{float:none;display:inline-block;width:100%;max-width:450px;}
	.logo img{width:100%;height:auto}
	.navbaritems{float:none;display:inline-block;margin:10px 0}
	.breadcrumbs{text-align:left}
	.content-wrap,.transbox,.iframe-wrap{display:block;width:auto;float:none;}
	.content-wrap > .transbox,.content-wrap > .iframe-wrap{margin:0 0 40px}
	.iframe-wrap{padding-top:60%;min-height:250px}
}
@media screen and (max-width:690px) {
	body{padding:0 10px}
	.navbaritems a{margin:0 0 10px}
	.breadcrumbs{text-align:center}
}
@media screen and (max-width:420px) {
	.navbaritems a,.navbaritems {display:block;width:auto;}
}

</style>
</head>

<body>
<div class="page-wrap">
  <header class="header">
    <div class="header-left logo"><img src="sega.png" width="450" height="125" alt="Allen Trey Productions"></div>
    <nav class="navbaritems"><a href="#">Home</a> <a href="inspiration.html">Inspiration</a> <a href="blog.html">Blog</a> <a href="contact.html">Contact</a> </nav>
    <div class="breadcrumbs"><b>Home</b></div>
  </header>
  <main class="content">
    <div class="content-wrap clearfix">
      <div class="transbox"><img class="biopic" src="sudionew.png" width="500" height="306" alt="biopic">
        <h1 class="biotext"> Names Allen Trey 23 year old Producer, rapper, singer, and songwriter from Jersey. Check out what <strong><em>The Wave</em></strong> brings to the shore </h1>
      </div>
      <div class="iframe-wrap">
        <iframe class="iframe"  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/191950793&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"> </iframe>
      </div>
    </div>
  </main>
  <footer class="footer">
    <hr class="hr">
    <!-- hitwebcounter Code START -->
    <div class="sitecounter"> <a href="http://www.hitwebcounter.com" target="_blank"> <img src="http://hitwebcounter.com/counter/counter.php?page=6521120&style=0038&nbdigits=5&type=ip&initCount=0" title="Must See Places In Paris" Alt="Must See Places In Paris"> </a> </div>
    <p class="footer-txt">Allen Trey Productions &#169; 2016</p>
  </footer>
</div>
</body>
</html>

Copy and paste that into your folder and call it something else for testing and then run the page to see how it looks and how it works at different resolutions. It has the sticky footer in place and uses media queries to cater for smaller screens.

Note you must have the viewport meta tag in place or mobile won’t obey the media queries at the correct widths.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I don’t expect you to understand it all but try to disect and follow how everything works rather than just copying and pasting. Ask questions when you are not sure.

Hope that helps.:slight_smile:

EDIT:

I’ve put up a codepen demo so you can see it straight away but of course all the images will be missing as I didn’t upload them.

6 Likes

Wow! I have a lot to learn lol please excuse my ignorance . This was very very helpful though ; it looks great! I don’t know what a lot of the code is or why it’s where. But I’ll try to dissect it like you said . Is there anywhere I can learn all of this? Again thanks so much man! I really do appreciate everything! :smiley:

There are lots of places to learn. (Take a look at what SitePoint Premium has to offer.)

A handy reference for CSS is http://tympanus.net/codrops/css_reference/ It gives good explanations of the various properties.

2 Likes

If there is anything you are not sure of then just ask.

The best way to learn is to test the code and play with it and see what happens.:slight_smile:

3 Likes

Oh yes, how true. this is on the long run the best advise and the best with that is > it applies to every subject. get oneself a good book or a site linke sitepoint and learn it - and best learning is by doing.
Sorry PaulOB - that was not a real correct answer to your advice, 'cause it seems you are knowing what you are writing. anyway - have a good day. greeting from vienna

1 Like