spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login
Roman Hraška 19.12.2011, článok je súčasťou seriálu Yablkov TurboTip [HD]
Hodnoť článok:
1 0

Videocast: TurboTip 8 - Zarovnanie druhého riadku v zozname / CSS

Dnes nahradíme text obrázkom a zarovnáme druhé riadky textu zarovno s prvými. Ako praví džentlmeni. Um, yes, quite indeed.

  • občas sa stane toto:
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • ale my chceme toto:
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

720p, dajte si darček vysokého rozlíšenia.

Yablkov TurboTip 8 - Zarovnanie druhého riadku v zozname a image replacement

Recorded on a device designed in not-China.

zahraj sa s kódom »

ak ma chceš podporiť, behni na yablko.sk a možno spravím nový seriál či dva:)

Sledujte yablka skrz twitter - @yablko - pre informácie o nových videách, humor, ktorý baví len jeho a občasné nervové zrútenie.

* * *

Páči sa ti Yablkov TurboTip?

Roman Hraška Roman Hraška

Robí s webom a občas o tom napíše. Nekomplikuje jednoduché a snaží sa neznieť príliš dôležito, pretože nie je. Medzi jeho záľuby patria jeho záľuby a tautológia. Nájdeš ho na brm.sk a obsmŕda aj na twitteri, ako @yablko.

Skús moje seriály: Nauč sa jQuery, Nauč sa CodeIgniter a Yablkov TurboTip. Ak ma chceš dohnať k tvorbe nových seriálov, behni na yablko.sk :)


Hodnoť článok:
1 0


8 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 viťo 20.12.2011 08:53:31
ono sa toto da pouzit aj s obrazkom a funguje to vsade.. najlepsie vsak pouzit sprite - ak uz mame a vyuzit nejake biele miesto..
0 0 Roman Hraška 19.12.2011 19:15:53
jo a takto sa na to naučíme pozerať všetci a hneď to tu bude krajšie ;)
0 0 František "yderf" Haško 19.12.2011 18:38:27
Miloš:
Prvá vec: zaoberať sa nejakou starou Operou pri negatívnom margin/text-indente je blbosť. Ak túto vlastnosť nejaká súčasna verzia prehliadača nepodporuje, odporúčam to rovno tvorcom nahlásiť, lebo to je neúplná implementácia základnej CSS2.1 vlastnosti, čo je hanba.

Tiež je čudný argument s img a div-om s pozadím. Samozrejme, jedno aj druhé je správne. Čo použijem závisí od toho, či obrázok je obsah alebo grafika.

A posledné, na čo zareagujem, lebo to vidím ako najpodstatnejšiu vec, komentovať takúto vec ako "krkolomnú zlátaninu...bez možnosti reálneho použitia" je nesprávne, lebo podstatný nie je príklad, ale postup. Ak čitateľ (v tomto prípade pozerateľ :) ) pochopí postup, tak sa naučí pravdepodobne nie úplne tradičné použitie vlastnosti, ktoré nepoznal. Áno, samozrejme, že hlavné logo sa dá cez img, tu však nešlo o seo, tu šlo o CSS.
0 0 Roman Hraška 19.12.2011 15:25:41
s tým negatívnym marginom neviem na čo narážaš, každopádne negatívne hodnoty sú v text-indent plne legálne a nie je to žiaden hack ani nič.. pokiaľ tam nekydneš nejaké neuveriteľne vysoké číslo.. každopádne tých -18px ako v príklade je pohodička

k tým fontom, skús sa pohrabať v tomto: http://necolas.github.com/normalize.css/
0 0 Miloš 19.12.2011 14:59:37
Takže video som pozrel a je to tak. Poznám to v podstate od začiatku ako som začal s webom. Ale je pravda, tiež som sa musel na to opýtať niekoho šikovnejšieho.

No ale nedá mi nedať komentár k prvej časti videa. Logo sa dáva zvyčajne na začiatok stránky na každú podstránku. Dáva sa to do img s vyplneným alt a title. Názov firmy sa dáva aj do title na stránke, takže ďalšia informácia pre Google. Ak sa jedná o zoznam firiem, tak okrem loga sa píše aj názov, takže táto krkolomná zlátanina opäť odpadá. Nevidím teda možnosť reálneho použitia.

Dovolím si ale upozorniť, že niektoré staršie prehliadače, napr. Opera mala problém so záporným marginom a dodnes je takýto neštandardný zápis problématický (tu myslím všeobecne, nie konkrétne záporný margin) problematický u Opery Mini, ktorá pri drobných prehreškoch na stránke dokáže čitateľovi urobiť hotové peklo pri prehliadaní. Takže od takýchto vecí by som určite upustil. Netreba hádzať Googlu všelijaké neštandardné veci, aby to videl, treba spraviť kvalitný obsah a Google nájde všetko potrebné. Je choré ako niektorí dokážu znetvoriť a zneprehľadniť stránky len za to, aby mali "o bod viac" u Googlu. Kód má byť hlavne čitateľný pre programátora a bez neštandardných vecí, ktoré jeho úpravu iba komplikujú. Načo sú potom štandardy? Prečo teda vôbec používať img, keď miesto neho môžme dávať divy a spany s pozadím a podobne? Píšme kód tak ako ho písať treba.
0 0 Miloš 19.12.2011 14:32:46
Myslím, že toto ovládam už dlho, taká banalita. Ale zaujímalo by ma ako dosiahnuť, aby pri rovnakom fonte a veľkosti písma bol text identický aj v input type text aj v textarea. Toto som nikdy nedokázal. Ak je to závislé na prehliadači, tak jedná sa konkrétne o Firefox.
0 0 Roman Hraška 19.12.2011 13:10:07
niekde som počul prednášku chlapíka z googlu, kde tvrdil, že ich algoritmus s tým počíta v logách a tak, čiže ak to nezneužívaš, malo by to byť ok <small>[citation needed]</small>

--

primárne som tu však chcel ukázať ten mini text-indent trik pre zarovnanie riadkov, keď budeme ďalej kecať o image replacement, riskujeme, že viktor čech dostane infarkt :)

a tento krát by mal v istom zmysle aj pravdu, image replacement je roky rokúce zaužívaná technika avšak to nič nemení na tom, že existujú ľudia, ktorí sa ešte len učia a pre nich to môže byť užitočné
0 0 Andrej Guráň 19.12.2011 12:56:50
Nemôže to napr. google vyhodnotiť, akože sa ho snažíme ošuškať a penalizovať nás za to, že máme nejaký H1 element na stránke, ale cez css ho skryjeme?
Zajtra.sk > Programovanie > Seriály > Videocast: TurboTip 8 - Zarovnanie druhého riadku v zozname / CSS


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama