Diskusia – 17. diel - Štýlovanie hlavičky HTML stránky a flexbox

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej 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ěď.

Odpovedať

Daniel Miarka

Člen

Daniel Miarka:4.2.2017 10:37

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

Odpovedať

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>

Odpovedať

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.

Odpovedať

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?

Odpovedať

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;
}

Odpovedať

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>

Editované

Odpovedať

Patrik Svoboda

Člen

Patrik Svoboda:24.3.2017 20:47

už jsem vyřešil

Odpovedať

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

Odpovedať

Tomáš Pokorný

Člen

Tomáš Pokorný:12.6.2017 16:57

Tohle by mě taky zajímalo...

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 305.

Najčastejšie vyhľadávané

Diskusia – 17. diel - Štýlovanie hlavičky HTML stránky a flexbox