Diskuze: Odsazení obsahu od hlavičky webu

Lukáš Havlíček

Člen

Lukáš Havlíček:4.12.2021 20:55

Ahoj, dělal jsem si web HTML/CSS podle tutoriálu zde na stránkách. Dělal jsem to krok po kroku. Několikrát dokola a pokaždé nevypadal web jako na obrázku z tutoriálu. Jedná se mi o to, že mám obsah stránky nalepený na hlavičce webu. Přikládám screen a css styl. Předem děkuji za rady, v čem by mohla být chyba.
P.S.: Té fotce se nesmějte . Je 10let stará

css

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

body {
    font-family: Poppins;
    background: #F9F9F9;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b
}

.centrovany {
    text-align: center;
}

h2 {
    font-size: 1.7em;
}

article h2 {
    font-size: 2em;
}

article h1 {
    margin: 0;
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 4px solid #EF6534;
}

article h1, h2, h3, h4, h5, h6 {
    padding: 10px 0;
    color: #00386B;
    width: max-content;
}

article header {
    height: 100px;
    background: none;
}

article section {
    margin: 0;
}

article section p {
    margin-bottom: 1.5em;
    line-height: 1.8em;
}

article section a {
    color: #EF6534;
}

#centrovac {
    margin: 0 auto;
    max-width: 960px;
}

article {
    padding: 80px 50px;
    flex: 1;
}

.vlevo {
    float: left;
    padding: 10px;
}

.domu-article {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100px max-content;
}

.domu-article img {
    width: 300px;
    grid-row-start: 1;
    grid-row-end: span 2;
    grid-column: 2;
    filter: grayscale(1);
}

.reference-tlacitko {
    background: #70B73A;
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}

body > header {
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    background: #00386B;
    color: white;
    width: 100%;
    z-index: 1;
}

#logo {
    background: url('obrazky/logo.png') no-repeat;
    background-size: 40px 40px;
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#logo > * {
    margin: 0 0 0 50px;
}

#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
}

#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}

#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}

nav ul {
    margin: 0;
    height: 100%;
    align-items: center;
    list-style-type: none;
    display: flex;
}

nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}

nav ul a {
    color: white;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}

nav ul a:hover, .aktivni a {
    border-bottom: 2px solid #EF6534;
}

.kontakt-tlacitko {
    background: #EF6534;
    padding: 10px 20px;
    border-radius: 20px;
}

.kontakt-tlacitko:hover, .reference-tlacitko:hover {
    filter: brightness(115%) contrast(85%);
    border: 0;
}

footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
}

footer a {
    color: white;
    text-decoration: none;
}

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
    border: 1px solid gray;
}

#dovednosti {
    border-collapse: collapse;
}

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

index.html

<!DOCTYPE html>

<html lang="cz-cs">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Osobní portfolio programátora Šnečka." />
        <meta name="keywords" content="portfolio, programátor, Šneček" />
        <meta name="author" content="Šneček" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>Moje první webová stránka</title>
    </head>

    <body>
        <header>
            <div id="logo">
                <h1>Lukáš<span>Havlíček</span></h1>
                <small>Webdeveloper</small>
            </div>

            <nav>
                <ul>
                    <li class="aktivni"><a href="index.html">Domů</a></li>
                    <li><a href="omne.html">O mně</a></li>
                    <li><a href="dovednosti.html">Dovednosti</a></li>
                    <li><a href="reference.html">reference</a></li>
                    <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </header>

        <article>
            <div id="centrovac" class="domu-article">
                <header>
                    <h1>O mně</h1>
                </header>

                <section>
                    <p>Vítejte na mém prvním webu. Psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
                    <p>Jmenuji se Lukáš Havlíček. Pracuji jako retrakář v Distribučním centru Alber Hradec Králové.
                        Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce.</a>
                    </p>
                    <p>Rád hraji hry na PC a koukám na filmy.</p>
                    <p>Mým hlavním koníčkem je <strong>Programování</strong>.</p>

                    <h2>Dovednosti</h2>
                    <p>Co umím jsem sepsal na stránce <a href="dovednosti.html">dovednosti.</a></p>

                    <p class="tlacitko-odstavec">
                        <a href="reference.html" class="reference-tlacitko">Moje reference</a>
                    </p>
                </section>

                    <img src="obrazky/foto.jpg" alt="Programátor Šneček" />
            </div>
        </article>

        <footer>
            Vytvořil &copy;Šneček 2021 pro <a href="http://www.itnetwork.cz" target="_blank">itnetwork.cz</a>
        </footer>
    </body>
</html>

Zkusil jsem: Zkoušel jsem několikrát dokola tvořit ty webové stránky krok po kroku a pokaždé to dopadlo stejně. Porovnával jsem můj napsaný web s tím přiloženým a nepřipadalo mi to, že jsem měl někde nějakou chybu. Nejspíš jsem někde něco přehlídnul.

Chci docílit: Chci dosáhnout stejného výsledku jako v tutoriálu.

Odpovědět

4.12.2021 20:55

Peter Mlich

Člen

Peter Mlich:4.12.2021 22:18

Zkus pouzivat css bootstrap https://getbootstrap.com/docs/ nez se trapit s nejakou vlastni verzi.

Tutorialy byvaji pro X let stare prohlizece a kdo vi jeste jaky typ. V kazdem prohlizeci tehdy web vypadal jinak.
Pristup do toho tutorialu ma jen ten, kdo si to zaplati, ne? Pripadne jsi mohl dat link.
Mohl jsi dat treba obrazek z toho tutorialu pro srovnani, protoze jsi nenapsal, v cem je problem.
Ted jsem odpovidal v jinem tematu na neco podobneho. tez odkazoval na tutorial. Podle obrazku to vypadalo, ze by mohl byt problem v tom, ze spousta elementu ma nenulovy margin, padding. A marginy se takovym zajimavym zpusobem scitaji, ze se ponecha jen ten nejvetsi. Muzes zkusit vsemu oboje nulovat a pak si ho tam dopsat podle sebe.

<style>
* {margin:0; padding:0;}
p {margin: 10px;}
h1,h2,h3,h4,h5,h6 {margin: 10px;}
</style>

Nahoru Odpovědět

4.12.2021 22:18

Lukáš Havlíček

Člen

Lukáš Havlíček:5.12.2021 15:52

Chci docílit, aby ten obsah vypadal jako tady ne tom prilozenem obrazku. Jedna se o tutorial https://www.itnetwork.cz/…bove-stranky

Nahoru Odpovědět

5.12.2021 15:52

Peter Mlich

Člen

Peter Mlich:7.12.2021 10:23

https://mlich.zam.slu.cz/…s-bitner.htm
Trochu jsem ti preskladal css, aby to melo zhruba poradi, jak mas html tagy.
Pridal ten container. Coz sice nepomohlo, ale muze vyresit nektere dalsi problemy, pozdeji.

Pridal margin k article. Potiz, kdyz poizijes na prvek position:fixed, tak se presune do jine vrstvy stranky. Uz dal neni se strankou svazany. A tudiz je nutne stranku posunout dolu o velikost zahlavi. Nebo odstran z css fixed.

Nahoru Odpovědět

7.12.2021 10:23