| 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 |
#2 · Zasláno: 16. 12. 2014, 20:53:25
Mohol by si prosím doložiť zdrojový kód alebo živú ukážku?
|
||
| Marschmallow Profil |
#3 · Zasláno: 16. 12. 2014, 20:56:30
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 * |
#6 · Zasláno: 17. 12. 2014, 07:27:58
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 * |
#8 · Zasláno: 17. 12. 2014, 08:34:30
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 |
#9 · Zasláno: 17. 12. 2014, 13:54:48
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 |
#10 · Zasláno: 17. 12. 2014, 18:37:27
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 |
#11 · Zasláno: 17. 12. 2014, 18:45:42
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 |
#12 · Zasláno: 17. 12. 2014, 18:48:41
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 |
#17 · Zasláno: 17. 12. 2014, 19:30:42
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 |
#18 · Zasláno: 17. 12. 2014, 19:35:44
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 |
#19 · Zasláno: 17. 12. 2014, 19:40:29
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, |
||
| Chamurappi Profil |
#22 · Zasláno: 18. 12. 2014, 17:19:56
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 |
#26 · Zasláno: 19. 12. 2014, 16:46:34
jakre:
„Používám float, žádné pozicování...“ Existuje pravý i levý float a dají se kombinovat. |
||
| jakre Profil |
#27 · Zasláno: 19. 12. 2014, 18:33:03
Bubák:
To je pro me úplná novinka... Jakej si myslíš, ze jsem používal float, kdyz jsou jen tyhle dva... |
||
| Tomáš123 Profil |
#28 · Zasláno: 19. 12. 2014, 19:08:20
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 |
#29 · Zasláno: 19. 12. 2014, 19:41:21
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 |
#30 · Zasláno: 20. 12. 2014, 02:30:48
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;
} |
||
|
Časová prodleva: 9 let
|
|||
0