abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
×

dnes 02:00 | Nová verze

Byl vydán Debian 9.1, tj. první opravná verze Debianu 9 s kódovým názvem Stretch a Debian 8.9, tj. devátá opravná verze Debianu 8 s kódovým názvem Jessie. Řešeny jsou především bezpečnostní problémy, ale také několik vážných chyb. Instalační média Debianu 9 a Debianu 8 lze samozřejmě nadále k instalaci používat. Po instalaci stačí systém aktualizovat.

Ladislav Hagara | Komentářů: 0
včera 15:50 | Zajímavý článek

Nadace The Document Foundation (TDF) zastřešující vývoj svobodného kancelářského balíku LibreOffice zveřejnila čtyřiačtyřicetistránkovou výroční zprávu za rok 2016. K dispozici je ve formátu pdf ve vysokém (21,68 MB) a nízkém (7,1 MB) rozlišení. Zpráva byla vytvořena ve Scribusu.

Ladislav Hagara | Komentářů: 0
včera 14:40 | Zajímavý software

Mozilla.cz informuje, že Firefox Focus pro Android, velmi jednoduchý prohlížeč zaměřený na anonymní prohlížení, dosáhl milionu stažení. Firefox Focus blokuje sledující prvky a reklamy a při ukončení automaticky smaže všechna uložená data stránek, historii prohlížení a cookies.

Ladislav Hagara | Komentářů: 2
včera 14:20 | Komunita

Vyplněním dotazníku na Formuláře Google lze ovlivnit výběr výchozích aplikací v Ubuntu 18.04 LTS. Podrobnosti v příspěvku Dustina Kirklanda na Ubuntu Insights [reddit].

Ladislav Hagara | Komentářů: 1
21.7. 11:30 | Komunita

Etherpad (Wikipedie), svobodný online webový textový editor umožnující spolupráci v reálném čase, se stal oficiálním projektem organizace Software Freedom Conservancy (Wikipedie). Vývojáři Etherpadu se tak mohou stejně jako vývojáři dalších projektů soustředit pouze na vývoj softwaru a vše kolem zařídí Software Freedom Conservancy. Spuštěna byla instance Etherpadu pad.sfconservancy.org.

Ladislav Hagara | Komentářů: 2
21.7. 10:40 | Zajímavý článek

Lukáš Růžička se v článku Workrave ve Fedoře aneb jak si nevytunelovat karpál na MojeFedora.cz věnuje aplikaci Workrave (Wikipedie) na sledování času stráveného na počítači, která může pomoci vyhnout se negativním účinkům práce s počítačem (RSI, CTS), nebo je alespoň výrazně zmírnit.

Ladislav Hagara | Komentářů: 1
21.7. 10:00 | Komunita

Na Humble Bundle lze získat počítačovou hru Shadow Warrior: Special Edition běžící také v Linuxu zdarma. Speciální akce končí v sobotu v 19:00.

Ladislav Hagara | Komentářů: 2
20.7. 23:11 | Nová verze

Byla vydána verze 2.4.0 analyzátoru síťového provozu Wireshark. Jedná se o první stabilní verzi nové řady 2.4. Podrobný přehled novinek v poznámkách k vydání. V červnu proběhla konference SharkFest’17 US věnovaná Wiresharku. Záznamy přednášek jsou k dispozici na YouTube.

Ladislav Hagara | Komentářů: 1
20.7. 13:11 | Pozvánky

Spolek OpenAlt zve příznivce otevřeného přístupu na 142. brněnský sraz, který proběhne v pátek 21. července od 18:00 hodin ve Sport Centru Srbská (Srbská 4). Od 19:00 je pro zájemce zamluveno hřiště na plážový volejbal.

Ladislav Hagara | Komentářů: 0
20.7. 12:34 | Bezpečnostní upozornění

V GNOME Soubory, původně Nautilus, konkrétně v generování náhledů exe, msi, dll a lnk souborů byla nalezena a opravena bezpečnostní chyba CVE-2017-11421 s názvem Bad Taste. Při otevření složky obsahující tyto soubory může být spuštěn VBScript obsažen v názvech těchto souborů.

Ladislav Hagara | Komentářů: 3
Těžíte nějakou kryptoměnu?
 (4%)
 (0%)
 (19%)
 (77%)
Celkem 26 hlasů
 Komentářů: 0
    Rozcestník

    Dotaz: Stylování SPANu/H1 v html / CSS

    Johny z Podoli avatar 9.6.2011 16:44 Johny z Podoli | skóre: 26 | blog: rocfdebian
    Stylování SPANu/H1 v html / CSS
    Přečteno: 302×
    Potřebuji vytvořit <span> nebo <h1> který bude vypadat jako na screenshotu "výpis dostupných turnusů". Bohužel se mi to stále nedaří. OBRÁZEK

    Chtěl bych nějaké jednoduché řešení, tedy né tisíc vnořených spanů a podobně. Napadlo mě z obrázku vyříznout levé a pravé zkosení, pak H1 nastavit výšku a přes pseudotřídu before a after vložit zkosení, pak nastavit jen barvu pozadí. Funguje to, jenže když přidám ještě "width" prvku, tak vložení přes after je někde jinde než má být a celý prvek se rozpadne.

    Nemáte prosím někdo nápad jak toto přes CSS vyřešit?
    Můj web o táborech: Letní dětské tábory, Hudební tábor , Můj nový blog na Nul.cz

    Řešení dotazu:


    Odpovědi

    9.6.2011 18:13 Filip Jirsák | skóre: 66 | blog: Fa & Bi
    Rozbalit Rozbalit vše Re: Stylování SPANu/H1 v html / CSS
    Zeptejte se spíš v diskusním fóru na Jak psát web, tohle už je programování dost vzdálené. Na Jak psát web najdete mnohem víc lidí, kteří se tvorbou webu zabývají.
    Řešení 1× (Luboš Doležel (Doli))
    Josef Kufner avatar 9.6.2011 20:57 Josef Kufner | skóre: 67
    Rozbalit Rozbalit vše Re: Stylování SPANu/H1 v html / CSS
    Existují v zásadě dvě možnosti, jak to udělat.

    Obrázek na pozadí

    Prostě tu křivou plochu nakreslíš tak jak ji chceš a umístíš ji jako obrázek na pozadí. CSS pak bude vypadat takto:
    .křivej_nadpis {
      display: block;
      padding: 0;
      width: šířka obrázku;
      height: výška obrázku;
      background: barva top left no-repeat url(obrázek);
    }

    Vyrobit křivé okraje podobně, jako se dělají rámečky

    Tady je to trošku složitější, ale umožňuje to vytvořit křivý box s proměnlivou velikostí. Podle toho, jak moc to chceš mít proměnné, budeš potřebovat přidat divy. S ohledem na vyhledávače je rozumné divy přidat pomocí javascriptu, ale není to nutné.

    HTML:
    <h2 class="křivej_nadpis">nadpis
      <div class="ramecek levy"></div>
      <div class="ramecek pravy"></div>
      <div class="ramecek horni"></div>
      <div class="ramecek spodni"></div>
    </h2>
    
    CSS:
    .křivej_nadpis {
      display: block;
      padding: A B C D;
      position: relative;
      background: libovolné pozadí nadpisu;
    }
    
    .křivej_nadpis .ramecek {
      position: absolute;
      padding: 0px;
      margin: 0px;
      background; transparent top left;
    }
    
    .křivej_nadpis .ramecek.horni { /* žádná mezera před 3. tečkou */
      top: 0px;
      left: 0px;
      width: 100%;
      height: A;
      background-image: url(horní okraj obrázku);
      z-index: dle potřeby a obrázků;
    }
    
    .křivej_nadpis .ramecek.pravy {
      top: 0px;
      right: 0px;
      width: B;
      height: 100%;
      background-image: url(pravý okraj obrázku);
      z-index: dle potřeby a obrázků;
    }
    
    .křivej_nadpis .ramecek.spodni {
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: C;
      background-image: url(spodní okraj obrázku);
      z-index: dle potřeby a obrázků;
    }
    
    .křivej_nadpis .ramecek.levy {
      top: 0px;
      left: 0px;
      width: D;
      height: 100%;
      background-image: url(levý okraj obrázku);
      z-index: dle potřeby a obrázků;
    }
    
    V podstatě je to velmi jednoduché. Do nadpisu jsou přidané čtyři divy, které jsou prázdné a absolutně pozicované vrámci stylovaného nadpisu. Každý z těch čtyř divů překryje jednu hranu nadpisu a přilehlé rohy. Padding nadpisu se pak postará o to, aby obsah nebyl překrytý.

    Jediné co, tak to potřebuje jednobarevné okolní pozadí.

    Rámečky podruhé – vnořené divy, pozadí a padding

    Podobnou technikou je použití paddingu místo absolutního pozicování. Ozdobné divy jsou vnořené a obsah (text nadpisu) je v tom nejvnitřnějším.
    <h2 class="křivej_nadpis">
      <div class="ramecek levy">
        <div class="ramecek pravy">
          <div class="ramecek horni">
            <div class="ramecek spodni">
              nadpis
            </div>
          </div>
        </div>
      </div>
    </h2>
    
    V CSS je pak jen potřeba nastavit vhodný padding a obrázek na pozadí.
    .křivej_nadpis {
      padding: 0px;
      background: transparent;
      position: relative; /* aby margin sousedů nekecal do umístění obsahu */
    }
    
    .křivej_nadpis .ramecek {
      display: block;
      padding: 0px;
      margin: 0px;
      background: transparent;
    }
    
    .křivej_nadpis .ramecek.horni {
      padding-top: A;
      background: transparent top center no-repeat url(horní okraj);
    }
    
    .křivej_nadpis .ramecek.pravy {
      padding-right: B;
      background: transparent center right no-repeat url(pravý okraj);
    }
    
    .křivej_nadpis .ramecek.spodni {
      padding-bottom: C;
      background: transparent bottom center no-repeat url(spodní okraj);
    }
    
    .křivej_nadpis .ramecek.levy {
      padding-left: D;
      background: transparent center left no-repeat url(levý okraj);
    }
    
    Je to bezproblémová technika a lze vykouzlit i skutečně průhledné okraje. Na druhou stranu je trošku těžší umístit jednotlivá pozadí do jednoho obrázku, aby se ušetřily HTTP requesty.

    Všechny tři techniky fungují v IE6,7,8 a všech ostatních prohlížečích.
    Hello world ! Segmentation fault (core dumped)

    Založit nové vláknoNahoru

    Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

    ISSN 1214-1267   www.czech-server.cz
    © 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.