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 01:22 | Zajímavý projekt
Před měsícem byla spuštěna kampaň na podporu chytrého telefonu Librem 5, jenž by měl respektovat bezpečnost, svobodu a soukromí uživatelů. Cílem kampaně je vybrat alespoň milion a půl dolarů. Aktuálně je vybráno přes 600 000 dolarů, tj. 40 %. Kampaň poběží ještě další měsíc. Podporu projektu oznámilo KDE i GNOME.
Ladislav Hagara | Komentářů: 1
dnes 00:55 | Komunita

Agentura DISA (Defense Information Systems Agency) publikovala (pdf) Ubuntu 16.04 Security Technical Implementation Guide (STIG) (zip), tj. doporučené bezpečnostní nastavení Ubuntu 16.04. Ubuntu se tak dostalo mezi unixové operační systémy a linuxové distribuce AIX, HP-UX, Oracle Linux, Red Hat a Solaris [reddit].

Ladislav Hagara | Komentářů: 0
včera 22:55 | Bezpečnostní upozornění

CSIRT.CZ informuje, že byly vydány nové bezpečnostní aktualizace, které opravují několik zranitelných míst v Sambě. Útočník může využít zranitelnosti s cílem získání přístupu k potenciálně citlivých informací. Uživatelům a správcům je doporučeno, aby zkontrolovali bezpečnostní opatření pro CVE-2017-12150, CVE-2017-12151 a CVE-2017-12163 a provedli potřebné aktualizace.

Ladislav Hagara | Komentářů: 0
včera 21:44 | Komunita

Společnost Red Hat aktualizovala svůj slib ohledně softwarových patentů. Slib nově zahrnuje i open source software pod permisivními licencemi.

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

Do 22. září probíhá v Mountain View konference XDC2017 (X.Org Developer's Conference). Na programu je řada zajímavých přednášek. Sledovat je lze online. K dispozici je záznam přednášek ze včerejšího dne.

Ladislav Hagara | Komentářů: 0
20.9. 17:33 | Nová verze

Byla vydána nová stabilní verze 1.12 (1.12.955.36) webového prohlížeče Vivaldi (Wikipedie). Z novinek vývojáři zdůrazňují možnost zobrazení metadat u digitálních fotografií, vylepšený panel stahování a omezení sytosti barvy zdůraznění (YouTube). Nejnovější Vivaldi je postaveno na Chromiu 61.0.3163.91.

Ladislav Hagara | Komentářů: 39
20.9. 10:55 | Nová verze

Byla vydána verze 4.0 programovacího jazyka Swift (Wikipedie). Zdrojové kódy jsou k dispozici na GitHubu. Ke stažení jsou oficiální binární balíčky pro Ubuntu 16.10, Ubuntu 16.04 a Ubuntu 14.04.

Ladislav Hagara | Komentářů: 5
19.9. 23:33 | Zajímavý software

MojeFedora informuje, že PipeWire byl oficiálně oznámen (en). PipeWire bude zprostředkovávat aplikacím jednotný přístup k audiu a videu. Jedním z hlavních důvodů je možnost izolovat aplikace od audio a video zdrojů. Aplikace nebudou mít přímý přístup k hardwaru, ale budou se muset ptát multimediálního serveru PipeWire, který jim je na základě nastavených oprávnění poskytne nebo ne. V budoucnu by měl PipeWire nahradit PulseAudio.

Ladislav Hagara | Komentářů: 27
19.9. 00:55 | Zajímavý software

Společnost IBM věnovala svůj JVM (Java Virtual Machine) s názvem J9 nadaci Eclipse. Nové oficiální jméno tohoto virtuálního stroje určeného pro běh aplikací napsaných v programovacím jazyce Java je Eclipse OpenJ9 (Wikipedie). Podrobnosti v často kladených dotazech (FAQ).

Ladislav Hagara | Komentářů: 15
19.9. 00:11 | IT novinky

Mezinárodní konsorcium W3C (World Wide Web Consortium) publikovalo kontroverzní rozšíření HTML 5.1 EME (Encrypted Media Extensions) jako webový standard, tj. schválilo DRM v HTML 5.1. Mezinárodní nezisková organizace EFF (Electronic Frontier Foundation) hájící občanské svobody v digitálním světě zveřejnila na svých stránkách otevřený dopis adresovaný W3C. EFF s EME zásadně nesouhlasí a W3C opouští.

Ladislav Hagara | Komentářů: 57
Těžíte nějakou kryptoměnu?
 (5%)
 (3%)
 (17%)
 (75%)
Celkem 552 hlasů
 Komentářů: 22, poslední 29.8. 11:23
    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.