NOVINKA: Nauč se pracovat s počítačem a získej lepší práci v administrativě. Více informací:
Avatar
Lukáš Havlíček
Člen
Avatar
Lukáš Havlíček:3.12.2021 23:17

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 :D. Je 10let stará :D

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" />
        <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>
 
Odpovědět
3.12.2021 23:17
Avatar
LacoS.
Člen
Avatar
LacoS.:11.11.2022 17:36

napr.:

article header {
    height: 100px;
    background: none;
    margin-top: 20px;   -- ......... toto
}

.
.
.

.domu-article {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100px max-content;
    margin-top: 20px;  -- ......... toto
}
 
Nahoru Odpovědět
11.11.2022 17:36
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.