Autor Zpráva
Prochy
Profil
Zdravim,

chci se zeptat, jak přizpůsobit šířku podle rozlišení? Uvedu příklad např. při mém rozlišení 1366 x 768 má tato stránka šířku přibližně 1120 px, ale když si to otevřu při rozlišení 1024 x 768, tak je šířka přibližně 1020px a mě by zajímalo, jak se toho docílím. Jestli je nutné psát stránky přes procenta a ono se to potom automaticky přizpůsobí nebo jestli to řeší jiným způsobem?

Děkuji za odpověď
Trejpa
Profil
Prochy:
Uvedená stránka má pevnou šířku při jakékoliv změně šířky prohlížeče. Efektu různé šířky je dosaženo jen pomocí příliš širokého pozadí, které se zobrazí (vyleze) a stránku jakoby rozšíří (opticky vyplní volný prostor) jen u širších oken.

Šířka stránky může být variabilní jen v nějakém rozmezí (tak to má například seznam.cz).

Šířka stránky může nabývat několika daných velikostí, mezi kterými přepíná JavaScript zjišťující velikost okna.
Prochy
Profil
Trejpa:
Uvedená stránka má pevnou šířku při jakékoliv změně šířky prohlížeče. Efektu různé šířky je dosaženo jen pomocí příliš širokého pozadí, které se zobrazí (vyleze) a stránku jakoby rozšíří (opticky vyplní volný prostor) jen u širších oken.

Nemohu s vámi souhlasit. Viz 1366px a 1024px nebo mi něco uniká?
Trejpa
Profil
Prochy:
Stránka má výchozí rozměr 980 px, které se nemění, pod ním je jen širší pozadí. Promítací políčko je širší, vytažené na obě strany záporným marginem, takže zalézá pod okraj okna stejně jako pozadí a se do šířky nezapočítává (nezobrazí hned posuvník).
panther
Profil
Prochy:
jeste doplnim Trejpu v [#2] o treti moznost: klicove slovo je responsive design (nezkoumal jsem Seznam.cz, ale vypada responsivne). Takto se da menit pri jakemkoliv rozliseni, Seznam zmenu vyuziva jen na velmi uzkem spektru rozliseni (levy sloupec meni sirku jen v radu par pixelu).
Rellik
Profil
Roztahování stránky podle rozlišení lze udělat pouze když ji necháš roztahovat podle %. Jak to může vypadat uvidíš třeba u mě: http://firstpage.rellik.eu/

Pozadí se dá taky pak roztahovat celkem jednoduchým způsobem:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">       
        <title>Full Page Background Image | Progressive</title>
        <style>
                * { margin: 0; padding: 0; }
                
                html { 
                        background: url(nejaky_obrazek_na_pozadi.jpg) no-repeat center center fixed; 
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                        }
        </style>
</head>
<body>
Obsah stránky...
</body>
</html>
panther
Profil
Rellik:
Pozadí se dá taky pak roztahovat celkem jednoduchým způsobem:
...nema podporu v IE, tusim do verze 8 vcetne. Pokud toto nemale procento lidi nechceme zanedbat, tuto vlastnost pouzit nemuzeme.
Rellik
Profil
panther:
..nema podporu v IE, tusim do verze 8 vcetne.
Jo to sem zapomněl připsat... Nicméně se to použít dá, ale v některých IE to nebude fungovat... Nicméně teď sem to zkoušel ve win XP na IE8.0.6 a funguje to... Takže bych to tak tragicky nebral. Ty starší prohlížeče bych řekl, že moc lidí asi používat nebude, když se automaticky nabízejí aktualizace... Záleží pro jakou sotru lidí je web zaměřen. Jestli pro určitou část, o které se dá předpokládat, že udržují systém v aktuální podobě a aktualizují, nebo všechny, a tam je pak nutné počítat i se staršími prohlížeči...
Chamurappi
Profil
Reaguji na Rellika:
Nicméně teď sem to zkoušel ve win XP na IE8.0.6 a funguje to...
Nefunguje. Vlastnost background-size podporuje až devítka.

starší prohlížeče bych řekl, že moc lidí asi používat nebude
Uživatelům starších prohlížečů je jedno, co bys řekl. Tohle je ještě horší přístup než sáhnout po statistice.
jenikkozak
Profil
Rellik:
Necelých 20 % je ještě docela hodně. Je poměrně ošidné spoléhat na to, že se bude cílová skupina chovat podle nějakých tabulek.

Prochy:
Trochu podobně fungujícího řešení se dá dosáhnout i absolutním pozicováním a zápornou hodnotou left. Příklad na jakpsatweb.
Rellik
Profil
Chamurappi:
Nefunguje. Vlastnost background-size podporuje až devítka.
Tak asi vím na čem jsem to zkoušel ne? Takže tvrdit, že to nefunguje protože to říká nějaká tabulka a nevyzkoušet si to, je taky ptákovina. Jinak to nikomu nenutím... Jen sem napsal, že jde měnit i pozadí podle rozlišení. A věta „starší prohlížeče bych řekl, že moc lidí asi používat nebude“ je vytržená z kontextu. Neřešme ale něco, co není třeba... :)
Chamurappi
Profil
Reaguji na Rellika:
tvrdit, že to nefunguje protože to říká nějaká tabulka a nevyzkoušet si to, je taky ptákovina
Některé věci jsou tak všeobecně známé, že není nutné je zkoušet. Tohle je jedna z nich. Pokud vím, tak background-size: cover zavedl z prohlížečů jako první (oprefixovaně) Chrome půl roku poté, co Explorer 8 vyšel.

Tak asi vím na čem jsem to zkoušel ne?
Možná víš, nicméně výsledky tvého pokusu jsou chybné.

vytržená z kontextu
Nemá moc smysl vytrhávat z kontextu, ani na vytrhávání upozorňovat, když mají ten kontext všichni před nosem.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0