Zarovnání doleva i doprava v jednom divu

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:


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..

tak jsem to udělal:


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:
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:
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:
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:
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...

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:


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:
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:
„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:
„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:

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:

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:
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ě)..