Kevin Powell - Community•2y 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•2y ago

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

vince•2y ago

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

vince1444

CodePen

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

...

Senra•2y ago

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

vince•2y ago

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

Senra•2y 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•2y ago

Ye! Looks like the one

thebigpalOP•2y ago

html

html

message.txt

thebigpalOP•2y 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•2y 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•2y 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•2y ago

thebigpalOP•2y ago

thebigpalOP•2y ago

now there's this

Senra•2y ago

This is called overflow

thebigpalOP•2y ago

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

Senra•2y ago

For real? 😂

thebigpalOP•2y ago

fr bro I have like 1 dollar left

Senra•2y ago

Nah it's all right

thebigpalOP•2y ago

aigh then

Senra•2y 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•2y ago

thanks

Gaming

Programming

How to create a header, main & footer?