NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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.

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:5.4.2016 23:52

Mám problém, kterýmu prostě nerozumím.
Mám tři okna vedle sebe. Pro příklad viz:
http://kod.djpw.cz/kcwb

Tak, teď každému rámečku chci nějakým způsobem nastavit pozadí, které bude nějaký obrázek...pro příklad dávám nějaké defaultní obrázky, viz:
http://kod.djpw.cz/lcwb
A do toho mám ještě nějaký obrázek na pozadí celé stránky...
http://kod.djpw.cz/mcwb
Rozumím tomu dobře tak, že ted všechny tři obrázky zabalím do jednoho "ID" a nebo classu a nastavím jim nějaký další obrázek, který se bude generovat na pozadí a tím pádem budou všechny tři sloupce stejně vysoké?
Prosím vysvětlení pro blbce, tohle není uplně moje zaměření a dělám to opravdu jen jako laik...
Díky

Odpovědět
5.4.2016 23:52
Navštiv www.fb.com/skkelticz
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na tbartolen
Jan Lupčík:6.4.2016 6:29

Pokud chceš 3 stejně vysoké sloupce a i jednodušeji ty sloupce pozicovat, mrkni se na CSS vlastnosti flex-*. :)

Nahoru Odpovědět
6.4.2016 6:29
TruckersMP vývojář
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:8.4.2016 15:50

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.

Nahoru Odpovědět
8.4.2016 15:50
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:10.4.2016 14:31

Takže ten obrázek který to rozšiřuje není vidět, nebo jak?

Nahoru Odpovědět
10.4.2016 14:31
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:10.4.2016 16:08

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.

Nahoru Odpovědět
10.4.2016 16:08
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:11.4.2016 22:02

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

Nahoru Odpovědět
11.4.2016 22:02
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Tomáš123:12.4.2016 16:32

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

Nahoru Odpovědět
12.4.2016 16:32
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
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 7 zpráv z 7.