NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Ako v css rozdeliť article na viac častí?

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Libor Šimo (libcosenior):26.4.2016 12:32

Mám kód:

article {
  background: url('obrazky/pozadie.png') #c436d1;
  padding: 30px, 0px;
}

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

article section {
  width: 700px;
  float: left;
  background: url('obrazky/section.png') #f2c6ef;
  border: 5px groove #ef97f7;
  border-radius: 15px;
  box-shadow: 2px 2px 7px #ac45b5;
  padding: 20px;
}

V priloženom obrázku je vidno, že article je horizontálne z 3 častí, ale definované mám iba dve.
Ako nadefinovať tretiu (pravú) časť, chcel by som v nej urobiť nejakú animáciu.

Odpovědět
26.4.2016 12:32
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Libor Šimo (libcosenior)
Verquido:26.4.2016 12:36

Rád bych ti poradil, ale pro mě je to jako slovní úloha o X neznámých :D Fakt netuším co potřebuješ. Můžeš to víc popsat?

 
Nahoru Odpovědět
26.4.2016 12:36
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Verquido
Libor Šimo (libcosenior):26.4.2016 12:42

Na obrázku je v strednej časti element atricle.
Na ľavej strane je article header, v strede je article section a pravá strana nie je definovaná. Pravá strana je tam preto, lebo šírka obrazovky je väčšia ako súšet šírok heade a section.
Potrebujem nadefinovať pravú stranu.

Nahoru Odpovědět
26.4.2016 12:42
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Libor Šimo (libcosenior)
Verquido:26.4.2016 12:48

Ty 3 části si vlož do jednoho celýho a tomu definuj fixní šířku a pak to jenom rozděl. Nebo jestli chceš přes dynamické hodnoty tak bych si nastavil levý a pravý ke stranám a střední bych nějak zarovnal do středu a nebo přes absolutní hodnoty. A přes Media-query si udělej resnposive design.

 
Nahoru Odpovědět
26.4.2016 12:48
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Verquido
Libor Šimo (libcosenior):26.4.2016 12:55

Zatiaľ neriešim resnposive design.
Teraz len potrebujem tú pravú stranu označiť nejakým ID, aby som tú plochu mohol použiť na animáciu, napr. padanie lístia.
To ID potrebujem na to, aby animácia nebola po celej stránke, ale len na tej ploche.

Nahoru Odpovědět
26.4.2016 12:55
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Verquido
Tvůrce
Avatar
Verquido:26.4.2016 13:05 
id="pravaStrana"

?? :D

 
Nahoru Odpovědět
26.4.2016 13:05
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Verquido
Libor Šimo (libcosenior):26.4.2016 13:21

Už to mám. Vytvoril som section1, nevedel som, že je to možné.

Nahoru Odpovědět
26.4.2016 13:21
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior)
Tvůrce
Avatar
Odpovídá na Verquido
Libor Šimo (libcosenior):26.4.2016 15:43

Nakoniec som to ani nepotreboval. Pozíciu obrázkov som nastavil cez left a top a použil som jquery animáciu.

Nahoru Odpovědět
26.4.2016 15:43
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
maxy obr
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
maxy obr:26.4.2016 16:03

To co hledáš asi nenajdeš v CSS, strukturu budeš definovat vždy pomocí HTML a ty části potom rozlišovat pomocí class nebo id.

 
Nahoru Odpovědět
26.4.2016 16:03
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 9 zpráv z 9.