zaklady html + css

p.bublik · Příspěvekod **p.bublik** » 14 úno 2017 21:47

Ahoj, chtěl jsem se prosím zeptat, proč nefunguje to že chci vytvořit 3 políčka a každý jinak barevný? barvu bych chtěl ale měnit u jednotliveho css

HTML
<body>
<div class="wrapper">
<div class="color-a"></div>
</div>
<div class="wrapper">
<div class="color-b"></div>
</div>
<div class="wrapper">
<div class="color-c"></div>
</div>
</body>

1)nefunkční CSS
.wrapper {
width: 240px;
height: 80px;
border: 1px solid black;
margin: 0 auto;
}

.color-a {
background-color: yellow;
}

.color-b {
background-color: grey;
}

.color-c {
background-color: greenyellow;
}

-----------------------------------
funkční CSS
.color-a,
.color-b,
.color-c {
width: 240px;
height: 80px;
border: 1px solid black;
margin: 0 auto;
}
.color-a {
background-color: yellow;
}

.color-b {
background-color: grey;
}

.color-c {
background-color: greenyellow;
}

Reklama

LuCaCZ · Příspěvekod **LuCaCZ** » 14 úno 2017 22:03

Samotný DIV má šířku 0px protože v něm není žádný obsah, takže není vidět a nejsou vidět ani barvy. V prvním CSS definuješ rozměry pro .wrapper, ale vnořený .color-x je stále prázdný a s nulovou šířkou.

Když do vnořeného .color-x divu napíšeš třeba nějaký text, tak uvíš, že funguje i to.

Nebo můžeš použít ještě

Kód: Vybrat vše

.wrapper div {width: 100%; height: 100%;}

to roztáhne divy, které jsou vnořené do .wrapper

p.bublik · Příspěvekod **p.bublik** » 14 úno 2017 22:12

no to právě fungoval, pokud jsem napsal text do color-x tak ten text byl v řádku podbarvený
já tam ale u wrapper rozměr mám, takže musím dodat rozměr do color-x?
tzn že by bylo např:

.color-a {
width: 100%;
height: 100%;
background-color: yellow;
}

LuCaCZ · Příspěvekod **LuCaCZ** » 14 úno 2017 22:37

ano, ale abys nemusel každýmu zvlášť dávat ty samé rozměry (aby to tam nebylo zbytečně třikrát) můžeš použít to co jsem psal já. Je to pak i lepší pro pozdější úpravu a přehlednost.

p.bublik · Příspěvekod **p.bublik** » 14 úno 2017 22:54

super, děkuji, kdybych potřeboval ještě poradit mohu se na tebe obratit?

LuCaCZ · Příspěvekod **LuCaCZ** » 14 úno 2017 23:21

jistě, od toho tu jsme ale všichni ;-)

p.bublik · Příspěvekod **p.bublik** » 14 úno 2017 23:22

super, díky

zaklady html + css Vyřešeno

zaklady html + css

Re: zaklady html + css

Re: zaklady html + css

Re: zaklady html + css

Re: zaklady html + css

Re: zaklady html + css

Re: zaklady html + css Vyřešeno

Kdo je online