Diskuze: Tři obrázky vedle sebe, s textem -> stejná velikost

HTML a CSS HTML a CSS Tři obrázky vedle sebe, s textem -> stejná velikost American English version English version

Avatar
tbartolen
Člen
Avatar
tbartolen:

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. dubna 23:52
Navštiv www.fb.com/skkelticz
Avatar
IT Man
Redaktor
Avatar
Odpovídá na tbartolen
IT Man:

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

Nahoru Odpovědět  +1 6. dubna 6:29
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:

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. dubna 15:50
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:

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

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

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. dubna 16:08
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:

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. dubna 22:02
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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. dubna 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.