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.

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 */

Editované

Odpovedať

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

Odpovedať

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í...

Odpovedať

Tomáš Maňhal

Člen

Tomáš Maňhal:3.1.2015 17:14

To PSPadem určitě nebude :-D

Odpovedať

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...

Odpovedať

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 ?

Editované

Odpovedať

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ý :-)

Odpovedať

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

Odpovedať

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

Odpovedať

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

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