Autor Zpráva
FrodoZNK
Profil
Zdravím,
mám dotaz ohledně centrování a přizpůsobování stránky k monitoru.
Zde můj web - http://paulova.webovka.eu
Zde CSS pro stránku - http://paulova.webovka.eu/styles/main.css
Zde CSS pro menu - http://paulova.webovka.eu/styles/menu.css
Web se přizpůsobuje a centruje, ale problém nastane, když zmenšíte okno stránky. Vše je v pořádku krom marginu. Mám nastavený pevný margin vlevo i vpravo na 10%, ale když to okno zmenším, tak pravý margin je nulový a zůstane jen levý.
Vyzkoušejte prosím.

Díky za rady. :-)
Trejpa
Profil
FrodoZNK:
Nepoužívej procenta (10%), ale ve vodorovném směru hodnotu auto.

Také doporučuji nenastavovat to natřikrát, ale obalit vše jedním vystředěným blokem s rozměry a odsazením. Vše v něm se mu přizpůsobí.
FrodoZNK
Profil
Ale já chci, aby stránka byla na středu a zároveň měla 10% odsazení vlevo i vpravo. Když jsem tam měl pixely, bylo to stejné.


Ale to margin: auto by šlo. Uvidím, jak to bude vypadat na menším monitoru doma. :-)
lionel messi
Profil
FrodoZNK:
width: 80%; margin: 0% auto ti po stranách vytvorí 10% široké okraje.
Bubák
Profil
lionel messi:
Přesně totéž mne napadlo, když jsem četl „aby stránka byla na středu a zároveň měla 10% odsazení vlevo i vpravo“.

FrodoZNK:
Možná by se hodilo přidat i minimální a maximální šířku v px.
Trejpa
Profil
FrodoZNK:
Velikost auto funguje na boční strany. Na spodní, kam jsi ji napsal také, nedělá nic.

Máš to celkem dobře, jen na hlavní určení velikosti použij běžnou šířku width: 80%, zatímco max-width si nech jako absolutní omezení, třeba v pixelech (např. 1600px) nebo na počet znaků (např. 120ex), protože příliš široká stránka se špatně čte.

Takže:
.page{
    width: 80%;
    min-width: 940px;
    max-width: 1600px;
    min-height: 630px;
    margin: 15px auto 0;
    background: #F0E3D3;
    border: solid 1px black;}


Pozadí tvé stránky nepočítá s velkým oknem prohlížeče. Od šířky 1920 bodů vylézá po pravé a případně spodní straně bílé pozadí pod obrázkem. Doporučuji nastavit tmavou barvu pozadí (někde okolo #555) a i když úplně přesně obrázek nenavazuje, bylo by vhodné ho ukotvit nahoru na střed a nechat opakovat na všechny strany.
body { background: #555 url(../images/full/background.jpg) center top repeat; }
Bubák
Profil
Trejpa:
Na spodní, kam jsi ji napsal také, nedělá nic.
To není přesné, pokud je horní/margin auto, tak horní/dolní margin bude nulový. Tak pravá CSS specifikace a prohlížeče se tím řídí (mám otestováno pouze pro horní margin), je to poznat třebas když se margin: auto; deklaruje elementu s výchozím marginem, což jsou odstavce, nadpisy...
ukázka s kódem
ukázka

Je fakt, že deklarovat horní /dolní margin auto jiným, než zkráceným zápisem pro všechny strany, vypadá podivně.
Trejpa
Profil
Bubák:
Když sem něco píšu a zjednodušuji pro začátečníky, tak zvažuji, zda mě někdo tu bude chytat za slovíčko. Použil DIV, tudíž výchozí margin je nulový, proto když napíšu, že hodnota auto s nulovým marginem nic neudělá, je to vlastně správně, vždyť nula se přepisuje nulou, a není třeba vyjmenovávat další situace, pro které mé tvrzení platí nebo neplatí (pro tuto samozřejmě platí). Moje mínus, že lidi obvykle přeceňuji.
ukázka s kódem
ukázka

Takže oprava:
Velikost auto funguje na boční strany. Na spodní … nedělá s výchozím nulovým marginem nic.
FrodoZNK
Profil
Máte pravdu, pozměnil jsem to. Ale hlavní, co jsem chtěl byl margin při minimalizování okna a zmenšení pod 950 pixelů. Takhle, když tohle udělám stránka nemá žádný margin a já bych chtěl, aby měla aspoň 10px.

Zajímavý je, že na webu když okno se stránkou zmenším na 960px nemá stránka žádný margin. Ale když si otevřu HTML soubor v PC, tak má asi 10px a jen vlevo a né v pravo.
Bubák
Profil
FrodoZNK:
stránka nemá žádný margin a já bych chtěl, aby měla aspoň 10px
Nejjednodušší je v tomto případě nastavit margin elementu BODY, standardně je 8px, ty ho máš v CSS nastavený na nulu.

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: