| Autor | Zpráva | ||
|---|---|---|---|
| Stig001 Profil |
Dobrý den,
Chtěl bych se zeptat, jak nejlépe optimalizovat osobní webovou stránku tak, aby byla vhodná pro prohlížení na mobilu. Dočetl jsem se 2 základní způsoby, jak to udělat. První z nich je ten, že při detekci mobilního zařízení se spustí v podstatě "sesterská" stránka, která je stylovaná tak, aby seděla na mobil. Druhý způsob je ten, který řeší, jestli je šířka např. menší, než 640 Px, pokud ano, použije se styl "A", pokud ne, použije se styl "B". Ovšem na tomto způsobu se mi nelíbí to, že rozlišení je dneska v podstatě nic neříkající, protože Full HD může být jak monitor s uhlopříčkou 20", tak i mobil s uhlopříčkou 5", takže tím se v podstatě nic nevyřeší. Další problém je ten, jak zobrazit fotogalerii. Mám zmenšeniny cca 160Px a po rozkliknutí se přes lightbox zobrazí 1200Px. ... na PC je vše OK, ale v mobilu jsou ty náhledy strašně maličké, to souvisí s tím, co jsem psal výše, že není směrodatné rozlišení, ale taky uhlopříčka displeje. ... Co byste mi poradili, uvítal bych nějaké konkrétní příklady, nejsem úplně 100% zběhlý v programování a stylování ? Děkuji za rady PS: Jak to má řešeno např. seznam.cz , google.com, facebook a další ? |
||
| Chamurappi Profil |
Reaguji na Stiga001:
„Ovšem na tomto způsobu se mi nelíbí to, že rozlišení je dneska v podstatě nic neříkající, protože Full HD může být jak monitor s uhlopříčkou 20", tak i mobil s uhlopříčkou 5"“ V prohlížeči v mobilu se stránka zobrazuje ve výchozím stavu několikanásobně přizoomovaná, což se na desktopu moc často nevidí. Takže se mobil tváří, že má šířku menší, a podle toho jde pořád rozpoznat. „na PC je vše OK, ale v mobilu jsou ty náhledy strašně maličké“ Asi neuvádíš <meta name="viewport">, proto se mobil snaží simulovat desktopovou šířku, takže se naopak stránka zobrazuje odzoomovaná (a je úplně jedno, jaké má mobil fyzické rozlišení).
|
||
| Stig001 Profil |
#3 · Zasláno: 21. 11. 2015, 11:08:29
No já jsem programoval tak, že jsem šířky zadával v konkrétních šířkách. Plánuji to celé přeupravit a změnit. Např. článek zde: radekcaga.wz.cz/clanek_dlouhy_cas_2.php v css má nastavené šířky všech rámů v Px (asi bych to měl předělat tak, aby šířky byly v %, že ??) ... já to chci totiž optimalizovat tak, abych na mobilu jezdil jen nahorů a dolů (nikoliv doprava a doleva) a vše aby šlo přečíst => asi zvětšit text, nebo tak něco. ...
|
||
| Chamurappi Profil |
#4 · Zasláno: 21. 11. 2015, 11:15:30
Reaguji na Stiga001:
Doporučím ti prostudovat článek Převod webu na responsivní design. „v css má nastavené šířky všech rámů v Px (asi bych to měl předělat tak, aby šířky byly v %, že ??)“ Přes @media dáš menším rozlišením jiné velikosti.
„a vše aby šlo přečíst => asi zvětšit text, nebo tak něco“ Začni tou <meta> značkou, po jejím přidání se zobrazení stránky v mobilu nejspíš hodně změní… a pak teprve přemýšlej, co a jak přizpůsobit.
|
||
| Stig001 Profil |
Pořád jsem se v tom článku zasekl na stejné věci ... je tam odkaz na kapitolu Responsivní CSS mřížka – proměnlivá změna počtu sloupců a šířky na základě rozlišení ... což je sice pěkné, ale jak jsem to udělal, tak výsledek pořád stejný. Můj mobil má defakto stejné rezlišení, co notebook, takže zobrazení na notebooku a na mobilu je v podstatě stejné, což je špatně, protože fyzicky jsou ty rámy na mobilu hodně maličké. ... zkusil jsem to takto, jako test - ukázku z těch příkladů:
<div class="obal">
<div class="polozka"></div>
<div class="polozka"></div>
<div class="polozka"></div>
<div class="polozka"></div>
<div class="polozka"></div>
<div class="polozka"></div>
<div class="polozka"></div>
</div>a css: radekcaga.wz.cz/engine/css/zk.css a výsledek je ten, že se poměry šířek mění v závislosti na rozlišení, ale když má mobil stejné rozlišení a 5x menší uhlopříčku, pak nastává problém, který tady řeším. Nevím, jestli jsme se pochopili, já to nechápu pořád ale :-( ... Mne spíše zaujal ten druhý způsob: Detekce mobilního zařízení, našel jsem tento kód: if (stripos($_SERVER["HTTP_USER_AGENT"], "mobile") !== false) {
$isMobile = true;
// mobilní prohlížeč
}
else {
$isMobile = false;
// běžný prohlížeč
}ale potřeboval bych to nějak upravit, aby se mi otevřela stránka "odkaz.php" , pokud to nebude mobil a "m.odkaz.php" , pokud to bude mobil. Něco o tom psali zde: Jak na mobilní (responsivní) web » Detekce ale moc si nevím rady, jak to udělat, aby to z mobilu rovnou přeplo zobrazení jakoby na jiný odkaz. ??? |
||
| Chamurappi Profil |
#6 · Zasláno: 21. 11. 2015, 12:40:38
Reaguji na Stiga001:
„Můj mobil má defakto stejné rezlišení, co notebook, takže zobrazení na notebooku a na mobilu je v podstatě stejné“ A tu <meta> značku, o které jsem psal, v HTML máš?
Když si nalistuji tuto stránku (s uvedeným HTML a tvým zk.css), tak v telefonu vidím dva nebo tři sloupce (podle natočení) a na FullHD desktopu pět.
„ale potřeboval bych to nějak upravit, aby se mi otevřela stránka "odkaz.php" , pokud to nebude mobil a "m.odkaz.php"“ Proč bys chtěl, aby mobilní verze stránek měly jinou adresu? To nedává moc smysl (i když to tak část webů dělá). Podle té proměnné $isMobile můžeš generovat různé HTML, bez toho, abys někam přesměrovával.
Možná ti připadá rozlišování podle User-Agenta spolehlivější, ale já bych se na tvém místě držel spíš těch šířek. Existuje spousta velkých mobilů a malých tabletů… neexistuje ostrá hranice.
|
||
| Stig001 Profil |
Tj. zajímavé, protože já na svém telefonu i na notebooku vidím pokaždé 5 sloupců, tak teď už tomu vůbec nerozumím. ... Nevím, jestli to s tím souvisí, ale prohlížeče z androidu se "hlásí" jako plnohodnotné prohlížeče, tak jestli to tím být nemůže ? Meta značku tam mám ...
Co se týká toho přeadresování, tak to bych asi potřeboval nějaký ukázkový kód, protože s tímto nemám moc zkušeností ... nevíte náhodou o něčem ? stačí malá ukázka, abych to názorně viděl ... všiml jsem si, že třeba alza.cz taky tak funguje ... na mobilu se zobrazí sesterský web m.alza.cz ... Zvažuji, že bych to udělal kombinací obou způsobů - pro mobily jiný web, pro vše ostatní (od tabletů výše) "normální" web s procentuálním zobrazením rámů ... Kdybych to udělal přes fce. include ? if (stripos($_SERVER["HTTP_USER_AGENT"], "mobile") !== false) {
$isMobile = true;
// mobilní prohlížeč
include 'mobil.odkaz.html';
}
else {
$isMobile = false;
// běžný prohlížeč
include 'odkaz.html';
} |
||
| Chamurappi Profil |
#8 · Zasláno: 21. 11. 2015, 13:25:44
Reaguji na Stiga001:
„Nevím, jestli to s tím souvisí, ale prohlížeče z androidu se "hlásí" jako plnohodnotné prohlížeče, tak jestli to tím být nemůže ?“ Nevím, co myslíš pojmem „plnohodnotný prohlížeč“. Už od vzniku chytrých telefonů jsou mobilní prohlížeče prakticky shodné s těmi desktopovými, liší se jen v simulované šířce (= ve výchozím zoomu). Jakou šířku simuluje tvůj telefon? Nepřepnul sis někde v nastavení prohlížeče, že chceš předstírat desktopové rozlišení? Mimochodem, před otazníkem se nedělá mezera. „Co se týká toho přeadresování, tak to bych asi potřeboval nějaký ukázkový kód“ Na přesměrování? Nedám, nedoporučuji, neznám. Je problém na podkladě proměnné $isMobile vypisovat různé věci? Tobě jde stejně hlavně o jiné CSS, ne? Tak můžeš vypsat různou adresu CSS souboru…
„všiml jsem si, že třeba alza.cz taky tak funguje ... na mobilu se zobrazí sesterský web m.alza.cz“ Pak když z mobilu někomu pošlu odkaz a on si ho rozklikne na desktopu, tak také kouká na (oškubanou) mobilní verzi. Pro všechna možná sdílení adres je zbytečnou překážkou, pokud se stejný obsah nachází na dvou různých adresách. Viz můj starší výčet potíží… |
||
| Stig001 Profil |
#9 · Zasláno: 21. 11. 2015, 14:21:30
No přepnutý asi ne, protože jiné weby mě to normálně zobrazuje v mobilové verzi ... přesměrování nebude asi potřeba, skusil jsem ten kód, co jsem dal nahoře a funguje (ikdyž nevím, jestli to není programátorská prasárna, ale je to funkční každopádně ... no zásah pouze do css nebude stačit, nějaké funkce v té mobilové verzi asi očešu ...
Takže algoritmus bude vypadat asi takto: 1. Budu mít klasickou stránku, kde bude vše, co je pro obě verze společné. 2. Do hlavičky vložím podmínku, která rozliší to, zda se jedná o mobil nebo nikoliv. 3. Větvení - pokud mobil, vloží se "obsah" pomocí funkce include; pokud není mobil, vloží se jiný obsah pomocí funkce include. => Výhody jednotný web, ikdyž díky funkcím include asi nebude nejrychlejší, ale pořád je to jediné funkční řešení, které mě napadlo a které zároveň funguje. Pořád je to můj osobní web, kde návštěvnost není nikterak ohromující, takže nějaké případné drobné nekorektnosti se snad dají případně odpustit. Co na to říkáte ? |
||
| Tomáš123 Profil |
Stig001:
Mobilná subdoména má defekty aj v oblasti SEO. Správanie, ktoré popisuješ pasuje k situácii neuvedenia spomínanej <meta> značky. Prípadne, možno si ju neupravil na <meta name=viewport content="width=devicewidth">.
Ešte dodám, že spomalenie načítavaním obsahu nebude registrovateľné ani na pomalých pripojeniach. Na očesanie predpokladám prvkov (nie funkcií) ide využiť deklaráciu display: none.
|
||
| Stig001 Profil |
#11 · Zasláno: 21. 11. 2015, 14:55:10
Díky, nyní to už funguje ... no, ještě se rozhodnu, jak to udělám. Tohle by asi bylo nejkorektnější řešení ...
|
||
| Stig001 Profil |
#12 · Zasláno: 21. 11. 2015, 19:22:18
Ještě mi prosím poraďte, jak mám celý obsah zarovnat na střed. (Normálně to dělám přes div, kde mám ve třídě nastavenou šířku, což ale zde použít nemohu) . Díky
|
||
| Stig001 Profil |
#13 · Zasláno: 21. 11. 2015, 21:38:31
A ještě jeden dotaz bych měl:
toto je kod <div class="obal">
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
<div class="polozka"><a class="vlightbox1" href="data/images0/2013/2013_barum_(2).jpg" title="Barum rally 2013 - holky"><img src="zk/a.jpg" class="obr_menu" title="Barum rally 2013 - holky" alt="Barum rally 2013"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock"><img src="clock.png">25.09.2015</div><div class="clock"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní text a popis obrázku včetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div>
</div> zde je odkaz: radekcaga.wz.cz/zk.html problém je, že v chromu to má špatné zobrazení, explorer je ok. 1.) ten text v chromu začíná úplně blbě 2.) ale hlavně, když zmenším okno prohlížeče, divně se to překrývá. V exploreru to šlape, jak hodinky. 3.) jak to celé umístit na střed, když nemohu použít width, tak nevím, jak na to v css ... zde je css: body { background-image: URL('b.png'); background-color: black; color: rgb(212,212,212);
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
text-align: center;
}
h1 {font-family: "Segoe UI", "Calibri"; text-align: center}
* {box-sizing: border-box}
.polozka {
width: 240Px;
height: 430px;
background: white;
float: left;
border: 1px solid rgb(100,100,100);
margin: 10Px
}
.obal {
text-align: center;
position: relation;
border: none
border-bottom: 0;
border-right: 0;
max-width: 1050Px;
}
@media (max-width: 1000px) {
.polozka {width: 25%}
}
@media (max-width: 600px) {
.polozka {width: 50%; width: -webkit-calc(100% / 2); width: calc(100% / 2)}
}
@media (max-width: 450px) {
.polozka {width: 50%}
}
img {border: none}
.popis {font-size: 1.6em; margin: 10Px 15Px 5Px 15Px; text-align: left; font-weight: 500}
.text {font-size: 1.2em; text-align: justify; margin-left: 15Px; margin-right: 15Px; color: rgb(100,100,100);}
.clock {font-size: 0.9em; text-align: left; margin: 3Px 0Px 5Px 15Px; color: rgb(180,180,180); float: left;}
.info {width: 240px; text-align: left; padding-bottom: 7Px}
/* zesvětleni obrazku po najeti myši */
.obr_menu {opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;}
.obr_menu:hover {opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;}
a {text-decoration: none; color: black; }
a:hover {color: rgb(255,128,0)}Věděl by prosím vás někdo, co s tím dělat, hlavně bod. 2 ... Díky |
||
| Stig001 Profil |
#14 · Zasláno: 22. 11. 2015, 10:34:37
Tak první 2 body jsem vyřešil, dokonce i na androidu se to pěkně zobrazuje: radekcaga.wz.cz/zk2.html .... akorát pořád nevím, jak to umístit na střed, když tam nemám šířku zadanou ???
|
||
| juriad Profil |
#15 · Zasláno: 22. 11. 2015, 10:49:18
.obal {
zruš text-align
nastav margin: auto;
}
.polozka {
zruš float
nastav display: inline-block;
nastav text-align: justify;
}Odstraň mezery mezi <div class="polozka"> ze zdrojáku stránky. Jsou důvodem, proč se nevejdou 4 položky vedle sebe. Bohužel poslední (často neúplný) řádek bude také zarovnán na střed a nenapadá mě řešení. |
||
| Stig001 Profil |
#16 · Zasláno: 22. 11. 2015, 11:13:35
jaké že to mezery mám odstranit ?
|
||
| juriad Profil |
#17 · Zasláno: 22. 11. 2015, 11:22:03
Ve zdrojáku stránky (Ctrl+U) máš každou položku na jedné řádce. Mezi položkami nesmí být žádné bílé znaky (mezery, tabulátory, odřádkování).
Viz Inline-block a bílé znaky Teď jsi tu zk2.html dost pozměnil, takže těch úprav je potřeba víc, nebudu je znovu vypisovat. |
||
| Stig001 Profil |
#18 · Zasláno: 22. 11. 2015, 11:40:15
Hmm mě se 4 zobrazují i když tam ty znaky jsou, tohle jsem nikdy neřešil (je tam rezerva v pixelech) ... kdybych to měl všechno dát do 1 řádku, pak bych se v tom nevyznal už vůbec ...
Zkusil jsem ten váš postup i před tou změnou a to zrušení float mě dělalo nepořádek. ... Nyní to mám takto a na středu to je, ovšem pokud zmenším okno prohlížeče, tak pak to na středu už není ... pokud smažu float, mám tam 1 sloupec a ještě navíc mimo střed. ... zde je css: * {box-sizing: border-box}
.polozka {
width: 240Px;
height: 430px;
background-color: white;
float: left;
border: 1px solid rgb(100,100,100);
text-align: justify;
display: inline-block;
margin: 10Px
}
.obal {
position: relative;
border: none
border-bottom: 0;
border-right: 0;
overflow: hidden;
max-width: 1050Px;
margin: auto;
}
|
||
| juriad Profil |
#19 · Zasláno: 22. 11. 2015, 11:49:30
Teď ti stačí odstranit
float a nastavit obalu text-align: center;
... <div class="polozka"><a title="Barum rally 2013 - holky" href="data/images0/2013/2013_barum_(2).jpg" class="vlightbox1"><img width="240px" alt="Barum rally 2013" title="Barum rally 2013 - holky" class="obr_menu" src="zk/a.jpg"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock1"><img src="clock.png">25.09.2015</div><div class="clock2"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní tevčetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div> <div class="polozka"><a title="Barum rally 2013 - holky" href="data/images0/2013/2013_barum_(2).jpg" class="vlightbox1"><img width="240px" alt="Barum rally 2013" title="Barum rally 2013 - holky" class="obr_menu" src="zk/a.jpg"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock1"><img src="clock.png">25.09.2015</div><div class="clock2"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní tevčetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div> ... </div> Stačí přeformátovat na toto. Je to jediná mezera v celém zdrojáku na, které záleží (protože jinde nepoužíváš inline-block). ... <div class="polozka"><a title="Barum rally 2013 - holky" href="data/images0/2013/2013_barum_(2).jpg" class="vlightbox1"><img width="240px" alt="Barum rally 2013" title="Barum rally 2013 - holky" class="obr_menu" src="zk/a.jpg"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock1"><img src="clock.png">25.09.2015</div><div class="clock2"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní tevčetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div> </div><div class="polozka"><a title="Barum rally 2013 - holky" href="data/images0/2013/2013_barum_(2).jpg" class="vlightbox1"><img width="240px" alt="Barum rally 2013" title="Barum rally 2013 - holky" class="obr_menu" src="zk/a.jpg"></a><div class="popis"><a href="">Czech stunt day 2015</a></div><div class="info"><div class="clock1"><img src="clock.png">25.09.2015</div><div class="clock2"><img src="category.png">fotogalerie</div></div><div class="text">Text - základní tevčetně data zobrazení a nahrání. základní text a popis obrázku včetně data zoně data zobrazení a nahrání. popis obrázku včetně data zobrazení a nahrání.</div></div> ... </div> |
||
| Stig001 Profil |
Tak jsem to tak udělal, na středu to je, ale pouze 1 sloupec :-( ... kdybych nemazal to float, tak by to bylo na celém monitoru OK, ale při zmenšení okna se to posune celé ke kraji :-( ...
Ikdyž 1 sloupec je v exploreru, v chromu je to celkem ok, až na to, že jsem počítal s tím, že se mi ta jednotlivá okna budou zobrazovat pod sebe => když jich je lichý počet, tak ta spodní řada je o půl okna posunutá :-( |
||
| juriad Profil |
#21 · Zasláno: 22. 11. 2015, 12:24:14
Mě to teď funguje ve Firefoxu spravně, při libovolné šířce jsou položky (1, 2, 3 či 4 vedle sebe) zarovnané na střed obrazovky. V kterém Exploreru ti to nefunguje?
Chtěl jsi to vystředit, tak je to na středu; ten „problém“ jsem už zmiňoval v [#15]: „Bohužel poslední (často neúplný) řádek bude také zarovnán na střed a nenapadá mě řešení.“ |
||
| Stig001 Profil |
#22 · Zasláno: 22. 11. 2015, 12:40:41
Hmm nefungovalo to přes Pspad, který odkazuje na exlorer, ale když to otevřu v exploreru samostatně, tak tam to už jde. Takže to asi bude ok z této strany. ........
Právě, že kdybych tam nechal tu vlastnost float: left , tak se to zobrazuje dobře. Obal na středu a jednotlivé položky za sebou řazené. Ale problém nastane, když zmenším okno prohlížeče, pak se to celé chytne okraje a na středu je jen nadpis. Takže kdyby se s tím dalo něco udělat, bylo by to pak už OK ... |
||
| juriad Profil |
Stig001:
Jenže použití floatu znamená, že obsah nepůjde nijak centrovat. Všechny možnosti cenrování jsou zmíněné na Centrování na webových stránkách. Obal totiž bude vždy mít šířku celé stránky, nikoli netěsnějšího obepnutí zobrazených položek. To je hlavní kámen úrazu. Ten problém s poslední položkou by šel vyřešit v PHP vygenerováním počtu položek, který je dělitelný 12 (případ 3 i 4 sloupců). Zbylým by se nastavila nulová výška. Ukázka; přidal jsem 5 položek s třídou fake nakonec. Celkem je jich 12, tedy při libovolném počtu sloupců 1, 2, 3, 4 jich bude na každé řádce stejný počet, ale ty s třídou fake nebudou vidět (ale budou zabírat místo při umisťování do řádku). Kdybys náhodou chtěl podporovat i 5 sloupců, tak počet položek musí být násobkem 60, což bude fungovat i pro 6 sloupců. Ještě jsem zapomněl těm fake položkám nastavit margin: 0 10px; - aby nezabíraly žádné vertikální místo; horizintální margin je u nich nutný stejný jako u obyčejné položky.
|
||
| Bubák Profil |
#24 · Zasláno: 22. 11. 2015, 13:17:47
juriad:
„že použití floatu znamená, že obsah nepůjde nijak centrovat.“ Hmmm, nesouhlasím a vycentruji float o neznámé šířce bez hacků i v hodně starých expelerech, pravděpodobně od IE5. Pozor, IE7 neudělá inline-block z blokového elementu, tam by se to muselo řešit hackem. |
||
| juriad Profil |
Bubák:
Živá ukázka A to je ten problém (při šířce ukázky 580px). Tvé řešení funguje pro jednu řádku obsahu. |
||
| Stig001 Profil |
#26 · Zasláno: 22. 11. 2015, 13:43:48
juriad: Ta ukázka výše sice v tom náhledu funguje, ale když jsem to podle toho předělal do toho svého, tak je to pořád stejné :-( ...
Před chvílí se mi podařilo vycentrovat web tak, že jsem ho obalil di dovu, který jsem vycentroval. .... "podobal" jsem zarovnal nalevo a do položek použil float. Sice to fungovalo, ale opět při zmenšení okna to na středu nebylo. ... :-( Bubák: zkusím to, co píše juriad je asi pravda, ale pokud budou jednotlivé šířky konstantní, což jsou (240px), tak by to mohlo vyjít, ne ? |
||
| juriad Profil |
#27 · Zasláno: 22. 11. 2015, 13:55:36
Stig001:
Ne, Bubák nastavuje .obalu display: inline-block, což funguje dobře, dokud je obsah na jednom řádku. U tebe typicky bude obsah na několik řádek, v takovém případě .obal dostane jako vypočítanou šířku nikoli součet šířek položek, ale šířku celého okna. Pokud tomu správně rozumím, tak teď máš jediný problém a totiž zarovnat poslední řádek. V zk2.html nevidím žádné fake položky. Dodej tedy ukázku z fake položkami nebo ukaž skript, kterým je generuješ. |
||
| Stig001 Profil |
#28 · Zasláno: 22. 11. 2015, 13:56:48
Tak už se mi to podařilo rozchodit za použití těch fake divů :-).
Díky :-) |
||
| Stig001 Profil |
Zdravím,
Mám ještě jeden problém s css: Zde jsem dal slideshow, ale problém je, že v css musím zadat parametr height: 700Px (nebo jiný počet px, ale % ani auto to nebere ) , pokud to nezadám, slideshow zmizne.
zkusil jsem upravit #s3sliderContent {position: absolute; top: 0; } na relative , problém to vyřešilo, ale při každém novém snímku ve slideshow se stránka posunula úplně nahoru.
Zde je odkaz: file:///C:/Users/Radek/Desktop/web-zkouska/zk5.html Zde kompletní css slideshow: .slide_prizpusobeni {width: 100%; }
#s3slider {width: 100%; max-width: 700Px; height: 700Px; position: relative; overflow: hidden; margin: 0px auto 5px auto;}
#s3sliderContent {position: absolute; top: 0; }
.s3sliderImage span { position: absolute; left: 0; font: 14px "Segoe UI", "Calibri"; padding: 3px 13px; width: 100%; background-color: white; line-height: 1.6; text-align: left;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
color: #fff; display: none; top: 0;}
.clear {clear: both;}
#s3sliderContent, #s3sliderContent li { padding: 0; margin: 0; }Věděl by prosím někdo, co s tím ? Moc děkuji za pomoc, RC odkaz jsem dal špatný, zde platný: radekcaga.wz.cz/zk5.html |
||
| Stig001 Profil |
#30 · Zasláno: 24. 11. 2015, 17:34:00
Nikdo prosím vás neví, jakým způsobem by se to dalo opravit ? ... v podstatě poslední věc, na které to "stojí" :-( ... ?
|
||
|
Téma pokračuje na další straně.
|
|||
0