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í
×
eParkomat, startup z ČR, postoupil mezi finalisty evropského akcelerátoru ChallengeUp!
Robot na pivo mu otevřel dveře k opravdovému byznysu
Internet věcí: Propojený svět? Už se to blíží...
včera 16:24 | Nová verze

Byla vydána Mageia 5.1. Jedná se o první opravné vydání verze 5, jež vyšla v červnu loňského roku (zprávička). Uživatelům verze 5 nepřináší opravné vydání nic nového, samozřejmě pokud pravidelně aktualizují. Vydání obsahuje všechny aktualizace za posledního téměř půldruhého roku. Mageia 5.1 obsahuje LibreOffice 4.4.7, Linux 4.4.32, KDE4 4.14.5 nebo GNOME 3.14.3.

Ladislav Hagara | Komentářů: 0
včera 13:42 | Pozvánky

V Praze probíhá konference Internet a Technologie 16.2, volné pokračování jarní konference sdružení CZ.NIC. Konferenci lze sledovat online na YouTube. K dispozici je také archiv předchozích konferencí.

Ladislav Hagara | Komentářů: 0
2.12. 22:44 | Komunita

Joinup informuje, že Mnichov používá open source groupware Kolab. V srpnu byl dokončen dvouletý přechod na toto řešení. V provozu je asi 60 000 poštovních schránek. Nejenom Kolabu se věnoval Georg Greve ve své přednášce Open Source: the future for the European institutions (SlideShare) na konferenci DIGITEC 2016, jež proběhla v úterý 29. listopadu v Bruselu. Videozáznam přednášek z hlavního sálu je ke zhlédnutí na Livestreamu.

Ladislav Hagara | Komentářů: 18
2.12. 15:30 | Zajímavý projekt

Společnost Jolla oznámila v příspěvku Case study: Sailfish Watch na svém blogu, že naportovala Sailfish OS na chytré hodinky. Využila a inspirovala se otevřeným operačním systémem pro chytré hodinky AsteroidOS. Použita je knihovna libhybris. Ukázka ovládání hodinek na YouTube.

Ladislav Hagara | Komentářů: 8
2.12. 14:15 | Nová verze

Byla vydána verze 7.1.0 skriptovacího jazyka PHP používaného zejména k vývoji dynamických webových stránek. Jedná se o první stabilní verzi nejnovější větvě 7.1. Přehled novinek v dokumentaci. Podrobnosti v ChangeLogu. K dispozici je také příručka pro přechod z PHP 7.0.x na PHP 7.1.x.

Ladislav Hagara | Komentářů: 2
2.12. 12:55 | Nová verze

Google Chrome 55 byl prohlášen za stabilní. Nejnovější stabilní verze 55.0.2883.75 tohoto webového prohlížeče přináší řadu oprav a vylepšení (YouTube). Opraveno bylo také 36 bezpečnostních chyb. Mariusz Mlynski si například vydělal 22 500 dolarů za 3 nahlášené chyby (Universal XSS in Blink).

Ladislav Hagara | Komentářů: 4
2.12. 11:55 | Pozvánky

Máte rádi svobodný software a hardware nebo se o nich chcete něco dozvědět? Přijďte na 135. sraz spolku OpenAlt, který se bude konat ve čtvrtek 8. prosince od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Sraz bude tentokrát tématický. Bude retro! K vidění budou přístroje jako Psion 5mx nebo Palm Z22. Ze svobodného hardwaru pak Openmoko nebo čtečka WikiReader. Přijďte se i vy pochlubit svými legendami, nebo alespoň na pivo. Moderní hardware má vstup samozřejmě také povolen.

xkucf03 | Komentářů: 0
2.12. 00:10 | Nová verze

Byla vydána verze 3.2 svobodného systému pro detekci a prevenci průniků a monitorování bezpečnosti počítačových sítí Suricata. Z novinek lze zmínit například podporu protokolů DNP3 a CIP/ENIP, vylepšenou podporu TLS a samozřejmě také aktualizovanou dokumentaci.

Ladislav Hagara | Komentářů: 0
1.12. 21:00 | Nová verze

Byla vydána beta verze Linux Mintu 18.1 s kódovým jménem Serena. Na blogu Linux Mintu jsou hned dvě oznámení. První o vydání Linux Mintu s prostředím MATE a druhé o vydání Linux Mintu s prostředím Cinnamon. Stejným způsobem jsou rozděleny také poznámky k vydání (MATE, Cinnamon) a přehled novinek s náhledy (MATE, Cinnamon). Linux Mint 18.1 bude podporován až do roku 2021.

Ladislav Hagara | Komentářů: 0
1.12. 16:42 | Nová verze

Byl vydán Devuan Jessie 1.0 Beta 2. Jedná se o druhou beta verzi forku Debianu bez systemd představeného v listopadu 2014 (zprávička). První beta verze byla vydána v dubnu letošního roku (zprávička). Jedna z posledních přednášek věnovaných Devuanu proběhla v listopadu na konferenci FSCONS 2016 (YouTube, pdf).

Ladislav Hagara | Komentářů: 0
Kolik máte dat ve svém domovském adresáři na svém primárním osobním počítači?
 (32%)
 (24%)
 (29%)
 (7%)
 (5%)
 (3%)
Celkem 767 hlasů
 Komentářů: 50, poslední 29.11. 15:50
Rozcestník
Reklama

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: 299×
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: 66
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.