Autor Zpráva
smiesek
Profil
Dobrý den,

našla jsem několik návodů a rad, kdy se předchůdci dotazovali na vycentrování obsahu jak vertikálně tak horizontálně, ale už si nevím rady se svým případem.

Budu ráda za případnou pomoc a radu, kde je chyba.

Můžete vidět současný stav na: http://smiesek.xf.cz/box/index.html
jefitto44
Profil
Jednoducho... materský div má nejakú výšku a line-height pevne určené, tiež vertical-align:middle
A vnútornému divu margin:0 auto;
Joker
Profil
smiesek:
Baví mě termín „centrování na střed“ - ono se dá vycentrovat někam jinam? ;-)

Uvedená stránka vypadá spíš jako tabulka. Proč to neuděláte jednoduše tabulkou?
smiesek
Profil
jefitto44:
nerozumím tedy, kde mám chybu, a nebo co udělat, aby to fungovalo :(

Joker:
je to vytaženo z konceptu stránky, která je tvořena pomocí divu, proto se v tom pokouším to vytvořit.
Ano, neumím se vyjadřovat.
Joker
Profil
smiesek:
Že je na stránce <div> přece neznamená, že nemůžete udělat tabulku tabulkou :-)
smiesek
Profil
Joker:
hm tak tabulkou to taky nezvládnu a navíc se mi to divně roztahuje při obrázku na výšku a při obrázku na šířku a taky nevím jak pak udělat jednotlivé ohraničení pouze těch vnitřních linek
Str4wberry
Profil
Takhle by to mělo jít: Centrování na webových stránkách » Centrování elementu s neznámou výškou a šířkou
smiesek
Profil
Str4wberry:
a to mám tedy udělat jako s table a nebo divem prosím?

já mám několik odkazů, ale ani podle jednoho mi to prostě nejde:
- http://jecas.cz/centrovani
- http://klient.plavacek.net/centrovani.html
Str4wberry
Profil
Záleží, jestli je cílem výsledek jako na klient.plavacek.net/centrovani.html nebo spíš Obsah s neznámou výškou i šířkou (tj. vycentrovat celý obsah).
smiesek
Profil
z hlediska ohraničení apod. je nutné to zachovat pomocí div, table to nepůjde, ale pořád se mi to drží nahoře, tak už nevím :(
mikes
Profil *
body {
/*background: #ebf3f6;*/
background-image: URL('pozadi.png'); /* obrázek na pozadi */
font-size: 12px;
font-family: tahoma, arial, verdana, sans-serif;
line-height: 1.7;
padding: 0;
height: 100%;
display: table;
margin: 0 auto;
}

#obal {
min-width: 900px;
height: 100%;
display: table-cell;   
vertical-align: middle;
}
Chamurappi
Profil
Reaguji na smieska:
mám několik odkazů, ale ani podle jednoho mi to prostě nejde
Jedeš v quirku, tudíž pro tebe platí trochu jiná pravidla.

z hlediska ohraničení apod. je nutné to zachovat pomocí div, table to nepůjde
Nevěřím.
Trejpa
Profil
smiesek:
je nutné to zachovat pomocí div, table to nepůjde
Nevěřím: Živá ukázka (náhled)
smiesek
Profil
Trejpa:
tak to jdu nyní porovnávat s tím svým řešením, kde mám nepořádek...
smiesek
Profil
vaše řešení opravdu funguje, ještě si akorát nevím rady, protože nyní mi to nefunguje korektně, když bude náhodně vkládaný obrázek, jednou bude na výšku a po druhé zase na šířku, jde o to, že bych jej ráda zmenšila o polovinu.

Pokud nastavím 50%, tak se obrázek hodně zvětší, pokud nastavím pouze třeba výšku na hodnotu, tak se to chová divně pokud je to na výšku a pak zase na šířku, obrázky jsou deformované.
Bubák
Profil
smiesek:
Pokud nastavím 50%
Procenta se počítají z velikosti nadřazeného elementu, 50% neznamená poloviční velikost obrázku.
Trejpa
Profil
smiesek:
Použij konkrétní hodnotu, třeba v pixelech, jako omezení nejvyšší šířky a nebo výšky obrázku. V případě použití obou omezujících velikostí se použije ta, kterou obrázek překročí a druhá se dopočítá proporcionálně. Pro zaměření obrázku doporučuji spíše než další třídu vhodný selektor potomka, třeba z nadřazené tabulky.

img.nahled { 
    max-width: 120px;
    max-height: 120px; }

Další možností je použití skriptu, který velikost obrázku zjistí a přepočítá mu nové rozměry přesně na polovinu.
smiesek
Profil
Trejpa:
no moc tomu nerozumím, protože jednou je požadovaná velikost např. 50x100 (původní velikost 100x200) - obrázek na výšku a pak zase u obrázku na šířku bude 100x50 (původní velikost 200x100). V tomto případě se jaké použijí max hodnoty? Nemůžu v tom najít logiku :(

Zatím jsem to vyřešila tak, že jsem do css souboru vložila následující hodnoty:
    width: 50%;
    height: 50%;
a ono to nějak funguje, bez ohledu na to, zdali je obrázek na výšku nebo na šířku.

Ostatně děkuju i za Vaše předchozí řešení s centrováním obrázku.
Trejpa
Profil
smiesek:
a ono to nějak funguje
Protože se „height: 50%;“ nemá z čeho vypočítat, neaplikuje se a zůstane mu výchozí hodnota auto. Prostě jako by tam nebyl. Kdyby se měl z čeho vypočítat, tedy ze zadané výšky nadřazeného bloku, tak by se ti obrázek neproporcionálně deformoval a už by to nebylo tak hezké.

Takže tvé řešení tedy dodržuje jen zadanou šířku obrázku, kterou stanoví na přesnou polovinu dostupného místa. Malé obrázky zvětšuje. Vysoké a úzké klidně také zvětší.

Mnou navržené řešení si pro obrázek stanoví největší velikost/velikosti, do které se musí vejít, buď na výšku, na šířku, případně v obou směrech. Malé obrázky to nezvětšuje. Velké to zmenší tak, aby se vlezly do požadovaného prostoru bez toho, aby se deformovaly.
smiesek
Profil
Trejpa:
já to nechápu, nemůžu pochopit co se mi tedy snažíte vysvětlit a proč to je špatně :(

Jak to pozná, že jednou se má zmenšit pro obrázek na výšku a podruhé zase na šířku?
Nechci, aby se mi automaticky zmenšovali obrázky třeba na výšku 120px, protože pak to automaticky se bude na výšku zmenšovat i pro obrázek na šířku ne?
To se zrovna pak nemuselo řešit centrování, když bude zadaná výška jak pro obrázek na výšku, tak na šířku stejná.
Trejpa
Profil
smiesek:
proč to je špatně
Špatně to není. Jen pro některé obrázky nevhodné, neuniverzální.

Zadávat height v procentech v elementu bez výšky je stejné, jako ho nezadávat. Zbytečné.

Měl jsem za to, že chceš redukovat velikost především u velkých obrázků.

Jak to pozná, že jednou se má zmenšit pro obrázek na výšku a podruhé zase na šířku?
Nepozná. Jazyk HTML nemá žádný nástroj k tomu, aby zjistil originální velikost obrázku a stanovil z ní polovinu. Proto jsem navrhl rezervovat místo pro obrázky do dané velikosti (šířka klidně i tvých 50 % z dostupné šířky, výška musí být konkrétní hodnota). Při zadání obou hodnot max-width: 120px; max-height: 120px; bude zobrazený obrázek tak velký, že jeho delší strana bude mít nejvýše 120 px a kratší se dopočítá automaticky. Pokud bude mít obrázek oba rozměry menší, nezvětší se.

Pro si to nevyzkoušíš?
Tak jsem to vyzkoušel za tebe a připravil ti případovou studii tří obrázků. Posuď vhodnost stávajícího řešení a mé úpravy:
ukázka s kódem (náhled)
smiesek
Profil
Trejpa:
děkuji za ukázku, nyní mi je to srozumitelnější.
Ještě bych se ráda zeptala, je tedy podle Vašeho postupu vždy zpravidla žádoucí jako "vždy" zadávat hodnotu pro výšku, na základě které se dopočítává šířka? - nikoliv zadat šířku a nedefinovat výšku.
Že pokud by se nezadala výška, tak je zcela zbytečná jakákoliv snaha na zmenšení, protože to nikdy nebude optimální?

Teď zase totiž hledám ještě vědu v tom, kdy to zadávat jako:
max-width: 120px; max-height: 120px;
nebo
max-width: 50%; max-height: 120px;

Děkuji za Vaši trpělivost
Trejpa
Profil
smiesek:
je tedy ... vždy zpravidla žádoucí jako "vždy" zadávat hodnotu pro výšku
Vše záleží na konkrétní situaci. Zadání výšky nemá smysl, pokud by ti libovolná nevadila nebo bys dopředu mohla garantovat, že obrázky nebudou příliš vysoké.

Že pokud by se nezadala výška, tak je zcela zbytečná jakákoliv snaha na zmenšení, protože to nikdy nebude optimální?
Jak to? Přece stanovení (nejvyšší) výšky omezuje jen příliš vysoké obrázky. U všech ostatních (malé, velké, příliš široké) se nastavení omezení výšky vůbec neuplatní. Ta maximální výška je tam zadaná vlastně hlavně kvůli blbuvzdornosti, aby tam mohl být vložen úplně libovolný obrázek bez toho, aby to nějak narušilo layout.

Teď zase totiž hledám ještě vědu v tom, kdy to zadávat jako: max-width: 120px nebo 50%;
Použij, co se ti zdá lepší. Uvnitř bloku s pevnou šířkou je to jedno, v případě natahovacího layoutu bych použil procenta.
A na výšku bych klidně použil třeba jednotky odvozené od velikosti písma, aby se obrázek mohl třeba zvětšovat s ním: max-height: 5em;.
smiesek
Profil
Trejpa:
Dobře děkuji a tedy řeším výšku... pokud bych řešila šířku, tak použiju úplně stejný postup, akorát v tom případě, kdy bych použila Vaše řešení, by procenta byla pro hodnotu height ano?

A ještě prosím, tedy pokud budu pořád řešit výšku a obrázek bude menší než max-height, tak se neuplatní a upraví se pouze šířka ano? Alespoň to tak chápu i z té ukázky, co jste mi sem výše dal.
Trejpa
Profil
smiesek:
by procenta byla pro hodnotu height ano?
Ne. Pro výšku jakákoliv jiná jednotka, jen ne procenta. Vypočítávají se z výšky nadřazeného bloku a ten ve tvém případě výšku nastavenou nemá (ani se obvykle pro obsahové části webu nenastavuje).

pokud obrázek bude menší než max-height, tak se neuplatní
Ano.

a upraví se pouze šířka ano
Pokud bude širší, tak ano.

Upraví se jen ten směr, který by přesáhl.
smiesek
Profil
Trejpa:
jak mám prosím tedy chápat řešení, kdyby mi šlo o nepřesáhnutí šířky?
Co bych použila níže, jste mi nyní již odpověděl, že to není přípustné:
max-widht: 120px a max-height: 50%

samozřejmě to se ptám již pouze ze zvědavosti, ostatně základní můj problém kamenu úrazu jste mi vysvětlil a dle ukázek vyřešil.
Trejpa
Profil
Já mám pocit, že jsem ti vysvětlil už třikrát, jaké má úskalí zadání max-height nebo height v procentech. Stačilo. Teď je řada na tobě. Zkoušej si to sama, vlastní poznatky dají víc zkušeností, než desítky cizích rad.
smiesek
Profil
Trejpa:
dobře, děkuju, já mám problém porozumnět terminologii a jednotlivým slovům, proto jsem se dále ptala. :(

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: