Autor Zpráva
quatzael
Profil
Tohle by měl být úplně triviální dotaz, ale mám s tím prostě problém, protože moc nechápu jak funguje vertical-align (protože většinou nefunguje vůbec)..

Mám obalovej div s pevnou šířkou a v něm dva divy (spany) s textem a potřebuju, aby byl jeden zarovnanej do leva a druhej do prava a zároveň, aby byly oba na stejným řádku (text na pravo je větší než na levo..)

vypadá to zhruby takhle:

<div id="obal">
<div id="left"></div>
<div id="right"></div>
</div>

#obal
{
position: relative;
width: 200px;
}

#left
{
display: inline;
font-size: 10px;
text-align: left;
}

#right
{
display: inline;
font-size: 20px;
text-align: right;
}

udělal bych to přes float, ale pak to zase není kvůli tý rozdílný velikosti textu na jednom řádku a ten vertical-align mi tam nefunguje..

Moderátor Chamurappi: Slova „doleva“ a „doprava“ se píší dohromady.
panther
Profil
quatzael:
protože většinou nefunguje vůbec
funguje vždy, kdy fungovat má.

aby byl jeden zarovnanej do leva a druhej do prava
float

ale pak to zase není kvůli tý rozdílný velikosti textu na jednom řádku
dá se to na řádek srovnat.

ten vertical-align mi tam nefunguje..
on funguje, jen to nevidíš.

Nápověda: asi tak, jako když máš prvek se šíkou 100% a centruješ ho. On se vycentruje, ale nic se na pohled nezmění.
quatzael
Profil
tak jsem to udělal:

#obal
{
position: relative;
width: 200px;
}
 
#left
{
display: inline;
font-size: 10px;
vertical-align: bottom;
}
 
#right
{
display: inline;
font-size: 20px;
float: right;
vertical-align: bottom;
}

ale stejně nic.. ten nalevo je zarovnanej do prostřed, protože je měnší..


panther:
„ten vertical-align mi tam nefunguje..“
on funguje, jen to nevidíš.
No fakt to nevidím.. je to furt stejný..:o(

Nápověda: asi tak, jako když máš prvek se šíkou 100% a centruješ ho. On se vycentruje, ale nic se na pohled nezmění.
Ale já tady nemůžu zadat pevnou výšku jestli narážíš na to, výšku by tam měl definovat ten nejvyšší element, ne?? Nebo to je zase ten problém s floutováním, že jakmile tam všechno floutuje tak výška je 0px??
panther
Profil
quatzael:
pevnou výšku jestli narážíš na to
to jsem nemyslel. Vertikální zarovnání nemá s výškou nic společného. Souvisí s něčím jiným.

tak výška je 0px
nehádej. Použij nějaký vývojářský nástroj, pak z tebe nevypadne, že výška těch dvou textů bude nulová. Ani rodiče být nulová nemusí, to jde zařídit taky velmi snadno.
quatzael
Profil
panther:
ok, tak výška není nula, ale stejně pořád nechápu jak z toho, co mi tady říkáš, mám porozumět jak se správně chová vertical-align, protože ten element nalevo zůstává furt zarovnanej nahoru vzhledem k tomu pravýmu ať tam zkouším jakýkoliv varianty..
Davex
Profil
quatzael:
jak se správně chová vertical-align
Asi by pomohlo malé zopakování k čemu slouží vertical-align.
quatzael
Profil
Davex:
já fakt nevím, z toho článku fakt nejde vyčíst kde dělám chybu.. Mám to udělat jako buňky tabulky nebo co?? (v článku je napsaný, že může být display: inline-block)..

Můžete plís někdo normálně poradit nějakým užitečným vysvětlením skutečnýho chování vertical-align??
jenikkozak
Profil
quatzael:
Dva prvky vedle sebe můžeš umístit tím plaváním.
Výška řádku se dá nastavit.
quatzael
Profil
jenikkozak:
Já vím jak nastavit float i výšku řádku.. ale pořád nevím kde je chyba, když mi nefunguje ten vertical-align v tom popsaným případě nahoře..
panther
Profil
quatzael:
nenastavuješ výšku řádku. Když je řádek velký jako text v něm obsažený, zobrazí se stejně a nezáleží na tom, zda je zarovnán nahoru, dolů nebo doprostřed. Není tam žádné místo, o které by se mohl při zarovnání posouvat.
quatzael
Profil
panther:
tak já jsem to radši zase nakreslil, protože se mi zdá, že mi nerozumíte...

nahoře je to jak, to vypadá teď, tzn. text na levo je zarovnanej nahoru k obalovýmu elementu a já potřebuju, aby to vypadalo tak jak je to dole zarovnaný všechno dolu jako by to bylo na jednom řádku bez ohledu na velikost písma...

panther
Profil
quatzael:
že mi nerozumíte
ne, já ti rozumím. A jenikkozak taky.

Line-height. Už mě nebaví to tu papouškovat pořád dokola, když už to tu je napsané asi pětkrát. Zkus si s ní pohrát.
Davex
Profil
Text vlevo musí mít stejnou výšku řádku jako text vpravo, takže něco jako

#left {
  line-height: 26px;
}
quatzael
Profil
Davex:

tohle zkouším v různých variantách furt dokola, ale prostě to vůbec nijak nefunguje!!!
ve skutečnosti tam mám:

#left
{
display: inline;
font-size: 14px;
line-height: 25px;
vertical-align: bottom;
}
 
#right
{
display: inline;
font-size: 20px;
float: right;
vertical-align: bottom;
}

místo 26px, jsem tam dal 25px, protože mi to ukazuje, že to je skutečná výška toho pravýho elementu..

ale pořád nic!!! ten text v levým divu se akorát vycentruje na střed výšky řádku, ale nezarovná se dolů!!!
panther
Profil
quatzael:
zasekává se ti vykřičník.

Uklidni se, vydýchej se. Pak si vezmi celé to téma od začátku a reakci po reakci si ho ještě jednou projdi. Už je pozdě, zkus počkat do zítra, ráno moudřejší večera.

Řešení, a to nejen náznak, tu už padlo, když si dáš jednotlivé reakce dohromady. Více k tomu už psát nebudu.

místo 26px, jsem tam dal 25px, protože mi to ukazuje, že to je skutečná výška toho pravýho elementu..
skutečnou výšku elementu rozhodně neznáš. Co když nemáš font, který deklaruješ jako první v řadě? Co když si písmo zvětším?
quatzael
Profil
panther:
sorry, ale ty píšeš furt jenom v hádankách. Tobě možná připadá, že to tady píšeš tak jednoznačně, že to už víc nejde, ale já to fakt z Tvýho výkladu nechápu..

Chodím tady na tento server, když vím, že prostě sám na řešení nemůžu přijít a trvalo by mi dlouho než bych na to nějak náhodou přišel.. Už jsem tady dostal několik skvělých rad, který mi ušetřily spoustu času a z něčeho jsem se i hodně poučil. Ale rady typu "nastuduj si line-height" nebo "zkus si s tím pohrát" mi fakt vůbec nepomůžou, protože to dělám celej večer dokola a pořád to nefunguje!

zasekává se ti vykřičník.
Sorry, ale potřebuju tenhle projekt dokončit v nějakém rozumném termínu, takže se snažím ušetřit čas kde se dá, proto taky chodím na tuhle diskuzi, protože občas mi tady někdo poradí opravdu rychle, jednoznačně a na poprvé, čehož si opravdu vážím, ale tuhle prkotinu tady řeším celej večer a snažím se Ti vysvětlit, že mi to opravdu nefunguje ať zkouším jakýkoliv varianty a rozhodně žádnou použitelnou radu jsem tady zatím nedostal... Jenom se místo toho svezla diskuze k tomu, jestli to už v diskuzi bylo nějak vysvětleno a jde to z toho poskládat nebo ne..
Ty říkáš, že jo a já říkám, že ne... a takhle je to furt dokola..

skutečnou výšku elementu rozhodně neznáš.
výšku elementu jsem si zjistil pomocí vývojářských nástrojů tak předpokládám, že je to skutečná výška..

Co když nemáš font, který deklaruješ jako první v řadě? Co když si písmo zvětším?
proto taky nechápu, proč mě tady furt navádíte, že mám nastavovat výšku řádku, protože výškou řádku zároveň upravuju výšku elementu.. takže mi nedává smyl proč bych měl výšku levýho elementu upravit na shodnou hodnotu s výškou pravého elemetnu, protože pak bych už levej element nemohl zarovnávat dolů vůči pravýmu případně obalovýmu elementu, ale mohl bych akorát zarovnávat text pravýho elementu vůči výšce tohoto elementu, což se mi nezdá, že by zrovna byla funkce vertical-align.. Navíc nefunguje ani jedna varianta..

Ještě doplním, že ten článek, který vysvětluje vertical-align a na který odkazuješ, mi taky nijak nevysvětluje proč mi to nefunguje.. zvlášť když tam jsou pasáže typu:
"spodek prvku má lícovat se spodkem fontu, ale čert ví, co to vlastně dělá, protože je to obvykle moc nahoře"
Keeehi
Profil
quatzael:
Ty říkáš, že jo a já říkám, že ne.
A kdo má nejspíše pravdu? Téměř vždy ten zkušenější což je v tomto případě panther.

výšku elementu jsem si zjistil pomocí vývojářských nástrojů tak předpokládám, že je to skutečná výška.
Ano, v této konkrétní konstelaci to je 25px. Stačí si tu stránku spustit v jiném prohlížeči nebo jiném počítači a vše může být úplně nějak jinak.

protože pak bych už levej element nemohl zarovnávat dolů vůči pravýmu případně obalovýmu elementu
Ale vertical-align nezarovnává element, ale text v něm. To bude nejspíše ten kámen úrazu. Představte si řádek jako neviditelný obalový element. Výšku toho neviditelného elementu nastavíte pomocí line-height. Pokud tato velikost bude větší než výška textu (font-size), je tu místo pro použití vertical-align. Ten pak zarovnává text vertikálně k svému neviditelnému obalu, který (pro jistotu ještě jednou) musí být vyšší než samotné písmo. Což není tak úplně pravda, ale tím vás teď nebudu mást.
quatzael
Profil
Keeehi:
Ale vertical-align nezarovnává element, ale text v něm. To bude nejspíše ten kámen úrazu.
Supr. Dík moc. Konečně nějaké jednoznačnější vysvětlení jak se chová vlastnost vertical-align.

Ale snažím se tady už asi po šestý vysvětlit, že mi to nefunguje ani když nastavím výšku řádku větší než text v něm. Zkusil jsem tam u toho levýho elementu dát i height-line: 100px; a vertical-align: bottom; ale ten text prostě zůstává furt zarovnanej doprostřed toho řádku. Tak se tady snažím vysvětlit, že mi ten vertical-align prostě nefunguje a místo toho se pořád dokola dovídám, že mám nastavit výšku řádku...
Já už fakt nevím..
panther
Profil
quatzael:
Už tu máme 18 příspěvků, rady dostáváš pořád dokola ty stejné. Jiné nedostaneš, neexistují.
Už tu máme 18 příspěvků, pořád dokola tu říkáš, že ti někde něco nějak nefunguje. Kde je odkaz, kde bude problém k vidění? Něco děláš blbě.


Jen tak mimochodem:
potřebuju tenhle projekt dokončit v nějakém rozumném termínu
co na tohle říct... snad jen, Nejprve se uč, pak si ber nějaké zakázky. Vzít si zakázku a pak se učit, nevím nevím. Navíc to je tvůj, ne náš, problém, ty jsi za ten projekt placený. Fráze „Potřebuju - udělejte“ tu není moc oblíbená.
Plaváček
Profil
panther:
Davex:

Tedy, pánové, nechci být šťoura, ale to co, mu radíte, opravdu fungovat nebude. V podstatě existují dvě možná řešení - použít tabulku (ostatně z té krátké ukázky bych řekl, že se bude jednat o tabulková data), nebo zkusit tohle řešení: http://klient.plavacek.net/align.html, které nebude šlapat ve starších verzích IE (ale šlo by to samozřejmě ohnout).
quatzael
Profil
panther:
Fráze ‚Potřebuju - udělejte‘ tu není moc oblíbená.
Takhle to opravdu není. Já si opravdu vážím, že mi tady radíte, ale když prostě říkám, že to co mi vysvětluješ nechápu nebo že mi to nefunguje, tak to není proto, že by se mi nechtělo prostudovat odkazy, který tady uvádíš nebo si znovu pečlivě pročíst Tvoje příspěvky, ale prostě to říkám kvůli tomu, že to co mi vysvětluješ fakt nechápu a to co mi má fungovat mi nefunguje.. Vždycky se snažím co nejstručněji a nejvýstižněji popsat dotaz (což není taky vždycky jednoduchý), aby pro vás bylo snadný rychle pochopit problém a odpovědět třeba jen jednou nebo dvěma větama, aby jste taky neztráceli zbytečně čas.. rozhodně tady nedávám dotazy, tak aby jste za mě sami napsali x řádků kódu..

co na tohle říct... snad jen, Nejprve se uč, pak si ber nějaké zakázky. Vzít si zakázku a pak se učit, nevím nevím. Navíc to je tvůj, ne náš, problém, ty jsi za ten projekt placený.
Já jsem si tuhle "zakázku" nevzal. To je můj vlastní projekt. Před pár měsíci jsem o výtváření webu nevěděl prakticky vůbec nic, proto jsem na to hledal nějakýho programátora, ale buď se ukázalo, že vlastně programovat moc neumí (potřeboval jsem naprogramovat i nějaký webový služby a zjistil jsem, že moc programátorů to vlastně vůbec neumí.. mimochodem jsem tady dal i k tomu týkající se dotaz: Jak na SoapClient pro odesílání a přijímání XML?? a nikdo mi neodpověděl, z čehož usuzuju, že tyhle věci moc programátorů asi neumí) další, když viděli co po nich chci tak mi rovnou řekli, že do toho nejdou, protože je to celkově strašně složitý.. No a normálně vývojářská firma by si za to chtěla nejmíň 3 mega, takže mi nezbylo nic jinýho než si to udělat sám.. Programování jak se ukázalo zase není tak strašně složitý, akorát je to opravdu velkej projekt takže je s tím ohromný množství práce a občas se prostě vyskytne problém kdy ho z materiálů na webu a učebnic nejsem schopen rychle vyřešit..

A to, že je to můj projekt a nikdo z venku na mě netlačí s termínem neznamená, že prostě nepotřebuju to dokončit v nějaký rozumný době.. Chci potom dělat i jiný věci, ne jen programování.. A když vidím jak mi utíká mládí jenom kvůli takovým prkotinám jako je pozicování tak mě to prostě štve..
Prostě život je příliš krátkej..

A některý věci opravdu nejsou nikde na webu ani v učebnicích vysvětlený tak, abych si byl 100% jistej jak v reálu fungujou.. Třeba position: absolute x relative, floating a tady ten vertical-align není nikde vysvětlenej tak, aby mě občas něco z toho nepřekvapilo jiným chováním než bych čekal..
Plaváček
Profil
quatzael:

Mnou navržené řešení ti nevyhovuje?
quatzael
Profil
Plaváček:

Díky, seš zlatej!!

Je fakt, že není důvod, abych tu tabulku nemohl použít..

Mohl jsem to udělat už na začátku, ale netušil jsem, že vertical-align funguje primárně jen u tabulek..

Na www.w3schools.com mají totiž i vertikální centrování obrázků takže jsem si myslel, že to nebude problém i s div..

Každopádně moc moc díky!!!


Plaváček:

Mnou navržené řešení ti nevyhovuje?

Jojo, už jdu na to!! Tohle věřím, že už snad fungovat bude (myslím přímo tu tabulku, to druhý řešení když není stoprocenrní tak radši ne).
Když ne tak se zase ozvu:o)
Plaváček
Profil
quatzael:

w3schools.com není místo, kde bys měl sbírat rozumy. Spousta informací je nepřesných a některé dokonce blbé :)

P.S. Mé řešení bude fungovat od IE 8 (ve standardním režimu) nahoru.
quatzael
Profil
Plaváček:

no pro mě w3schools.com je první věc kam mrknu, když potřebuju zjistit jak něco udělat... Vysvětlený tam teda není skoro nic, ale je tam perfektní systém výčtu všech možných vlastností, atributů apod., že je to pro mě nejrychlejší pomocník.. Zatím jsem neměl s ničím problém, kromě toho vertical-align, který jsem z toho moc nepochopil a taky jsem tam myslím nenašel nějaký info o tom SoapClient, ale když se člověk v tom jejich, na první pohled ne moc přehledným zpracování, začne orientovat tak je to fakt šikovná pomůcka..

Ty znáš něco lepšího??
Plaváček
Profil
quatzael:

Ano, třeba tohle: http://www.quirksmode.org/.
quatzael
Profil
Plaváček:
no to se mi jeví spíš jako stránka, která se věnuje kompatibilitě různých verzí prohlížečů.. Ale jako podrobnej manuál na HTML,CSS,JS, jQuery,PHP,SQL, XML atd.. se to moc netváří..

Jestli na w3schools.com mají nepřesnosti jenom v tý nekompatibilitě tak čert to vem.. já potřebuju hlavně pomůcku kde najdu kompletní návod.. Taky tam sice chybí hodně věcí z jQuery a PHP, ale oproti jiným manuálům je toho tam fakt dost (a většina snad správně)..

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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