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

VoKo

Člen

VoKo:12.1.2019 12:55

Relativní

Odpovědět

12.1.2019 12:55

Patrik Pastor

Člen

Patrik Pastor:24.2.2019 17:10

chtěl bych se zeptat. V obrázku (posílám se souborem) jde vidět, že u list itemů v navigaci mám sice margin, ale padding mi nefunguje (není mezera mezi slovy v pozadí - oranžové barvě.

CSS kód:
nav ul li{
float: left;
padding: 0px, 25px;
margin: 0px 20px;
font-size: 17px;
height: 73px;
line-height: 4.3em;
}

nevíte, proč mi nefunguje Padding? díky.

PS: css kod je stejný, jako na itnetwork.cz ,tak fakt nwm

Editováno 24.2.2019 17:12

Odpovědět

24.2.2019 17:10

Michal Šmahel

Člen

Michal Šmahel:24.2.2019 17:19

Ahoj, mezi hodnotami máš čárku (",") místo mezery. Nahraď ji za mezeru a bude to fungovat.

Odpovědět

24.2.2019 17:19

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Patrik Pastor

Člen

Patrik Pastor:24.2.2019 17:21

díky, už to funguje, celkem rychlost tady
Jinak jsem to udělal asi protože jsem zvykly z C# (na tom jsem začínal - tam se všechny parametry čárkou oddělují).

Odpovědět

24.2.2019 17:21

Patrik Pastor

Člen

Patrik Pastor:25.2.2019 21:53

Ještě kdybys mi prosím vysvětlit toto:

article header{
width: 250px;
float: left;
position: static;
background: none;
}

hlavně, že kdybych změnil width (např zvětšil o 100px) toho headeru, tak se to rozsype cele. A ja může mít text (<header><h1>O MĚ</h1></header>) - nadpis šířku?? text nemá snad šířku ne? nebo se ten nadpis roztáhne doprava na okraj toho headeru? Pak by ten nadpis byl float: right ne? spoustu otázek ale v seriálu žádna odpoveď, předem díky tedy za ní.

Odpovědět

25.2.2019 21:53

Michal Šmahel

Člen

Michal Šmahel:27.2.2019 7:52

No, s rychlostí odpovědí je to různé - určuje to většinou kvalita dotazu a jestli má zrovna někdo čas.

Co se týče tvého dotazu, bylo by dobré ho upřesnit, úplně nerozumím, o co ti jde.

Text samotný stylovat není možné, ale zároveň není možné vložit do HTML text, aniž by nebyl obalen alespoň jedním tagem. Když text obalíš třeba "<span>", můžeš ho nastavit jako blokový element a ten již může mít šířku. Text sám o sobě (v řádkovém typu) šířku mít nemůže. Nadpis je blokový element, takže šířku mít může. Pokud používáš float (což většinou není nutné a lze to nahradit lepšími technologiemi - css grid, flexbox), musí ti rozměry sedět tak, aby jejich celková velikost byla rovna maximálně šířce obrazovky.

Odpovědět

27.2.2019 7:52

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Michal Šmahel

Člen

Michal Šmahel:27.2.2019 22:26

Omlouvám se, zapomněl jsem klepnout na "Odpovědět". Psal jsem to trochu ve spěchu...

Odpovědět

27.2.2019 22:26

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Matěj Bína

Člen

Matěj Bína:5.3.2019 18:57

Výhodou je, že se s obrázkem lépe pracuje a lépe se pozicuje, když je na pozadí.

Myslím, že tenhle text by chtěl trochu rozvést. Až doteď byla tato série skvělá v tom, že říkala nejen "tohle je lepší," ale i proč. Tady jsem poprvé v rozpacích, protože nemám tušení, co je na tom DIVu tak zvláštního.

Odpovědět

5.3.2019 18:57

Neaktivní uživatel

Člen

Neaktivní uživatel:5.3.2019 20:52

upper-roman – Řecké číslice velkými písmeny

<a href="https://cs.wikipedia.org/wiki/Řecké_číslice">Řecké číslice</a> sice existují, ale podle angličtiny to asi měly být římské :-)

Odpovědět

5.3.2019 20:52

Neaktivní uživatelský účet

Veronika Školová

Člen

Veronika Školová:6.3.2019 11:00

Ahoj, to logo mi proste nereaguje na žádné úpravy (obrazek, barva.. nic), najdete kde mám chybu prosím ? Díky!

<!DOCTYPE html>

<html lang="cs-cz">
<head>
        <meta charset="utf-8" />
        <title>Portfolio</title>
        <link rel="stylesheet" href="styl.css" type="text/css" />
</head>

<body>

<header>
 <div id="logo">Veronika Školová Photo.Art</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> Můj web </h1>
        </header>

        <section>

             <p class="centrovany">
                <img src="obrazky/pic.jpg" alt="veronika" style="border-radius: 500px;" class="vlevo"/>
            </p>
             <p>Vítejte na mém prvním webu, zatím se teprve učím, ale myslím, že mi to jde. </p>
            <p> Tady je odkaz na moje portfolio <a href="http://www.veronikaskolovaphotoart.com" target="blank"!>Veronika Školová Photo.Art</a> </p>

            <h2>O mě</h2>

            <p>Jsem pražská fotografka. Fotografií se zabývám dva roky a bla bla bla bla</p>
            <p>Ráda cvičím, cestuju a fotím. </p>
            <p>A mým novým koníčkem je <strong>programování</strong>!</p>

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

    </article>
 <footer>
 Vytvořila &copy; Veronika Školová 2019 pro <a href="https://www.veronikaskolovaphotoart.com/">Veronika Školová Photo.Art </a>
 </footer>
</body>
</html>

body {
   font-family: Verdana 14px;
   background: url('obrazky/pozadi_sede.png') #262525;
   margin: 0px
   min-width: 960px;
}
h2, h3, h4 {
   text-align: center;
   color: #0a294b ;
   font-family: Arial;
   text-shadow: 3px 3px 7px #666666;
}
h2 {
   font-size: 1.7em;
}
h1 {
        font-size: 2em;
        font-weight: normal;
        color: white;
        text-align: center;
        text-shadow: 2px 2px 1px #0a294b;
}

.centrovany {
   text-align: center;
}
article {
 background: url('obrazky/pozadi.png') #ff669e ;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 666 px;
    float: left;
    background: white;
    border: 10px solid #262525;
    box-shadow: 2px 2px 7px  #1c2228;
    padding: 20px;

}
.cistic  {
clear:both;
}
header  {
height: 100px;
}
#logo {
background: url ('obrazky/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: 0px 5px;
font-size: 17px;
height: 73px;
line-height: 4.3em;
}
nav a  {
color: white;
text-decoration: none;
}
nav ul li:hover, .aktivni  {
background: #ff669e;
box-shadow: 0px 0px 5px black;
}

Odpovědět

6.3.2019 11:00

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