Kevin Powell - Community•17mo ago

How to create a header, main & footer?

I've been trying to create a header, footer & main. I kinda came up with a okay result, but it's a little bit buggy and I think it's because I don't know how to make it the correct way. Can someone please guide me step by step how to do it the correct way? Including zooming in and out and all that. I have $1 on PayPal, I'll pay. I just want to figure this out.

21 Replies

Senra•17mo ago

Can you give more context? maybe share what you have done in a codepen ?

vince•17mo ago

https://codepen.io/vince1444/pen/QWJVzWv\

vince1444

CodePen

https://discord.com/channels/436251713830125568/1133434848627920907

...

Senra•17mo ago

Damn. Use a grid on the body... Never thought of that.

vince•17mo ago

I'm not going to be able to find it but Kevin did a video on it

Senra•17mo ago

Guess it is this one. https://youtu.be/yc2olxLgKLk?t=32

Kevin Powell

YouTube

Easy sticky footer - stop a footer from floating up a short page!

Having the footer of the page just floating around in the middle just looks... bad. So let's see how we can fix it with both flexbox and grid in this video! As an added bonus, both of them are really easy to do! This CSS-Tricks articles has a few other ways, including different ways to do it with flexbox and grid in case you run into issues wit...

vince•17mo ago

Ye! Looks like the one

thebigpalOP•17mo ago

html

html

message.txt

thebigpalOP•17mo ago

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*Header*/

header {
    background-color: #101010;
    padding: 1rem;
    text-align: center;
}

.inner_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inner_header li {
    display: inline-block;
    padding: 0 .50rem;
    color: #f1f1f1;
}

.inner_header li a {
    color: #f1f1f1;
}

#a1 {
    padding: 0 .25rem;
    color: Gray;
}

/*Main*/

main {
    flex: 1;
    background-color: #333333;
    text-align: justify;
    padding: .5rem;
    font-size: 1rem;
    color: #f1f1f1;
}

/*Footer*/

footer {
    background-color: #101010;
    padding: 1rem;
    color: #f1f1f1;
    text-align: center;
    font-size: .75rem;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*Header*/

header {
    background-color: #101010;
    padding: 1rem;
    text-align: center;
}

.inner_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inner_header li {
    display: inline-block;
    padding: 0 .50rem;
    color: #f1f1f1;
}

.inner_header li a {
    color: #f1f1f1;
}

#a1 {
    padding: 0 .25rem;
    color: Gray;
}

/*Main*/

main {
    flex: 1;
    background-color: #333333;
    text-align: justify;
    padding: .5rem;
    font-size: 1rem;
    color: #f1f1f1;
}

/*Footer*/

footer {
    background-color: #101010;
    padding: 1rem;
    color: #f1f1f1;
    text-align: center;
    font-size: .75rem;
}

bassicaly I created a div and put display to flex and flex direction to column, also giving it 100vh. I then put flex: 1; to the main

Senra•17mo ago

Remove that. It does not work because the html size depends on the content. So If you have less content, it will not fill the page.

/*Header*/

header {
    background-color: #101010;
    padding: 1rem;
    text-align: center;
}

.inner_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inner_header li {
    display: inline-block;
    padding: 0 .50rem;
    color: #f1f1f1;
}

.inner_header li a {
    color: #f1f1f1;
}

#a1 {
    padding: 0 .25rem;
    color: Gray;
}

/*Main*/

main {
    background-color: #333333;
    text-align: justify;
    padding: .5rem;
    font-size: 1rem;
    color: #f1f1f1;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
}

/*Footer*/

footer {
    background-color: #101010;
    padding: 1rem;
    color: #f1f1f1;
    text-align: center;
    font-size: .75rem;
}

/*Header*/

header {
    background-color: #101010;
    padding: 1rem;
    text-align: center;
}

.inner_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inner_header li {
    display: inline-block;
    padding: 0 .50rem;
    color: #f1f1f1;
}

.inner_header li a {
    color: #f1f1f1;
}

#a1 {
    padding: 0 .25rem;
    color: Gray;
}

/*Main*/

main {
    background-color: #333333;
    text-align: justify;
    padding: .5rem;
    font-size: 1rem;
    color: #f1f1f1;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
}

/*Footer*/

footer {
    background-color: #101010;
    padding: 1rem;
    color: #f1f1f1;
    text-align: center;
    font-size: .75rem;
}

Try replacing your css with this. See what happens

thebigpalOP•17mo ago

well, it does fit the page but there's a bug. If I shrink it down too much the bottom sidebar will appear, and when scrolling to the right there is this white space

thebigpalOP•17mo ago

thebigpalOP•17mo ago

thebigpalOP•17mo ago

now there's this

Senra•17mo ago

This is called overflow

thebigpalOP•17mo ago

okay. how do I fix it? oh nvm it works now thanks what's your paypal @senrastalker

Senra•17mo ago

For real? 😂

thebigpalOP•17mo ago

fr bro I have like 1 dollar left

Senra•17mo ago

Nah it's all right

thebigpalOP•17mo ago

aigh then

Senra•17mo ago

Also remove the div container. Or simply just copy paste the HTML and CSS from this codepen. https://codepen.io/senra/pen/wvQERrd

thebigpalOP•17mo ago

thanks

Gaming

Programming

How to create a header, main & footer?