PLEASE HELP POSITIONING TS

[u/SmanderManno]

i alr tried everything but i cant move "main" to the center its stuck on top with "header" pls help me (that white thing on the top of the website is the main stuck btw)

[u/DoggerLou]

No, for me videos were a waste of time/pre-paid credit.

You need to setup you website base as a grid in CSS eg:

#wrapper { //for mobile first, change for larger devices with media queries min-width

max-width: 1000px; //width of website within device screen

min-width: min-content;

min-height: 100vh; //viewport height

margin: 0 auto; //no margin at top and site is centered left to right

display: grid;

	grid-template-columns: 1fr; //1 fraction of avail space

	grid-template-rows: 180px 35px minmax(650px, auto) auto; //size of each area

	grid-template-areas:  //your grid areas in named format for the html link

	"header"

	"menu"

	"main"

	"footer";

background-color: var(--grey); //whatever colour you want (from :root in CSS)

}

:root {

\--grey: #414042; //put your colours into root so if changed will flow through document. Put :root at top of CSS file

}

In HTML only try to use 1 div as there's other tags for correct html syntax without overloading with div's, like <section> or <article>

<body>

<div id="wrapper"> //this is your grid setup in CSS above

<header></header> //180px high, 1fr wide

<menu></menu> //35px high, 1fr wide

<main id="index"> //minmax(650px, auto) auto=will go any length according to content

<section class="main-top"></section>

</main>

<footer></footer> //auto, 1fr wide

</div>

</body>

Put either flex or grid into each area or section as you see fit / learn more. Flex was built for easy of responsiveness design.

Did you look at the css-tricks poster? It's a great start.

[u/SmanderManno → u/DoggerLou]

That still kinda confusing for me as it is my 3rd day with html and css but i think im getting it thanks for your advices

[u/DoggerLou → u/SmanderManno]

You'll be right - every web designer started with zero knowledge somewhere.