Autor Zpráva
jakre
Profil
Zdravím,
na svém webu používám CSS styly box-sizing: border-box;. Stránka se mi na notebooku otevře v šířce 1366px v pořádku.
Na stolním počítači, kde stejně jako na NB používám prohlížeč Google Chrome, mám problémy se zobrazením webu - šířka webu je 1920px.
Nevím, zda-li se problém týká zmíněného CSS stylu, ale je to dost možné. Níže vkládám obrázek, jak vypadá chybně zobrazená stránka.




Vyznačeny jsou prvky, které se nezobrazují správně. Stejné problémy se mi stávají také v Safari (na telefonu).

Dole v zápatí se má zobrazit aktuální rok pomocí PHP, které všude funguje, jen zde v zápatí ne. Při prozkoumávání
prvku v prohlížeči (F12) Google Chrome, se mi rok zobrazil v HTML, ale v zápatí již ne, kde je problém?



Z jakého důvodu může docházet k tomuto problému, popřípadě jak to vyřeším?


EDIT: Adresa webu - http://jakubkrejza.cz
Guľaš
Profil
Mohol by si prosím doložiť zdrojový kód alebo živú ukážku?
Marschmallow
Profil
Guľaš:
Z profilu: jakubkrejza.cz
Tomáš123
Profil
jakre:
V prvých dvoch prvkoch ide o nasilu nastavenú výšku (konkrétne selektor na riadku 265). Ak sú prvky v pätičke vyznačené preto, lebo sa zobrazujú mimo horizontálne vyhradené miesto, tak to bude tým, že obaľovaciemu prvku nastavuješ šírku (width) 1018px, zatiaľčo obsahu iba 940px. To isté platí aj pre „aktualizácie“ hore. Šírku 1018px nastavuje selektor na riadku 113. Spomenul si iba nezobrazený rok... Prečo si potom zakrúžkoval všetky položky v rohoch?

na svém webu používám CSS styly box-sizing: border-box;
V div.container som ich nevidel. Tam sa mi zdá ich použitie najpotrebnejšie...

Stránka se mi na notebooku otevře v šířce 1366px v pořádku.
Mám takisto notebook s rozlíšením 1366px na šírku a chybné zobrazenie pozorujem i tu.

Čo sa týka nezobrazeného roku, možno to spôsobuje odstrihnutie skriptov predčasným uzavretím elementu <head>.

EDIT: Pozerám, že rok sa už zobrazuje. Čím to bolo?
jakre
Profil
Tomáš123:
EDIT: Pozerám, že rok sa už zobrazuje. Čím to bolo?
Možná tím, že jsem includoval soubor footer.html a v tom souboru bylo použité PHP. To jsem opravil.

V div.container som ich nevidel. Tam sa mi zdá ich použitie najpotrebnejšie...
Když je doplním, jsou tam potom dvakrát. Jednou právě v div.container a podruhé na jednotlivých prvcích (.cf, .coypright, ...),
takže se vše ještě zmenší. Mám ten styl ponechat jen na div.container a u jiných prvků odebrat?

odstrihnutie skriptov predčasným uzavretím elementu <head>.
Nevidím, že by byl element <head> použit špatně, kde přesně vidíš problém?

nasilu nastavenú výšku (konkrétne selektor na riadku 265)
Ano. Je tam nastavena height na 25px. Má se to zobrazovat tak, jak přikládám níže.

to bude tým, že obaľovaciemu prvku nastavuješ šírku (width) 1018px, zatiaľčo obsahu iba 940px. To isté platí aj pre ‚aktualizácie‘ hore. Šírku 1018px nastavuje selektor na riadku 113
Co přesně mám tedy na "obalovacím prvku" či obsahu pozměnit?


Tady je obrázek, jak by měl web vypadat správně:

anonymníí
Profil *
jakre:
Nenastavuj šířky těm textovým polím. Jak víš, že "zpráva dne" bude široká 110px?
jakre
Profil
anonymníí:
Jak víš, že "zpráva dne" bude široká 110px?
Nevím to. Navrhni mi nějaké řešení, místo toho abych nastavoval šířky. Potřebuji na stejné řádce
vlevo i vpravo ty elementy (Zpráva dne, Český rozhlas). Tam by šlo asi použít width: 50%;, nebo ne?
anonymníí
Profil *
jakre:
nezadávej šířku vůbec, nastav jen floaty a vycelaruj za nimi.

Při šířce 50% by ti nesedělo barevné pozadí jen pod textem (tedy bez dalších elementů v HTML).
Tomáš123
Profil
jakre:
Mám ten styl ponechat jen na div.container a u jiných prvků odebrat?
To by bolo asi druhé najrozumnejšie a najpodporovanejšie riešenie...

Nevidím, že by byl element <head> použit špatně, kde přesně vidíš problém?
Pozri si v HTML koniec riadku 7.

Co přesně mám tedy na "obalovacím prvku" či obsahu pozměnit?
Keď objasníš, prečo si zakrúžkoval prvky v pätičke a hlavičke, poviem ti to.
jakre
Profil
Tomáš123:
Pozri si v HTML koniec riadku 7.
Opraveno. Díky

Keď objasníš, prečo si zakrúžkoval prvky v pätičke a hlavičke, poviem ti to.
Text aktualizovat (vpravo v záhlaví) a obrázek (vpravo v zápatí) se mi na mobilu nezobrazuje správně nevím čím je to způsobeno.
Obrázek níže, zakroužkované elementy:

Zobrazit obrázek
Tomáš123
Profil
jakre:
Musíš na hlavičku a pätičku aplikovať iné CSS vlastnosti pri menšom rozlíšení. Robí sa to pomocou:
@media screen and (max-width: 480px) {
  .hlavicka {
    /*vlastnosti, ktoré budú platiť pre hlavičku iba pri obrazovke užšej ako 480px*/
  }
  .paticka {
    /*to isté iba pre pätičku*/
  }
}
jakre
Profil
Tomáš123:
Robí sa to pomocou:
To vím, ale jde mi o to, co mám přesně přidat, jelikož nevím, v čem je chyba v zobrazení...
Aktuální CSS najdeš zde.
Tomáš123
Profil
jakre:
Nastavil by som hlavičke a pätičke rovnaké vlastnosti ako tie, ktoré má pre div.container. Pokojne aj bez akéhokoľvek responzívneho dizajnu. Ak to takto nebude vyzerať dobre, tak pomocou niečoho podobného ako vyššie uvedená deklarácia:

@media screen and (max-width: 480px) {
  .center {
    width: auto;
    max-width: 480px;  
  }
}

Neručím za funkčnosť, keďže neviem, čo všetko by to mohlo rušiť, ale snáď to pôjde. Prípadne sa ozvi.
jakre
Profil
Tomáš123:
snáď to pôjde
Kód je nahrát, můžeš posoudit sám.
Zkus si třeba zmenšit okno prohlížeče a aktualizuj si web. Hlavička a patička je chybně zobrazena.

Myslím, že je potřeba dodat nějaký meta tag, protože prohlížeč na mobilu to zobrazuje v šířce asi 1024px.
Tomáš123
Profil
jakre:
Pôjde o niečo podobné tomuto:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
jakre
Profil
jakre:
Hlavička a patička je chybně zobrazena.
- obrázek zde

Stejný problém je i v patičce, pozadí je málo široké a text je mimo.

Pomůže na tohle float a odebrání width?
Tomáš123
Profil
jakre:
Pomůže na tohle float a odebrání width?
To neviem, čo tak vyskúšať to (ale pravdepodobne nie).

Skontroluj, či je s obrázkom všetko v poriadku. Experimentuj, čo sa stane ak zmeníš definíciu šírky. Takto na diaľku odhadom je ťažké určiť presnú príčinu.
jakre
Profil
Tomáš123:
Takto na diaľku odhadom
Nechápu, proč na dálku.

Skontroluj, či je s obrázkom všetko v poriadku.
S jakým obrázkem? Na zaslaném screenshotu není žádný element <img>.
Fisir
Profil
Reaguji na Tomáše123:
Pôjde o niečo podobné tomuto
+ malé písmo a uškrtím tě. Nikdy, ale opravdu nikdy neblokuj uživateli v zoomování. Je to stejně otravné, jako blokování pravého tlačítka myši, ale nejde to tak snadno obejít (s mobilním vybavením snad nijak).
jakre
Profil
Reaguji na Fisira:
nikdy neblokuj uživateli v zoomování
Jak bys tedy kód použil ty, jak bys ho opravil?

Zaslaný META tag nevyhovuje, nepoužil jsem ho.
Tomáš123
Profil
jakre:
Nechápu, proč na dálku.
Lebo ja ti niečo navrhnem, ty to vyskúšaš a ak to nejde, tak bez akéhokoľvek uvažovania, či skúšania píšeš sem. Ja som tvoj web netvoril. Sám vieš kde čo máš. Používaj vývojárske nástroje v prehliadači (F12)!

K tomu obrázku:
Ak je rozlíšenie menšie ako 480px, zúži sa iba to, čo je obalené prvkom s triedou .center. Prečo? Lebo ničomu inému responzivitu nenastavuješ. Hlavička sa na celej šírke nezobrazí preto, lebo jej maximálna šírka pri rozlíšení 480px je práve 480px. Záverom je zistenie, že ak robíš responzívny dizajn, musí byť urobený poriadne a jednotne.

Jak bys tedy kód použil ty, jak bys ho opravil?
Opäť nerozmýšľaš...
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
Chamurappi
Profil
Reaguji na Tomáše123:
Ten user-scalable=0 také pryč.
jakre
Profil
Problém vyřešen přidáním stylu min-width: 1040px do elementu body.

Prosím, abyste vyzkoušeli funkčnost webu při zmenšeném prohlížeči pod 1040px. Děkuji
juriad
Profil
Jo web funguje stejně jako při šířce větší než 1040px, ale za výhru to nepovažuji.
Klidně bych se zbavil těch pevných šířek a zařídil, aby se web zobrazil bez horizontálního posuvníku při šířkách kolem 500px. Vždyť ten web nemusí být tak široký. U věcí, které mají být zarovnány k pravému kraji se odpichuj od pravého kraje, nikoli od levého.
jakre
Profil
Reaguji na juriada:
ale za výhru to nepovažuji
Alespoň je to funkční, to je hlavní. Podívej se co to dřív dělalo.

zarovnány k pravému kraji se odpichuj od pravého kraje, nikoli od levého
Používám float, žádné pozicování... Responsivitu teprve chystám.
Bubák
Profil
jakre:
Používám float, žádné pozicování...
Existuje pravý i levý float a dají se kombinovat.
jakre
Profil
Bubák:
To je pro me úplná novinka... Jakej si myslíš, ze jsem používal float, kdyz jsou jen tyhle dva...
Tomáš123
Profil
jakre:
To je pro me úplná novinka
Pozri sa na štruktúru svojho webu. Žiadne deklarácie responzivity nie sú potrebné. Stačí vhodne používať min-width, max-width a float.

Jakej si myslíš, ze jsem používal float, kdyz jsou jen tyhle dva
Zle si pochopil vetu, ktorú ti Bubák napísal. Ešte raz sa nad ňou zamysli a tentokrát bez hlúpych a ironických odpovedí...
jakre
Profil
Tomáš123:
Zle si pochopil vetu, ktorú ti Bubák napísal
To, že se dají kombinovat? To dělám v těch bílých boxech...
juriad
Profil
Upravený styl s vyházenými nepotřebnostmi, který by měl být flexibilní z hlediska šírky webu (moc do hloubky jsem to neřešil). Nevyžaduje změnu HTML, přestože tam máš také hromadu kiksů. Mimochodem, zkus si zvětšít velikost písma na svém webu, budeš hodně překvapený, že všechno všude vytéká; to rozhodně za funkční nemůžeš považovat.
@charset "utf-8";
body {
    background: none repeat scroll 0 0 #ebebeb;
    font-family: "Open Sans",sans-serif;
    font-size: 100%;
    line-height: 1.3;
    margin: 0;
}
*::-moz-selection {
    background: none repeat scroll 0 0 #d46f64;
}
li {
    list-style: outside none none;
}
p, ul {
    margin: 0;
    padding: 0;
}
h5 {
    color: rgb(96, 113, 120);
    display: block;
    font-family: "Comfortaa",cursive;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px 3px #002368;
    word-wrap: break-word;
}
a {
    color: #000;
    font-weight: normal;
    text-decoration: none;
}
input:focus {
    outline-color: rgb(103, 103, 103);
}
.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 10px 30px;
    width: 70%;
}
.app {
    float: left;
    text-align: center;
}
#weekday {
    background: none repeat scroll 0 0 #e84e4e;
    color: #f9f9f9;
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
    text-transform: uppercase;
}
#day {
    background: none repeat scroll 0 0 #f9f9f9;
    color: #15181f;
    font-size: 60px;
    font-weight: bold;
    line-height: 72px;
    padding: 0.1em;
}
#day i {
    bottom: 7px;
    font-size: 50px;
    position: relative;
}
header {
    background: none repeat scroll 0 0 #262626;
    border-bottom: 1px solid #000;
    position: relative;
}
.cf {
    background-clip: padding-box;
    box-sizing: border-box;
    text-rendering: optimizelegibility;
}
@media {
}
section.line {
    font-size: 0.75em;
    line-height: 1.9166em;
    text-align: right;
}
section.line a {
    color: #bababa;
    text-decoration: none;
}
section.top {
    background: none repeat scroll 0 0 #000;
    color: #959595;
}
.top span {
    color: #fdfdfd;
    display: inline-block;
    font: 500 1.5em/1.625em "myriad-pro",sans-serif;
    margin-top: 0.313em;
}
.logo {
    background: url("/source/img/logo.png") repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
    float: left;
    height: 100%;
    margin-right: 1em;
    width: 4.625em;
}
span i {
    color: rgb(162, 162, 135);
    font-size: 10px;
    padding-left: 5px;
}
.lhref {
    float: left;
    height: 5em;
}
.rhref {
    float: right;
}
.desc {
    color: #959595;
    font: 500 0.813em/1.625em "Open Sans",sans-serif;
    white-space: nowrap;
}
ul#navbar {
    list-style: outside none none;
    margin-left: 10px;
}
ul#navbar a {
    color: #fdfdfd;
    font: 300 0.875em/64px "Open Sans",sans-serif;
    margin-right: 36px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.4s ease 0s;
}
ul#navbar a:after {
    content: "/";
    font-weight: 700;
    padding: 0 3px;
}
ul#navbar a#home:after {
    color: #fd6969;
}
ul#navbar a#home:hover {
    color: #fd6969;
}
#zprava-rss {
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    line-height: 30px;
    margin: 11px 0 22px;
}
#zprava-rss p {
    font-size: 15px;
}
#novinky {
    background: none repeat scroll 0 0 white;
    margin: 0 0 15px;
    padding-left: 25px;
    padding-right: 25px;
}
#blok {
    background: none repeat scroll 0 0 white;
    margin-left: 5.5em;
    padding-left: 25px;
    padding-right: 25px;
}
#novinky, #day, #blok {
    border-bottom: 1px dotted #000;
    box-shadow: 0 0 5px #cecece;
}
#blok-tag-right {
    background: none repeat scroll 0 0 #f0f0f0;
    float: right;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.75em;
    padding: 5px 10px 0;
    text-transform: uppercase;
}
#zprava-dne {
    background: none repeat scroll 0 0 #96e264;
    float: left;
    font-size: 0.75em;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-transform: uppercase;
}
#zprava-dne.loading {
    border-left: 2px solid rgb(45, 60, 73);
    border-right: 2px solid rgb(45, 60, 73);
    font-size: 64px;
    height: 118px;
    opacity: 0.8;
    padding-top: 15px;
    text-align: center;
    width: 100%;
}
#zprava-dne.loading i {
    color: #000;
    opacity: 0.75;
}
#zprava-zdroj {
    background: none repeat scroll 0 0 #f0f0f0;
    float: right;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 0.75em;
    padding: 5px 10px 0;
    text-transform: uppercase;
}
#zprava-dne i, span#blok-tag i {
    bottom: 1px !important;
    color: #111;
}
#zprava-zdroj i, span#blok-tag-right i {
    color: #638db7;
    font-size: 13.5px;
}
ul#zprava-zobrazeni {
    overflow: hidden;
}
#zprava-nadpis, #zprava-nadpis a {
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 20px;
    margin: 0;
}
h1.errorh {
    letter-spacing: 2px;
    text-shadow: 0 0 5px #47688a;
}
h1.errorh i {
    padding-right: 7.5px;
}
.container-error {
    background-color: white;
    border-bottom: 1px dotted #000;
    box-shadow: 0 0 5px #cecece;
    margin: 0 auto;
    padding: 15px 20px 50px;
}
.copyright {
    background: none repeat scroll 0 0 padding-box #d54233;
    overflow: hidden;
    text-rendering: optimizelegibility;
}
.copyright span {
    color: #fff;
    display: inline-block;
    font-size: 0.75em;
    margin: 10px;
}
.copyright span.right {
    float: right;
    opacity: 0.85;
}
.copyright span a {
    color: #fff;
}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: