zaklady html + css Vyřešeno

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

p.bublik
Level 2
Level 2
Příspěvky: 220
Registrován: únor 12
Bydliště: Jižní čechy
Pohlaví: Muž
Stav:
Offline

zaklady html + css

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
Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: zaklady html + css

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
Level 2
Level 2
Příspěvky: 220
Registrován: únor 12
Bydliště: Jižní čechy
Pohlaví: Muž
Stav:
Offline

Re: zaklady html + css

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

Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: zaklady html + css

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
Level 2
Level 2
Příspěvky: 220
Registrován: únor 12
Bydliště: Jižní čechy
Pohlaví: Muž
Stav:
Offline

Re: zaklady html + css

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

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

Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: zaklady html + css

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

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

p.bublik
Level 2
Level 2
Příspěvky: 220
Registrován: únor 12
Bydliště: Jižní čechy
Pohlaví: Muž
Stav:
Offline

Re: zaklady html + css  Vyřešeno

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

super, díky


Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 6 hostů