Maximalna dlžka a sirka stranky

maetoo

Začinam s programovanim webstranok v html a css.
Aku nastavujete maximalnu hodnotu pre širku (width) a vyšku (height)?
Ako najlepšie nastaviť tieto hodnoty tak, aby stranka bola optimalizovana hlavne pre Google Chrome a popripade aj Mozillu?

eMPiko

Neviem ci celkom rozumiem ale tieto parametre nemusis nastavovat. Spravidla je stranka taka siroka, aby naplnila celu obrazovku a taka dlha, aky dlhy je jej obsah. Teda nemusis to nikde nastavovat.

z časti súhlasím s eMPikom, ale pri šírke to asi úplne neplatí. Dlžku nenastavuj, a daj ju tak aby si ju obsah natiahol podla potreby. Ak máš obsahu moc a bola by veľmi dlhá, zamysli sa nad stránkovaním alebo dynamickým dočítavaním, prípadne rozbalovacie položky a podobne. Všetko ale záleží od charakteru tej stránky, aké veci na nej majú byť a aké jej jej zameranie. Čo sa týka šírky, nejakú maximálnu je dobre nastaviť, a po bokoch dať radšej priestor. Vizuálne ti to vôbec nemusí biť do oči, napríklad ako má hej.sk alebo takmer každý eshop že tie boky vieš niekde využiť na reklamu, pozadím to zladiť do stránky a podobne. Ale určite sa to lepšie číta, ako keby bola moc široká. Naše forum je napríklad zlý príklad. Ak si ho pozreš na moc širokom displai, tak sa stratíš v tom, lebo v strede nie je nič, a po bokoch je obsah. Viď screen z dvoch monitorov. Radšej mal byť design spravený na max 1024px a po bokoch nejaké nerušivé okraje

maetoo

Dobre ste pochopili moju otázku.
Tak teda si to zhrnme, či som to správne pochopil.
Maximalna širka a vyška stránky sa nenastavavuje.
A keď chcem už niečo nastavovať, tak nenastavovať dlžku, iba maximalnu širku stranky na rozmer 1024px.
Na strankach nechavať medzeru medzi ohrajom displeja a hlavnym obsahom stranky.
Dobre som tomu porozumel?
Popripade, ak mate nejake dobre rady, alebo vylepšenia, kludne napište. Budem iba rad.

Michaelo

Nejaka klasika napr na cele body:

Kód: Vybrať všetko

body {
    max-width: 1920px;
    display: block;
    margin 0 auto;
}

Zalezi co to je za web. Ja osobne rad robim responzivnejsie weby s nejakou maximalnou sirkou podla typu webu.
Napr. 1024px sirka na forum ako jej toto je blbost. Ja by som mu dal maximum na 1920px (+- 15px pre scrollbar) s tym ze by bolo responzivne do urcitej sirky (napr 780px alebo nieco vhodne pre tablety). Ak to chces na mobily, tak pre samotne phpBB je uz skor lepsi taptalk alebo nieco podobne (asi to moc neplati na teba, pochybujem ze skusas zacinat prave s phpBB).

Snad chapes co chcem povedat.

tých 1024 som dal ako príklad, nedrž sa toho. Treba sledovať trendy, kedysi sa robili stránky do menšej šírky, ako v súčasnej dobe HD displayov. A predpokladám že aj tých 1920 bude zachvílu málo, keď prídu 4k monitory. Treba si pozreť aký je momentálne slovenský priemer rozlíšenia a také hodnoty dať (prípadne svetový, ak si veríš že to bude medzinárodne navštevovaný web). Responzivita je fajn, ale pre začínajúceho developera to bude nočná mora. Myslím, že bude mať problémy odladiť to pre všetky bežné prehliadače ak ešte len začína s css a nie ešte aj pre rôzne rozlíšenia.

Michaelo

JJ viem ze to bol len priklad, ale pre istotu som len zdoraznil nech sa nedrzi jednej hodnoty na vsetky druhy webov.
No a responzivita moze byt docela slusny zabijak pre zacinajuceho developera. Ale ked s anauci pouzivat media queries, percentualne sirky a nejake normalne designy, tak mu to pojde docela rychlo.

skjerp-deg

Na takéto veci je dobré napr. SASS:

_breakings.scss

Kód: Vybrať všetko

/* Set your own values if needed */
$break-small: 480px;
$break-large: 720px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == medium {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == wide {
    @media only screen and (min-width: $break-large) { @content; }
  }
}

A potom už len niekde ( po naimportovaní

)

Kód: Vybrať všetko

@include respond-to(handhelds) {
  /* STUFF */
}
@include respond-to(medium) {
  /* STUFF */
}
@include respond-to(wide) {
  /* STUFF */
}

jorg22

skjerp-deg: co konkretne ti ulahci tento kod? Sice SASS neovladam lebo ja pouzivam LESS. Ale z toho co som si domyslel ze ma robit ten kod mi to pride zbytocne komplikovane a viac sa napises ako keby si pouzil zakladne CSS.

Okrem toho to nieje urcite nic pre zaciatocnika.

Michaelo

Rozhodne by som na zaciatocnika nevytahoval SASS alebo LESS... Nech s anajprv nauci dobre zakladne CSS a az potom moze skusat LESS a z neho na SASS (less je docela fajn na zaciatok).

Maximalna dlžka a sirka stranky

Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky

Re: Maximalna dlžka a sirka stranky