Diskuze: Tři obrázky vedle sebe, s textem -> stejná velikost
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Zobrazeno 7 zpráv z 7.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Pokud chceš 3 stejně vysoké sloupce a i jednodušeji ty sloupce pozicovat, mrkni se na CSS vlastnosti flex-*.
Vnorené prvky majú stále svoje rozmery. Obrázok na pozadí slúži iba na ilúziu. Musel by si sa teda vyhnúť nastavovaniu rámčekov, pozadia, či tieňov, inak by si pozíciu a nerovankú výšku vnorených stĺpcov „vyzradil“.
Dekoračné prvky ale môžeš umiestniť na pozadie obalového prvku.
Súvisiaci článok: http://jecas.cz/…soke-sloupce
Flexboxy kvôli nepodpore (http://caniuse.com/#…) neodporúčam používať. Keď sa už hrať s displayom, tak určite siahnuť po hodnotách simulujúcich tabuľky s bezpečnou podporou od IE8.
Takže ten obrázek který to rozšiřuje není vidět, nebo jak?
Obrázok je iba na pozadí, nič nerozširuje. Princíp spočíva v tom, že obalový prvok je natiahnutý vnútorným obsahom.
Bubák z djpw.cz spracoval ukážku: http://teststranek.kvalitne.cz/vyska-sloupcu1/
Obrázok je na pozadí spoločného rodiča oboch stĺpcov. Keďže rodičovský prvok je taký vysoký ako dlhší stĺpec (je natiahnutý vnútorným obsahom) a pozadie sa vykreslí na jeho celej ploche, ľavý, inak nízky, stĺpec sa zdá vďaka pozadiu byť vysoký. Skutočná výška stĺpcov sa nemení.
Na hranie: http://kod.djpw.cz/xgwb.
Já rozumím tomu principu...ale na pozadí toho sloupce mám už nějaký
jiný obrázek, který mi dělá nějakým způsobem design té stránky. Pokud
si udělám nějaký další obrázek na pozadí toho sloupce, tak jak ta
stránka pozná, který z nich má být ten zobrazený...a navíc, ten druhý
"natahovací" obrázek přeci nenatáhne ten původní, ne? Viz:
www.stansekeltem.cz
Díky za radu
Obrázok na pozadí by si musel vyhotoviť tak, aby obsahoval aj tú medzeru medzi blokmi. Vyzerať by mohol nejako takto (tak aby bol zachytený vzor, ktorý sa bude opakovať): http://www.myscreen.cz/…73e1a50feff7
Zobrazeno 7 zpráv z 7.