FLASH a absolutne pozycjonowanie

 

FLASH - pozycjonowanie absolutne CSS z-index

Prócz Firefoxa przeglądarki domyślnie przesuwają obiekt FLASH na szczyt stosu. Nie pomoże nawet absolutne pozycjonowanie (position: absolute) i właściwość z-index użyte na elemencie, którym chcesz przesłonić obiekt SWF. Obiekt FLASH będzie nadal widoczny.

Rozwiązanie

Po pierwsze do elementu, opisującego FLASH-a, dodaj parametr wmode. Po drugie, do elementu embed, dodaj atrybut wmode o wartości opaque. Zobacz na przykład poniżej:


<object width="300" height="200">
   <param name="movie" value="banner.swf">
   <param name="wmode" value="opaque">
   <embed src="banner.swf" wmode="opaque" width="300" height="200">
   </embed>
</object>

Voila! Teraz możesz już przesłaniać obiekt FLASH za pomocą CSS i absolutnego pozycjonowania. Rozwiązanie działa na wszystkich przeglądarkach.

Znasz inne, lepsze rozwiązanie? Użyłeś powyższego? Podziel się w komentarzu!

 
 

hCalendar – umów się w XHTML-u

 

Warning: DOMDocument::loadHTML() [domdocument.loadhtml]: Unexpected end tag : p in Entity, line: 69 in /home/noir/domains/kissdesign.pl/public_html/wp-content/themes/kissdesign/netninja_wp.php on line 134

hCalendar - mikroformat przykładyCiąg dalszy cyklu o najpopularniejszych mikroformatach. Dotychczas poznałeś format hCard, teraz czas na hCalendar.

hCalendar – hIstoria

Format hCalendar powstał, aby wyszukiwanie informacji o wydarzeniach było jeszcze prostsze. Algorytmy wyszukiwarek będą mogły z dużym prawdopodobieństwem odpowiedzieć np. na zapytanie kiedy i gdzie odbywa się koncert Madonny? To nie wszystko! Dzięki hCalendar wymiana danych o wydarzeniach będzie jeszcze prostsza. Zaznaczenie myszą fragmentu strony opartej o hCalendar, kliknięcie prawym przyciskiem i zapisz wydarzenie w komórce to jeszcze przyszłość. Jak daleka? Zobaczymy!

hCalendar – opis mikroformatu

Użycie mikroformatu jest naprawdę proste. Wystarczy użyć odpowiednich klas CSS do opisania danych. Nazwy klas są naprawdę intuicyjne. Zobacz na ten przykład użycia hCalendar:


<div class="vevent">
   <abbr title="2010-09-06T08:0000" class="dtstart">6 Września 2010,  8:00</abbr> : 
   <abbr title="2010-09-08T22:00" class="dtend">8 Września 2010,  22:00</abbr> :  
   <span class="summary">Konferencja hCalendar2010</span> w 
   <span class="location">Poznań, Plac Wolności 4</span>
   <div class="description">Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.</div>
   <div class="tags">Tagi: 
   <a href="http://eventful.com/events/tags/konferencja" rel="tag">konferencja</a>
   <a href="http://eventful.com/events/tags/web%20design" rel="tag"> web design</a>
   </div>
</div>

Oczywiście nie musisz pamiętać wszystkich pól i klas. Skorzystaj z generatora on-line hCalendar.

hCalendar – jak to wygląda?

Format specyfikuje jedynie odpowiednie elementy HTML opisane klasami CSS. To wszystko. Dlatego forma prezentacji jest całkowicie dowolna. Zobacz powyższy przykład w wersji live:

Konferencja hCalendar2010
Poznań, Plac Wolności 4

Od 6 Września 2010, 8:00
do 8 Września 2010, 22:00

Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.

Chcesz skorzystać z powyższego szablonu dla hCalendar? Pobierz plik CSS layoutu hCalendar.

Korzystasz już z formatu hCalendar? Znasz inne mikroformaty? Chcesz się dowiedzieć więcej na ten temat? Napisz w komentarzu!

 
 

Przyciśnij CSS-a przyciskiem

 

Jak zrobić w prosty sposób własne przyciski na stronę? CSS w czystej postaci. Wystarczą nam cztery reguły CSS i dwa pliki graficzne:

Przycisk w cssPrzyciski css - obraz buttona

Dłuższy plik ma maksymalną szerokość przyszłego przycisku. Dlaczego obrazy są zduplikowane? Dla efektu naciśnięcia – powyżej jest wersja wklęsła, poniżej – wypukła.

Kod HTML przycisków

<a href="http://kissdesign.pl" class="button"><span>Kliknij na mnie :)</span></a>

Kod CSS przycisku

a.button{
	background: url(btn0.png) right -31px no-repeat;
	padding: 0 21px 0 0;
	height: 31px;
	display: block;
	float: left;
	text-decoration: none;
	line-height: 31px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	outline: none;
} 
a.button:active{
	background-position: right 0;
} 
a.button span{
	background: url(btn1.png) 0 -31px no-repeat;
	padding-left: 21px;
	height: 31px;
	display: block;
	font-size: 12px;
	color: #fff;
} 
a.button:active span{
	background-position: 0 0;
}

Ściągnij gotowca

Pobierz gotowe reguły przycisków CSS wraz z grafikami.

Podoba Ci się ten wpis? Interesuje Cię tematyka związana z zastosowaniem CSS? Podziel się wrażeniami w komentarzu!

 
 

hCard – internetowa wizytówka

 

hCard - opis mikroformatu do danych kontaktowychInternet rozwija się w kierunku semantycznej sieci. Chociaż większą część tego trendu biorą na swe barki programiści wyszukiwarek (synonim dla Google), to nie znaczy, że możesz pozostać bierny.

Nie chodzi jedynie o pisanie poprawnego, semantycznego kodu XHTML. To już było. Teraz nadchodzi czas mikroformatów!

hCard – ale o co chodzi?

hCard to format opisujący dane kontaktowe osób, instytucji, adresy miejsc itd. Idea powstania takiego formatu jest jasna – jeden uniwersalny format pozwala na łatwą wymianę, obróbkę i wreszcie wyszukiwanie danych. Dokładnie tak, jak w kontaktach biznesowych – wymieniasz wizytówki na spotkaniu zamiast spisywać adresy i telefony.

hCard – hOwto

Jak użyć mikroformatu hCard? Wystarczy zastosować odpowiednie klasy do opisu danych w ściśle określonym formacie. Jeżeli śmierdzi Ci to czytaniem dłuugiej specyfikacji, to się mylisz. Spójrz na ten przykład:

<div id="hcard-Artur-Polkowski" class="vcard">
   <a class="url fn n" href="http://kissdesign.pl">  <span class="given-name">Artur Polkowski</span></a>
   <div class="org">KISS design</div> //nazwa organizacji
   <a class="email" href="mailto:art.polkowski@gmail.com"> art.polkowski@gmail.com</a>
   <div class="adr">
      <div class="street-address">Łąkowa 15</div>
      <span class="locality">Poznań</span>, <span class="postal-code">60-900</span>
   </div>
   <div class="tel">605 444 555</div>
</div>

Voila!
W głównym obiekcie z klasą (koniecznie!) vcard, umieszczasz poszczególne informacje teleadresowe. Pełna specyfikacja hCard jest oczywiście szersza i obejmuje więcej opcjonalnych pól, ale dla większości przypadków, znajomość powyższych nazw klas jest wystarczająca. Nie musisz jednak ich wszystkich pamiętać. Skorzystaj z generatora hCard on-line. Dzięki niemu masz pewność, że Twój kod jest poprawny i gotowy do wklejenia wprost na stronę.

hCard – a jak to wygląda?

Tak jak zechcesz! Dzięki temu, że dane są opisane ściśle określonymi nazwami klas, nawet nie musisz samodzielnie pisać reguł css. Możesz skorzystać z gotowych! Ściągnij poniższą stylizację hCard w CSS mojego autorstwa!

Artur Polkowski

KISS design

Łąkowa 15

Poznań, 60-900

605 444 555

Szukasz inspiracji? Zobacz projekty pierwszych wizytówek!

 
 
następne wpisy »