Diskuze – Lekce 17 - Stylování hlavičky HTML stránky a flexbox

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Nejnovější komentáře jsou na konci poslední stránky.

Ondřej Rejmont

Člen

Ondřej Rejmont:12.1.2017 19:31

Stalo se mi to, že když jsem tam chtěl vložit tu šedou barvu do té hlavičky a patičky, taky se mi to celé obarvilo na šedou a zmizela mi modrá (v mém případě zelená) barva pozadí. Poté, co jsem si stáhl šablonu, tak jsem si všimnul toho, že je to pozadí napsáno v article {
background: url('obrazky/pozadi.png') #48FF00;
}
Já to měl ale v "body". Chci se zeptat, jestli je to tím a proč tomu tak bylo. Předem děkuji za odpověď.

Odpovědět

Daniel Miarka

Člen

Daniel Miarka:4.2.2017 10:37

zkus poslat zdroják, moc jsme tě nepochopil.

Odpovědět

Lazar Slavković-Raco

Člen

Lazar Slavković-Raco:9.3.2017 15:10

Zdravim me z nejakeho duvodu nefunguje pozadi jak je udelane v tomhle navodu.
Zdrojak zde:

body{
    margin: 0;
    padding: 0;

    background: url('Pictures/pozadi.png');
}

h1{
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 3px #0a294b;
}

article header{
    width: 250px;
    float: left;
}

article section{
    width:666px;
    padding: 20px;
    float: left;
    background: white;
    border: 2px dotted black;
    border-radius: 10px;
    box-shadow: 2px 2px 7px #1c2228;
}

.cistic{
    clear: both;
}

.vlevo{
    float: left;
}

p{
    font-family: "Arial Narrow";
    font-size: 1.2em;
    font-weight: normal;
}

footer{
    text-shadow: 2px 2px 3px white;
    color: black;
    font-family: "Arial Narrow";
    font-weight: normal;
}

.fx1{
    background: url("Pictures/pozadi2.png");
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styl.css" type="text/css">
        <title>Porfolio</title>
    </head>

    <body>
    <header>
        <div id="logo">Hobi</div>
        <nav>
            <ul class="fx1">
                <li class="aktivni"><a href="#">Domu</a></li>
                <li><a href="#">O mne</a></li>
                <li><a href="#">Dovednosti</a></li>
                <li><a href="#">Reference</a></li>
                <li><a href="#">Kontakt</a></li>

            </ul>
        </nav>

    </header>
        <article>
            <div>
            <header>
                <h1>About me</h1>
            </header>
            </div>
            <section>
                <p>Welcome on my first page XD</p>
                <p class="centrovany"><img src="Pictures/avatar.png" alt="Programator Boby" class="vlevo" style="border-radius: 500px"/>
                    Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT </p>
                <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                <div class="cistic"></div>
                <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
            </section>
           <div class="cistic"></div>
        </article>
    </body>
<footer class="fx1">
    Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>
</footer>
</html>

Odpovědět

Matúš Petrofčík

Tvůrce

Matúš Petrofčík:9.3.2017 17:32

Ahoj, napadá ma že máš zlú cestu k obrázkom. Cesty by si mal písať relatívne k css súboru. Tzn. že ak máš napr. takúto štruktúru:

projekt/css/style.css
projekt/img/pozadi.png
projekt/index.html

tak v tom css súbore musí byť cesta k pozadu takáto: background: url('../img/pozadi.png');
Predpokladám že práve toto je tá tvoja chybka.

Odpovědět

obsah kocky = r^2 ... a preto vlak drnká

Lazar Slavković-Raco

Člen

Lazar Slavković-Raco:10.3.2017 4:37

Takze musim myt zvlast slozku tyhle obrazky na hl.background a na background?

Odpovědět

Lazar Slavković-Raco

Člen

Lazar Slavković-Raco:10.3.2017 9:18

Uz jsem zjistil za chybu. Dal jsem spatne background do spatnyho elementu, ale nastal dalsi problem. Me nejak te article posunul vlevo a ten zahlavi articlu sel doprava.
Zdrojak zde:

body{
    font-family: Verdana;
    font-size: 14px;
    text-shadow: #0a294b;
    background: url("Pictures/pozadi2.png");
}
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: white;
    font-family: "Arial Narrow";
}
.centrovany{
    text-align: center;
}
article{
    background: url("Pictures/pozadi.png");
    box-shadow: 2px 2px 7px #1c2228;

}
h1 {
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 710px;
    float: left;
    background: white;
    border: 2px dashed #4b79ff;
    border-radius: 10px;
}
.cistic {
    clear: both;
}
.vlevo{
    float: left;
}
section{
    padding: 20px;
    width: 666px;
}
#logo{
    background: url("Pictures/logo.png") no-repeat;
    width:250px;
    height:60px;
    float:left;
    margin: 7px 0px 0px 20px;
}
#logo h1{
    margin: 14px 0px 0px 10px;
}
nav ul{
    margin: 0px;
    list-style-type: none;
}
nav ul li{
    float: left;
    margin: 0px;
    font-size:17px;
    height: 73px;
    padding: 0px 25px;
}
nav ul li a{
        padding: 0px 25px;
}
nav a{
    color: white;
    text-decoration: none;
}
nav ul li:hover, .aktivni{
        background: #7bff95;
    box-shadow: 0px 0px 5px black;
}

Odpovědět

Patrik Svoboda

Člen

Patrik Svoboda:24.3.2017 20:24

Ahoj, když přidám logo tak se mi nadpis "o mně" posune až za logo a dá se do dvou řádků. Nevím čím by to mohlo být způsobeno.
Díky za radu

<!doctype html>
<html lang="cs-cz">

<head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="styl.css" type="text/css" />
     <title> patrikovo porfolio </title>
     <header>

           <nav>
            <div id="logo"><h1>Psvoboda8</h1></div>
             <ul>
                <li class="aktivni"><a href="#">Domů</a></li>
                <li><a href="#">O mně</a></li>
                <li><a href="#">Dovednosti</a></li>
                <li><a href="#">Kontakt</a></li>
              </ul>
           </nav>



     </header>
</head>
   <body>
    <article>
    <header class="vlevo">
     <h1 class="vlevo">O mně</h1>
    </header>
          <section>
                <p class="centrovany">
                Vítej na mém prvním webu</p>

                <p>Jmenuju se <u>Patrik Svoboda</u> je mi 14 let.a žiju v ostravě</p>
                <p><img src="obrazky/krajina.png" alt="obrazek krajiny" width="25%" /></p>
                <p>venku je <strong>tepolo</strong></p>

          </section>
           <div class="cistic"></div>
          </article>

      <footer class="centrovany">
                  Vytvořil &copy;Psvoboda8 pro test
           </footer>
     </body>
</html>

Editováno 24.3.2017 20:26

Odpovědět

Patrik Svoboda

Člen

Patrik Svoboda:24.3.2017 20:47

už jsem vyřešil

Odpovědět

Martin Šebek

Člen

Martin Šebek:21.5.2017 12:37

Ahoj,
chtěl jsem se zeptat, jak mám udělat, když bych chtěl mít celou tu hlavičku zarovnanou na střed? Myšleno, že když otevřu stránky na obrazovce s rozlišením větším než 960px tak se vždy zobrazí uprostřed i s navigací?
Díky

Odpovědět

Tomáš Pokorný

Člen

Tomáš Pokorný:12.6.2017 16:57

Tohle by mě taky zajímalo...

Odpovědět

Nejnovější komentáře jsou na konci poslední stránky.

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 10 zpráv z 305.

Nejčastěji vyhledáváné

Diskuze – Lekce 17 - Stylování hlavičky HTML stránky a flexbox