Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Lukáš Havlíček
Člen
Avatar
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 :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" />
        <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
Avatar
Peter Mlich
Člen
Avatar
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
Avatar
Lukáš Havlíček
Člen
Avatar
Odpovídá na Peter Mlich
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
Avatar
Peter Mlich
Člen
Avatar
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
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 4 zpráv z 4.