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
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.)
-------------------------------------------------------------------
Jak to mám udělat, mám zmenšit ten obrázek (resp. celí návrh), nebo nějak pomocí css ?

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
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
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
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
jouza:
Nikde si nevložil použiteľný odkaz...
jouza
Profil
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
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
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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