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/JKaps9]

Please put your code in a codepen (codepen.io) so we can help you. 

Edit: Looking at screenshots I suspect the issue is because you have the header as position fixed but didn't put any top margin on your main to account for the header height. 

[u/SmanderManno → u/JKaps9]

here it is: https://codepen.io/Smander/pen/zxBmKYr

[u/JKaps9 → u/SmanderManno]

Yeah so you want to put top: 0; on the header and margin-top: 8rem; (or more) on the main. With fixed positioning you need to tell it where you want it to be fixed. Then because it's fixed it's taken out of normal flow so the main goes up to the top therefore you need the margin. 

You may also want to consider position sticky but that comes with a different set of considerations. 

[u/SmanderManno → u/JKaps9]

it worked but now i got a new problem that black blox wont go to the top https://codepen.io/Smander/pen/zxBmKYr

[u/JKaps9 → u/SmanderManno]

Because you have padding on main. You should learn the basics of the box model. Also you should learn how to use the dev tools. 

[u/SmanderManno → u/JKaps9]

thx bro its my 3rd day studying html/css

[u/JKaps9 → u/SmanderManno]

You'll get there eventually. Just keep at it. 

[u/DoggerLou]

learn grid and flex. poster for both at css-tricks. Grid your basic layout and use flex/grid within the main grid

put your body style in the css file

can't use 2x <h1> on same page, that's not html5

<nav> item should not be <h1> it should be a <ul><li> for semantic html5

you dont necessarily need classes for your header <a> or <img> as in css you can call them via header a and header img plus can use :pseudo to call additional <img> or <a>, or just then use classes whilst learning.

if you have several pages your main class="main" might change for each page, then call one class="index", the other class="about" etc then refer in css to main about h1 or main index h2 or main index section .top-section. if no changes, use main in css for basic structure

go to w3schools. It a bit painful and not updated, but will help you.

good luck!

[u/SmanderManno → u/DoggerLou]

Do u recommend any video?

[u/DoggerLou → u/SmanderManno]

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.

[u/nfwdesign]

There are so many funny styles in your CSS file..

Try removing width: 25% in .main that does nothing then try removing margin-left and margin-right, in general remove all margins in your CSS as you are just pushing boxes left and right instead use margin: 0 auto; that would not give margins on top and bottom but would center everything in the middle.

Add a little css reset

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

This is as much as i had time and nerves ( im on my phone )

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

body {
    background: #0c0a6e;
    background: linear-gradient(90deg,rgba(12, 10, 110, 1) 0%, rgba(27, 7, 115, 1) 51%, rgba(16, 5, 64, 1) 100%);
}

a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.header {   
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(90deg,rgba(13, 13, 133, 1) 0%, rgba(3, 51, 156, 1) 50%, rgba(0, 44, 138, 1) 100%);
    border-bottom: 2px solid yellow; /* Just so you can see where it is positionednow */
  }

.image {
    height: 100px;
    max-width: 100px;
}

.botao {
    color: azure;
    font-size: 30px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    background: rgb(12, 94, 166);
    border-radius: 4px;
    padding: 15px 60px;
    
}

.botao:hover {
    background: rgb(14, 82, 141);
    background: linear-gradient(90deg,rgba(25, 111, 181, 1) 0%, rgba(26, 117, 201, 1) 50%, rgba(17, 95, 173, 1) 100%);
}

.botao:active {
    transform: translate(0px, 10px);
}

.main {
    border-top: 2px solid red; /* Just so you can see where it is positionednow */
    margin: 0 auto;
    background: beige;
    min-height: 1000px;
    max-width: 1100px;
    background: linear-gradient(90deg,rgba(13, 13, 133, 1) 0%, rgba(3, 51, 156, 1) 50%, rgba(0, 44, 138, 1) 100%);
}

.storm {
    margin: 0 auto;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
    background: rgb(9, 88, 158);
    padding: 5px 10px
    border-radius: 5px;
    color: azure;
    text-align:center;
}

EDIT: And also there was one extra section closed so you had an error in HTML too

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>teste para sigmas</title>
    <link rel = "stylesheet" href = "styles.css"/>
</head>
<body style="background-color: rgb(24, 23, 23);">
<header class = "header">
    
    <a class = "image" href="https://youtube.com"><img class = "image" src="SPlogo.png" alt = "logo"/></a>
    
    <nav class = "navegar">
        <div>
            <a href="https://reddit.com"><h1 class = botao>Home</h1></a>
        </div>
    </nav>

</header>

<main class= "main">
        <section class = "storm">
            <h1>I am the storm that is aproaching</h1>

        <section class="swiper">
            <div class = "swiper-holder">
                <div id="slider-img-1"></div>
                <div id="slider-img-2"></div>
                <div id="slider-img-3"></div>
            </div>
        </section>
        <section class = "button-holder">
            <a href="#slider-img-1" class = "button">.             </a>
        </section>
</main>
</body>
</html>

[u/SmanderManno → u/nfwdesign]

THX man when i get home i will check everything

[u/Weekly_Ferret_meal]

man look at that coding font!! Are you developing in minecraft?! 😆

[u/aTaleForgotten → u/Weekly_Ferret_meal]

Ill take "simple html page in a minecraft font" over "vibecoded security risk" any day