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

Tomáš Maňhal

Člen

Tomáš Maňhal:12.9.2014 16:36

Musela, protože u mne pomohla a jiné změny jsem nedělal v tvém dosti nepřehledném kódu :-) ;-) Jen tu deklaraci na html5 a uprav si zpátky ty cesty k obrazkům ;-)

<!DOCTYPE html>

 <html lang="cs-cz">

     <head>



             <link rel="stylesheet" href="style.css" type="text/css">

             <meta charset="utf-8" />
             <title>Moje Portfolio</title>


     </head>



     <body>
           <header>

           <div id="logo"><h1>HoBi</h1></div>

           <nav>
                 <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="#">Reference</a></li>
                           <li><a href="#">Kontakt</a></li>
                 </ul>
           </nav>

           </header>

           <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 class="centrovany"><img src="C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\201211131036_bkjb.jpg" alt="Logo" width="25%" /></p>
                           <p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktujte mě na <a href="Kontakt.html">Kontaktní stránce</a></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>

           <footer>
                   Vytvořil &copy;Mike Jr. 2014 pro <a href="http://www.diakoniebroumov.org">Diakonie Broumov</a>
           </footer>

     </body>
 </html>

/* CSS Document */
 .centrovany {text-align: center;}

 body {background: url('pozadi3.png') #1c2228;
       margin: 0px;
       font: Verdana 14px
       min-width: 960px;}

 h2, h3, h4, h5, h6   {text-align: center;
                           color: #0a294b;
                           font-family: Arial;
                           text-shadow: 3px 3px 7px #666666; }

 h2 {font-size: 1.7em;}

 article {Background: url('pozadi2.png') #009aca;}

 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: 666px;
                   float:left;
                   background: white;
                   border: 2px solid #006797;
                   box-shadow: 2px 2px 7px #1c2228;
                   padding: 20px;}

 .cistic   {clear: both;}

 .vlevo {float: left;}

 header {height: 73px;}

 #logo {background: url('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;
             padding: 0px 25px;
             margin: 0 5px;
             font-size: 17px;
             height: 73px;
             line-height: 4.3em;}

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

 nav ul li:hover, .aktivni {background: #ffbb00;
                            box-shadow: 0px 0px 5px black;}/* CSS Document */

Editováno 12.9.2014 16:37

Odpovědět

12.9.2014 16:36

Michal Kučera

Člen

Michal Kučera:23.11.2014 9:25

Čaues lidi, nejde udělat, aby odkaz v menu nebyl jenom text, ale i celý ten obdah oranžového obdélníku kolem něho? Doufám že mě chápete

Odpovědět

23.11.2014 9:25

Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.

luky.b

Člen

luky.b:3.1.2015 17:06

Lidi jaký používáte programy ?...Mě to v tom PSpadu prostě nikdy nejde dát pozadí ikdyž to přesně opíšu...musím pak dávat pozadí přímo do html ale to už neni v css a ztrácím v tom přehled..nemáte někdo tip na něco v čem to jde ? Jelikož už mi to vážně trhá nervy Všechno vždycky v pořádku kromě pozadí...

Odpovědět

3.1.2015 17:06

Tomáš Maňhal

Člen

Tomáš Maňhal:3.1.2015 17:14

To PSPadem určitě nebude :-D

Odpovědět

3.1.2015 17:14

luky.b

Člen

luky.b:3.1.2015 17:17

Ale mě vždycky jenom blbne to pozadí..napsal jsem

body {
        background: url('moje cesta') #1c2228;
        margin: 0px;
        font: 14px Verdana;
        min-width: 960px;
}

A stále nic, cestu mám v pořádku, png taky, mám totiž úplně stejný ale s jiným názvem na jinou část a ta funguje...

Odpovědět

3.1.2015 17:17

luky.b

Člen

luky.b:3.1.2015 17:18

Toto je část z CSS

article {
        background: url('C:\noisy.png');
}

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

article section {
        width: 900px;
        float: left;
        background: white;
        border: 2px solid #006797;
        box-shadow: 2px 2px 7px #1c2228;
        padding: 20px;
}

body {
      background: url('C:\black.png');
      margin: 0px;
      font: 14px Verdana;
}

ten první s article funguje, a ten druhý v body ne...
Ještě mě napadlo, mám article v body, není to ten problém ?

Editováno 3.1.2015 17:20

Odpovědět

3.1.2015 17:18

Tomáš Maňhal

Člen

Tomáš Maňhal:3.1.2015 17:22

a nepřekrývá Ti ten obrázek v article ten obrázek na pozadí? :-) Nevidím totiž, že by jsi ho měl nějak velikostně ošetřený :-)

Odpovědět

3.1.2015 17:22

luky.b

Člen

luky.b:3.1.2015 17:25

Nene, ten article je vlastně jenom

<article>
        <header>
                <h1>Pokus</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 class="centrovany"><img src="C:\Happy.png" alt="Happy" height="100" /></p>

                <p class="centrovany">Jmenuji se Lukáš a je mi 16 let. <br />
                Rád čtu a někdy (hlavně v létě) i sportuju.<br />
                Mým koníčkem je <strong>programování</strong> a <strong>tanec</strong> !</p>
        </section>
        <div class="cistic"></div>
</article>

toto

Odpovědět

3.1.2015 17:25

Tomáš Maňhal

Člen

Tomáš Maňhal:3.1.2015 17:28

Nejlepší by bylo, kdyby jsi to přesunul někam na free hosting, ať se můžu podívat na kompletní stránky :-) Takhle opravdu chybu asi nezjistíme :-) Každopádně PSpad za to nemůže :-) Až to nahraješ někam (třeba endora) tak se ozvi ;-)

Odpovědět

3.1.2015 17:28

ferror

Člen

ferror:28.1.2015 16:21

Lze to udělat tak, že změníš vlastnost zobrazení linku na blokové:

nav a {
    color: white;
    text-decoration: none;
    display: block;
}

Odpovědět

28.1.2015 16:21

Naučíme tě pracovat na home-office.

Zjistit více...

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