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: Problém s media queries a velikostí elementu

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:27.3.2016 20:11

Ahoj, mám problém s oknem "Rodič kelta" na stránce
www.stansekeltem.cz

Problém je v tomhle:

@media screen and (max-width: 886px)
#rodickelta {
    height: 380px;
    /* width: 100px; */
    margin: 2% 2% 2% 0%;

Pokud zadám velikost 100%, tak se na malýchdisplejích ten blok nezobrazí správně, nevíte někdo proč?
Děkuji za radu

Odpovědět
27.3.2016 20:11
Navštiv www.fb.com/skkelticz
Avatar
Peter Lazorik
Člen
Avatar
Peter Lazorik:27.3.2016 20:36

Možno by ti pomohli css jednotky vw a vh.

Nahoru Odpovědět
27.3.2016 20:36
Naše cnosti a naše vady sú neoddeliteľné ako sila a hmota, keď ich oddelíte človek prestane existovať.
Avatar
Peter Lazorik
Člen
Avatar
Peter Lazorik:27.3.2016 20:52

Ak tým nesprávnym zobrazením myslíš to, že ten text preteká, tak ma ešte napadá použiť

@media screen and (max-width: 886px)
#rodickelta {
    height: 100%;
    width: 100%;
    margin: 0% 0% 0% 0%;
}
Nahoru Odpovědět
27.3.2016 20:52
Naše cnosti a naše vady sú neoddeliteľné ako sila a hmota, keď ich oddelíte človek prestane existovať.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:27.3.2016 23:20

Za normálnych okolností by sa tvoj problém riešil vypnutím obtekania (float: none). Zápis by vyzeral takto:

.prvok {
        float: left;
        width: 46%;
        ...;
}
@media screen and (max-width: 886px) {
        .prvok {
                width: auto;
                float: none;
        }
}

Z prvku by sa stal obyčajný blok a bloky sa radia pod seba.

Lenže ty používaš na každý, hoci rovnako formátovaný, prvok na stránke identifikátor a každému identifikátoru všetko opakovane nastavuješ. Zložitejšou úpravou je urobiť to správne. Príklad s dvoma blokmi vedľa seba meniacimi sa na dva bloky pod sebou by vyzeral takto: http://kod.djpw.cz/ytvb.

Ak chceš mať po stranách marginy nastavené v odlišných jednotkách ako tých, ktoré si použil na nastavenie šírkových rozmerov, musíš použiť dva zanorené prvky.

Jednoduchšou úpravou je nájsť selektor v súbore style.css na riadku 476 a zmeniť 100px na 100%.

Ešte malá pripomienka; nikdy nenastavuj bloku s textom výšku. Ak chceš mať prvky rovnako vysoké, použi jedno z dotupných riešení http://jecas.cz/…soke-sloupce.

Nahoru Odpovědět
27.3.2016 23:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:27.3.2016 23:21

Deklarácia uvedená v prvom a treťom príspevku nebude fungovať. @media zápis musí deklarácie vo vnútri obaľovať zloženými zátvorkami. Praktika z programovacích jazykov, keď v prípade jediného zápisu vo vnútri podmienky, či cyklu zložené zátvorky písať netreba tu neplatí...

Jednotka vw, iba eliminuje fakt, že percentuálna hodnota sa vždy počíta z nadradeného bloku. Inak sú to percentá s horšou podporou. V tomto prípade nevedia pomôcť.

margin: 0 je ekvivalentný zápis k margin: 0 0 0 0 aj k margin: 0 0, či margin: 0 0 0.
0hocičoho je stále iba nula, takže písať jednotky tiež nie je potrebné.

Nahoru Odpovědět
27.3.2016 23:21
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:28.3.2016 23:31

Jak tak na to koukám, asi to celé kompletně přepíšu, minimálně vnitřek toho WRAPu. Mám v tom dost zmatek a nevím, jak udělat dva stejně velké sloupce přes absolutní pozicování, asi to bude hodně času a vyvztekání se jako vždy :-)))) každopádně děkuji za rady a usměrnění

Nahoru Odpovědět
28.3.2016 23:31
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:29.3.2016 15:54

Asi najschodnejším riešením pre dva rovnako vysoké stĺpce je nastaviť im overflow: auto. Ak bude obsahu viac, objaví sa posuvník.

Časté je aj riešenie s pozadím, na ktoré by si potreboval obaľovací blok pre prvky, ktoré by boli vedľa seba (ale to by neprekážalo). Väčšina dostupných riešení je zhrnutá v tom článku, na ktorý som ťa odkázal.

Ďalším riešením je použiť tabuľkové hodnoty CSS vlastnosti display... Tam ale nejde dosť dobre spraviť medzeru medzi stĺpcami...

V tvojom prípade sa zdá najjednoduchšou metódou spomínané pozadie. Urobíš si jeden pixel vysoký obrázok, zarovnáš ho na stred a necháš vertikálne opakovať: http://jecas.cz/…soke-sloupce#….

Nahoru Odpovědět
29.3.2016 15:54
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:29.3.2016 15:56

Jenže my máme v plánu udělat pozadí z obrázku pod ten text, takže pokud by se opakoval nějaký další obrázek pod tím při roztažení, tak by to nebylo dobře. Z toho důvodu budu volit asi to absolutní pozicování....

Nahoru Odpovědět
29.3.2016 15:56
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:29.3.2016 16:38

To, myslím, nie je problém: http://kod.djpw.cz/avvb...

Nahoru Odpovědět
29.3.2016 16:38
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:30.3.2016 0:24

Už jsem CSS zase chvíli nedělal, k tomuhle kodu se vracím asi po 2 měsících, a mám v tom neuvěřitelný zmatek. Nevím, proč je DIV v DIVU a jak by to mělo fungovat. Děkuji nicméně za rady, až budu mít chvilku tak si nad to sednu a oživím pamět :-) Určitě mi to pomůže

Nahoru Odpovědět
30.3.2016 0:24
Navštiv www.fb.com/skkelticz
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 10 zpráv z 10.