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 06:00 | Zajímavý článek

USA Network vysílá již třetí sérii seriálu Mr. Robot (Wikipedie, ČSFD.cz). Ryan Kazanciyan, technický konzultant seriálu, se na Medium v sérii článků Mr. Robot Disassembled věnuje jednotlivým dílům a popisuje použité nástroje a postupy.

Ladislav Hagara | Komentářů: 1
včera 23:55 | IT novinky

Společnost StartCom oficiálně oznámila, že jako certifikační autorita končí. Od 1. ledna 2018 přestane vydávat nové certifikáty a následující 2 roky bude poskytovat OCSP a CRL. Počátkem roku 2020 budou všechny platné certifikáty zneplatněny.

Ladislav Hagara | Komentářů: 5
včera 22:00 | IT novinky

Hodnota Bitcoinu, decentralizované kryptoměny, překonala hranici 8 000 dolarů [reddit].

Ladislav Hagara | Komentářů: 2
včera 21:55 | Zajímavý software

Byla vydána verze 10.0 linuxové distribuce Raspberry Digital Signage. Jedná se o distribuci pro jednodeskové počítače Raspberry Pi určenou k prezentačním účelům (veletrhy, prodejny, ...). Po naběhnutí systému je spuštěn webový prohlížeč v režimu celé obrazovky a vybraná prezentace. Nejnovější Raspberry Digital Signage vychází z distribuce Raspbian Stretch.

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

Společnost Google na svém blogu věnovaném open source představila container-diff, nástroj pro analýzu a porovnávání Docker kontejnerů. Zdrojové kódy jsou k dispozici pod licencí Apache 2.0.

Ladislav Hagara | Komentářů: 0
včera 08:00 | Komunita

Flatpak Workshop proběhne ve středu 29. listopadu od 10:00 v Brně. V dopolední přednáškové části se účastníci seznámí s Flatpakem, se specifiky pro aplikace napsané v Qt a GTK+, portály, které integrují aplikace do systému, a na závěr, jak dostat aplikaci do Flathubu, což je momentálně největší centralizovaný repozitář Flatpaků. V odpolední části si pak mohou za pomoci lektorů zkusit nějakou aplikaci zabalit pro Flatpak. Workshop je určen pro 20 účastníků. Nutná je registrace.

Ladislav Hagara | Komentářů: 6
včera 07:00 | Zajímavý článek

Software Freedom Law Center a Software Freedom Conservancy jsou organizace zaměřené na podporu svobodných/open-source projektů: SFLC poskytuje právní konzultace, SFC mj. také zázemí. SFC upozornila, že ze strany SFLC vůči ní proběhly právní kroky směřující k odebrání obchodní známky. SFLC v reakci tvrdí, že se jedná o logický krok, protože obchodní známky jsou si podobné, a SFC dlouhodobě nekooperuje. Brian Lunduke situaci shrnuje včetně ohlasů Neila McGoverna a Matthewa Garretta. Podle nich je Eben Moglen ze SFLC v konfliktu se zájmy komunity.

Fluttershy, yay! | Komentářů: 2
včera 06:00 | Komunita

MariaDB Foundation, nadace stojící za vývojem open source relační databáze MariaDB, oznámila, že Microsoft se stal jejím členem a platinovým sponzorem. Cílem Microsoftu je optimalizace MariaDB pro cloudovou platformu Microsoft Azure.

Ladislav Hagara | Komentářů: 0
16.11. 23:44 | IT novinky

Společnosti Dell a Canonical společně představily 5 nových počítačů Dell Precision s předinstalovaným Ubuntu. Jedná se o 4 notebooky a 1 all-in-one počítač. Cena počítačů s Ubuntu je o 100 dolarů nižší než jejich cena s Windows 10.

Ladislav Hagara | Komentářů: 15
16.11. 22:55 | Nová verze

Po pěti měsících vývoje od vydání verze 4.8 byla vydána nová verze 4.9 svobodného open source redakčního systému WordPress. Kódové označením Tipton bylo vybráno na počest amerického jazzového muzikanta a kapelníka Billyho Tiptona.

Ladislav Hagara | Komentářů: 0
Jak se vás potenciálně dotkne trend odstraňování analogového audio konektoru typu 3,5mm jack z „chytrých telefonů“?
 (9%)
 (1%)
 (1%)
 (1%)
 (74%)
 (14%)
Celkem 705 hlasů
 Komentářů: 36, poslední 17.11. 18:43
    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: 67 | 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.