| Autor | Zpráva | ||
|---|---|---|---|
| jouza Profil |
Zdravím,
udělal jsem si v PS, toto jednoduché schéma stránky (viz. obrázek). Mám to v určitém rozlišení, jak to udělat aby se to každému bez ohledu na jeho monitor zobrazily stránky vždy přes celí prohlížeč, aneb aby se to každému zobrazilo stejně (včetně mě)¨. Díky :) ctrlv.cz/6szq |
||
| Hando Profil |
jouza:
„každému bez ohledu na jeho monitor zobrazily stránky vždy přes celí prohlížeč“ To nebude úplně ten správný nápad, pokud jsou stránky obsahově dělané na menší rozlišení. Čumět na převážně prázdnou plochu a kroutit hlavou ze strany na stranu, abych se dostal k dalšímu obsahu, to mě nebaví a věřím, že nejsem sám. Co teprve pak způsob zobrazení na mobilu vs. pc... Aby se to zobrazilo rozumně napříč spektrem nejběžnějších rozlišení monitorů, můžeš obsah stránek obalit divem a jemu pak nastavit centrovanou pozici s margin: auto. A pro další typy rozlišení nastav jiné styly. Vhodným postupem je používání procentuálních rozměrů oproti absolutním, ale ne vždy to platí. Není to tak úplně jednoduché téma, tady se dočteš víc: Responsivní design |
||
| Zechy Profil |
#3 · Zasláno: 5. 12. 2016, 21:50:09
jouza:
Přes celé okno je to řešení jen do jisté velikosti... Záleží na hustotě obsahu, ale běžně se to řeší tak, že na nějaké šířce se to zasekne a dál vlak nejedne. Třeba Bootstrap svůj fluid-container zasekne někde okolo 1000px a dál se neroztáhne. |
||
| jouza Profil |
Hando:
Jj máš pravdu špatně jsem se vyjádřil, omlouvám se. Díky za odkaz :) Zechy: Když tam nastavím maximální šířku, a bude tam obrázek, který tu šířku přesahuje, tak se taky zmenší ? nebo .. ten návrh v PS je v 1920x1080, a chtěl jsem udělat hlavičku, tak jsem oříznul hlavičku, a hodil jí tam jako obrázek, ale má 1920 na šířku, a to na mém 1024x768 monitoru :D (viz odk.) ------------------------------------------------------------------- ctrlv.cz/wKC1 Předem děkuji za každou pomoc :) PS: Jestli by byl, někdo tak ochotný, a pomohl by mi s tím třeba přes mail, tak ať mi napíše (teikq.w@gmail.com), potřebuji to udělat co nejdřív, a budu rád za každou pomoc. |
||
| Keeehi Profil |
#5 · Zasláno: 6. 12. 2016, 14:00:42
jouza:
Zmenšit to moc nemůžeš. Vždyť ten tvůj monitor má téměř poloviční šířku, takže by i vše pak mělo být poloviční a to pak bude nečitelné. Responzivní web není vůbec o tom aby se to vešlo na všechny displeje tak jak je to na jednom z nich. A už vůbec ne o tom, aby to vypadalo na všech stejně. Naopak, na každém zařízení to má vypadat jinak a to vždy právě tak, jak je pro to dané zařízení nejlepší. Je to velmi komplexní proces a aby to bylo správně, tak to rozhodně nezvládneš vytvořit za jedno odpoledne. |
||
| jouza Profil |
Už jsem psal, že jsem se špatně vyjádřil .., vím co to je, resp. mám představu .., to že to napíšu úplně jinak než, si myslím, neznamená, že si to opravdu myslím, proto též ta omluva za špatné vyjádření ..
Jak bych to měl teda udělat s tou hlavičkou, kdybych tam neměl obrázek, tak bych to nejspíš obalil jak psal Hando, ale s tím obrázkem je to asi složitější .. Mohl by mi někdo ukázat příklad, jak by to mohlo vypadat.. ? Díky Zatím jsem se dočetl, že bych měl používat relativní jednotky rozměrů, co vy na to ? Měl bych se tím držet, a nepoužívat jednotky jako px, mm, in, pt, cm atd .. ? Hlavně mě zajímají ty pixely .. :) |
||
| Tomáš123 Profil |
#7 · Zasláno: 7. 12. 2016, 18:56:04
jouza:
„ale s tím obrázkem je to asi složitější ..“ Obrázok je takisto iba prvok, môžeš mu nastaviť max-width: 100%; (ak ho v jeho plnej šírke nebudeš zobrazovať, bolo by vhodné aj zmenšiť jeho rozmery kvôli dátovej objemnosti).
„Měl bych se tím držet, a nepoužívat jednotky jako px, mm, in, pt, cm atd .. ?“ Milimetre, palce ani centimetre som na bežnej stránke ešte nevidel (za normálnych okolností neskúmam kódy, milimetre a centimetre sa asi používajú skôr pri tlači). Nemyslím si, že by si sa mal používaniu pixelov vyhnúť. Skôr si zle predstavuješ proces prevodu webu na responzivný. Nestačí prepočítať absolútne pixely na relatívne percentá. Oba druhy jednotiek majú svoje využitie. Pri ladení v rozsahu menších zariadení využiješ skôr percentá. Pre obmedzovanie rozmerov prvkov na väčších monitoroch alebo ak budeš chcieť, aby mal nejaký prvok fixné rozmery, siahneš po pixeloch. |
||
| jouza Profil |
#8 · Zasláno: 7. 12. 2016, 20:56:11
Díky, obrázky už jsem teda vyřešil pomocí
max-width: 100% :)
Zatím to vypadá takhle, chci se zeptat, může to menu takhle být ? (nemyslím vzhled :D) |
||
| Tomáš123 Profil |
#9 · Zasláno: 7. 12. 2016, 21:21:51
jouza:
Nikde si nevložil použiteľný odkaz... |
||
| jouza Profil |
#10 · Zasláno: 8. 12. 2016, 00:10:31
Tady :)
HTML <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Neiko</title>
</head>
<body>
<div id="vse">
<div id="hmenu">
<a href="#"> Homepage </a>
<a href="#"> Články </a>
<a href="#"> Ke stažení </a>
<a href="#"> Kontakt </a>
</div>
<div id="hlavicka">
<img alt="neiko" src="../ps_images/Projekt_neiko_b&y/hlavicka.png" >
</div>
<div id="trio">
</div>
</div>
</body>
</html>CSS /* CSS Document */
@font-face{
font-family:mujfontik;
src: url("mujfontik.ttf");
}
#vse{
width: 1000px;
margin: 0 auto;
}
img{
width:100%;
}
a{
font-family:mujfontik;
font-size: 1.1em;
text-decoration: none;
padding: 5em;
color:white;
}
#hmenu {
background-color: black;
height: 92px;
width: 100%;
text-align:center;
}
#hlavicka{
height:404px;
margin: 0 0 0 0;
}
#trio{
height:700px;
width: 100%;
background-color: green;
} |
||
| Hando Profil |
#11 · Zasláno: 8. 12. 2016, 12:14:57
Používej pro vkládání ukázek Živá ukázka, je to pak pohodlnější pro ty, kdo ti budou chtít odepsat...
Tvůj výsledek je např. zde: Odkaz Když zmenšíš šířku prohlížeče, tak ti "Kontakt" zmizí bez objevení se horizontálního posuvníku - to úplně dobré není. Když už začínáš deklarací vlastního fontu, bylo by fajn uvést i záložní písmo a "rodinu" písma. |
||
| jouza Profil |
Díky, za info, budu na to při příštím vkládání kodů dbát :)
To zmenšení šířky okna prohlížeče jsem nezkoušel, ale když to okno zúžím, tak se objeví horizontální posuvník, ale i tak, myslel jsem si, že když to zúžím, tak se zúží i samotná stránka, a žádný posuvník nebude potřebovat :/ .. ten záložní font, a "rodinu" tam určitě vložím :-) viz foto (odkaz) ctrlv.cz/CtkM |
||
| Tomáš123 Profil |
#13 · Zasláno: 8. 12. 2016, 17:12:55
Hando, jouza:
Nezhoda nastáva kvôli problému s nástrojom kod.djpw.cz. Konfliktných súborov existuje možno viac, minimálne však:
• http://kod.djpw.cz/style.css
• http://kod.djpw.cz/css/style.css
|
||
| jouza Profil |
Zobrazuje, se vám to všude správně ? (zatím) neiko.mablog.eu
Poradily by jste mi jak zvětšit to písmo, tak aby vypadalo podobně jako na obrázku ? (viz. odkaz) ctrlv.cz/Psbs Může ten kod menu být takový ? Nebo jsem mi známý říkal, že je to možná lepší přes float, a margin |
||
|
Časová prodleva: 7 let
|
|||
0