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í
×
včera 23:22 | Komunita

Na dnes, poslední středu v březnu, připadá Document Freedom Day (DFD, Wikipedie), jenž má upozornit na výhody otevřených standardů a formátů dokumentů. Organizátoři se rozhodli, že letos proběhne Document Freedom Day dvakrát. Druhý letošní Document Freedom Day proběhne 26. dubna.

Ladislav Hagara | Komentářů: 0
včera 12:33 | Nová verze

Byla vydána nová stabilní verze 1.8 (1.8.770.50) webového prohlížeče Vivaldi (Wikipedie). Z novinek vývojáři zdůrazňují vylepšenou historii prohlížení. Ukázka na YouTube. Chromium bylo aktualizováno na verzi 57.0.2987.111.

Ladislav Hagara | Komentářů: 0
včera 05:55 | Zajímavý projekt

Google na svém blogu věnovaném open source představil portál Google Open Source informující mimo jiné o více než 2000 open source projektech vyvíjených nebo používaných v Googlu.

Ladislav Hagara | Komentářů: 0
včera 03:33 | IT novinky

Pro společnost Red Hat skončil 28. února fiskální rok 2017. Dle finančních výsledků bylo čtvrté čtvrtletí, stejně jako celý fiskální rok 2017, opět úspěšné. Tržby jsou zvyšovány již 60 čtvrtletí v řadě. Za čtvrté čtvrtletí 2017 to bylo 629 milionů dolarů, tj. meziroční nárůst 16 %. Tržby za celý fiskální rok činily 2,4 miliardy dolarů, tj. meziroční nárůst 18 %.

Ladislav Hagara | Komentářů: 2
28.3. 18:22 | Bezpečnostní upozornění

V balíčku eject, příkaz pro vysunutí CD/DVD z mechaniky, v linuxových distribucích Ubuntu (USN-3246-1) a Debian (#858872) byla nalezena bezpečnostní chyba CVE-2017-6964 zneužitelná k lokální eskalaci práv. Linuxové distribuce používající eject z balíčku util-linux nejsou zranitelné.

Ladislav Hagara | Komentářů: 15
28.3. 05:55 | Komunita

Dries Buytaert, autor a vedoucí projektu Drupal a prezident Drupal Association, požádal soukromě před několika týdny Larryho Garfielda, jednoho z klíčových vývojářů Drupalu, aby projekt Drupal opustil. Larry Garfield minulý týden na svých stránkách napsal, že důvodem jsou jeho BDSM praktiky a rozpoutal tím bouřlivou diskusi. Na druhý den reagoval Dries Buytaert i Drupal Association. Pokračuje Larry Garfield [reddit].

Ladislav Hagara | Komentářů: 55
28.3. 04:44 | Humor

Společnost SAS zveřejnila na svých stránkách studii s názvem Open Source vs Proprietary: What organisations need to know (pdf). Organizace by měly například vědět, že ideální je mix 40 % open source softwaru a 60 % proprietárního softwaru [Slashdot].

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

Byl vydán ShellCheck ve verzi 0.4.6. Jedná se o nástroj pro statickou analýzu shellových skriptů. Shellové skripty lze analyzovat na webové stránce ShellChecku, v terminálu nebo přímo z textových editorů. Příklady kódů, na které analýza upozorňuje a doporučuje je přepsat. ShellCheck je naprogramován v programovacím jazyce Haskell. Zdrojové kódy jsou k dispozici na GitHubu pod licencí GPLv3.

Ladislav Hagara | Komentářů: 0
27.3. 23:33 | Pozvánky

Czech JBoss User Group zve na setkání JBUG v Brně, které se koná ve středu 5. dubna 2017 v prostorách Fakulty informatiky Masarykovy univerzity v místnosti A318 od 18:00. Přednáší Pavol Loffay na téma Distributed Tracing and OpenTracing in Microservice Architecture.

… více »
mjedlick | Komentářů: 0
27.3. 11:33 | Zajímavý článek

Národní centrum kybernetické bezpečnosti (NCKB) vypracovalo (pdf) 26 podrobných bezpečnostních doporučení pro síťové správce. Tato doporučení jsou nastavena tak, aby je bylo možné aplikovat v každé instituci. Jsou rozdělena na tři základní části: bezpečnost infrastruktury, bezpečnost stanic a serverů a bezpečnost uživatelů.

Ladislav Hagara | Komentářů: 17
Jak se stavíte k trendu ztenčování přenosných zařízení (smartphony, notebooky)?
 (14%)
 (2%)
 (72%)
 (3%)
 (10%)
Celkem 965 hlasů
 Komentářů: 72, poslední 1.3. 11:16
    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.