Diskuze: > 480px

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

Aktivity

mat.masar

Člen

mat.masar:4.10.2015 20:41

Ahoj, dělám rwd a a při nejmenším bodu media(480px) jsem přišel na chybu a nevím jak ji vyřešit.
Když je šířka zařízení menší než 480px tak se mají zobrazit nejmenší obrázky. Nadpis je dělaný formou obrázku ale zobrazuje se blbě. Normálně se zobrazí nad textem a i v menších zařízeních by to tak mělo být. Bohužel při tom nejmenším se zobrazuje v textu. www.minikoblizky.wz.cz

Jinak ještě tam je problém s nefunkčním menu.(Na menším rozlišení se nezobrazí vůbec což je taky divné) Nefunguje jako odkaz.

Neví někdo jak to vyřešit?

Editováno 4.10.2015 20:42

Odpovědět

4.10.2015 20:41

Tomáš123

Člen

Tomáš123:4.10.2015 21:20

A jé, to je tá stránka s relatívnym poziciovaním čo minule. Radil som ti, aby si sa toho zbavil. Tu to máš.

Problém je riešiteľný (ale na prvý pohľad som si všimol iba rozdielny display #hornihodivu a nemám práve veľa času). Doporučujem ti zbaviť sa relatívneho poziciovania, ktoré je v tomto prípade úplne zbytočné. Spríjemníš si každú editáciu vzhľadu v budúcnosti. Relatívne poziciovaný layout nie je prispôsobivý. Ak chceš odsadiť, použi margin. Ak dva bloky vedľa seba použi float. Skĺb to, použi float a margin. Na position: relative zabudni. Je ťažké popísať na čo sa hodí a na čo už nie, ale to čo s ním stváraš ty nepatrí medzi dôvody prečo bol vytvorený.

Nahoru Odpovědět

4.10.2015 21:20

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

mat.masar

Člen

mat.masar:4.10.2015 21:24

Ok, mam to tam protože nevím z jakého důvodu jsem si myslel ze když chci dat margin musím dat i typ pozice. Když to oddelam pomůže to?

Nahoru Odpovědět

4.10.2015 21:24

Tomáš123

Člen

Tomáš123:4.10.2015 21:30

Áno. Totiž posúvaním relatívnou pozíciou prvok zaberá okrem nového miesta, kam si ho presunul aj to pôvodné, keby nebol poziciovaný. To spôsobuje, že je nutné posunúť každý ďalší prvok a tvoriť stránky s dynamickým obsahom je ťažké na údržbu. Margin touto vlastnosťou netrpí. On zaberá iba nové miesto. Teda obsah nie je závislý na poznaní rozmerov. V tvojom prípade sa nemusíš piplať s prepočítávaním súradníc. Dáš margin, odoberieš margin, upravíš margin. Dáš float, aby boli stĺpce vedľa seba, odoberieš float aby neboli. Nastavíš šírku, odstrániš nastavenie šírky.

Nahoru Odpovědět

4.10.2015 21:30

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:4.10.2015 21:32

Samozrejme ale nemôžeš očakávať, že odoberieš position: relative a všetko sa samo zrovná. Web je nadimenzovaný. Bude potrebné ho trochu prekopať. Ale oplatí sa to urobiť pre budúcnosť.

Nahoru Odpovědět

4.10.2015 21:32

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

mat.masar

Člen

mat.masar:4.10.2015 21:35

Vcelku mě tlačí čas. Bude stačit když zatím odeberu relativitu jenom #jornidiv aby de to spravilo?

Nahoru Odpovědět

4.10.2015 21:35

Tomáš123

Člen

Tomáš123:4.10.2015 21:44

Momentálne stačí section {top: 0}

Inak, stále si neoznačil moju odpoveď v minulej téme

Nahoru Odpovědět

4.10.2015 21:44

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

mat.masar

Člen

mat.masar:5.10.2015 7:02

Jo v minulem vlakne jsem te neoznacil, protože mi někdo jiný pomohl hodně i mimo forum. Dneska to zkusím...jestli to bude fungovat označil te

Nahoru Odpovědět

5.10.2015 7:02

adder

Člen

adder:5.10.2015 9:25

Ahoj,
promiň, ale přijde mi to jako docela prasárna. Měl by sis první prostudovat nějaký základy HTML a CSS. Hned v prvním nebo 2. článku např. uvidíš, že by se mělo stylovat jenom v CSS. Taky nevím, proč na tak jednoduchou stránku máš js soubory, ale budiž (Tak ve 25. článku se dočteš, že by se měli includovat na konci dokumentu).

Ale budiž. Myslím si, že nejhorší věcí je to, že menu nejde zakliknout - je překryté sekcí. Dále máš tam obrovské množství chyb, jen na w3c - https://validator.w3.org/nu/?…

Teď k tvému problému

menu objevíš např tak, že elementu nav nastavíš display: block; a height: 100px; odděláš margin a nastavíš z-index: 10; (třeba). Je to trochu kostrbaté, ale ke kostrbatému kódu nejde vymyslet perfektní řešení.

od cca 740px

#malyhorni odděláš position: relative; top i left; #hornidiv display: none; article section postition: relative; odděláš a přidáš margin-top: 120px;

To je nejlepší řešení, které dokážu z toho tvého kódu vydolovat. Pyšný na něj nejsem.. Nauč se základy..

Nahoru Odpovědět

5.10.2015 9:25

I’m going to lay this brick as perfectly as a brick can be laid.

Tomáš123

Člen

Tomáš123:5.10.2015 12:19

Prepáč, ja som zabudol, že problémom je nezobrazenie menu. Myslel som, že sa jedná o prekrytie nadpisu. Hm. Tak ma neoznačuj

Nahoru Odpovědět

5.10.2015 12:19

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

mat.masar

Člen

mat.masar:5.10.2015 15:23

Díky, že jsi mi řekl co všechno tam mám špatně zvlášť po tom co jsem psal, že mě tlačí čas. Jak se na to dívám tak tam asi není jiná chyba než to, že to mám stylované v tom html. Stránka byla dělaná v tabulkách a při odstraňování tabulek jsem na toto zapomněl.

K problému... Díky, už to funguje....Na menším rozlišení ale to menu zase zmizne :-S . Na rozlišením >než 480px se tam zobrazuje i #hornidiv sice jen jako tenký proužek nahoře ale i tak. Dělá se tam mezera nad #malyhorni (předpokládám že je to tím #hornidiv).

Tomáš123 Problémy byla dva

Editováno 5.10.2015 15:25

Nahoru Odpovědět

5.10.2015 15:23

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.10.2015 16:15

Proč by nemohl mít css v html?
Proč by nemohl mít volání JS v headu nebo někde v body? Ničemu to nevadí

Viz: view-source:https://www.google.cz/ , view-source:https://www.facebook.com/, view-source:https://www.youtube.com/

Nahoru Odpovědět

5.10.2015 16:15

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.10.2015 16:19

mat.masar

Proč nepoužíváš PNG?

// proč nejde nahrát obrázek při editaci????

Editováno 5.10.2015 16:19

Nahoru Odpovědět

5.10.2015 16:19

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.10.2015 16:20

Obrázek ...

máš chyby v textu(např. ne pod ale po dobré americké kávě... )

// proč se "+" mění na tečku(seznam) ? :-@

Editováno 5.10.2015 16:23

Nahoru Odpovědět

5.10.2015 16:20

Neaktivní uživatelský účet

mat.masar

Člen

mat.masar:5.10.2015 16:46

No dobře mám tam chybu ale to není to proč jsem založil tohle vlákno...Jinak tohle je tvoje standartní rozlišení?

Nahoru Odpovědět

5.10.2015 16:46

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:5.10.2015 17:01

Ne, zmenšil jsem to do rozměru ipadu.

Nahoru Odpovědět

5.10.2015 17:01

Neaktivní uživatelský účet

mat.masar

Člen

mat.masar:5.10.2015 18:08

Aha, ty nemáš nějaké řešení problému?

Nahoru Odpovědět

5.10.2015 18:08

adder

Člen

adder:5.10.2015 19:34

ad 1)
- protože to je nepřehledné
- protože k tomu slouží .css soubor
-> http://www.smashingmagazine.com/…ml-from-css/
ad 2)
- při načítání stránky je lepší hodit nahrávání .js souborů nakonec, aby se první nahrál obsah a poté scripty
- viz. http://blog.r4ms3s.cz/…-koder-sere/

Chápu, že jsou některé styly i v html. Ale to bude většinou přidané přes js. Primárně by se tam neměli vyskytovat, jen v ojedinělých případech. Alespoň podle mého.

Nahoru Odpovědět

5.10.2015 19:34

I’m going to lay this brick as perfectly as a brick can be laid.

Naučíme tě pracovat na home-office.

Zjistit více...

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 18 zpráv z 18.

Nejčastěji vyhledáváné

Diskuze: > 480px