Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: a confetti menu dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/maps

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Sebuah Menu Konfeti

Menu berwarna yang anda lihat dibawah hanyalah sebuah elemen DIV dengan beberapa elemen P didalamnya. Efek visual tersebut disebabkan karena tiap elemen P ditempatkan secara individual dan mempunyai fonta dan warnanya sendiri. Hal ini sangat cocok untuk teks yang singkat, karena efek visual tersebut menimpa satu dengan lainnya, tapi bila teks terlalu panjang, maka akan tulisan yang bertabrakan akan menjadi sulit dibaca.

Style sheet memungkinkan sebuah menu yang terdiri dari 10 elemen, contoh terebut menggunakan 8. Berikut sumber HTML dari contoh diatas:

<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">What's new?</a>
<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">Learning CSS</a>
<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Specs</a>
<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Perhatikan class "map" dalam elemen DIV, yang membuat hal tersesbut kedalam sebuah kontainer untuk menu tersebut, dan atribut ID dalam P. Tiap elemen P harus memiliki sebuah ID (yang berbeda), yang dinamakan p1, p2,... atau p10. Meskipun tidak harus menggunakan ID secara berurutan (seperti yang di perlihatkan contoh). Anda dapat menggunakan style sheet dengan mennyalinnya ke style sheet anda sendiri, atau dengan menggunakan @import atau sebuah elemen LINK untuk mengimpor map.css langsung dari situs W3C site: salah satu dari

@import "http://www.w3.org/Style/map.css";

atau

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Penjelasan dari style sheet tersebut

Begini cara kerja style sheet tersebut. Style sheet tersebut mulai dengan mendefinisikan sebuah elemen DIV dengan class "map". Hal tersebut menciptakan sebuah ruang dengan tinggi 190px dimana isi dari elemen P akan ditempatkan. Kemudian setiap elemen dengan ID  p1 hingga p10 diberikan warna dan fonta, dan setiap elemen diposisikan di dalam ruang tersebut yang terbuat dari div dengan menggunakan properti 'margin': sebuah nilai negatif untuk top margin menggerakkan elemen tersebut ke atas ruang DIV dan nilai bottom margin yang positif memastikan bahwa elemen berikutnya mulai dari bagian bawah DIV tersebut.

(Kelemahan dari style sheet ini ialah bahwa segalanya menggunakan px. Anda mungkin ingin mengubahnya menjadi persentase, jika anda memiliki sebuah browser yang mengimplementasi CSS secara baik.)

DIV.map { /* Reserve some room for the links */
padding-top: 190px;
margin-left: -2em; /* Adapt this to your own page... */
margin-right: -2em; /* Adapt this to your own page... */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
text-decoration: none }

#p1, #p1 A {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1 {text-align: right; margin: -185px 0 85px 0} /* top right */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* top left */
#p3 {text-align: right; margin: -90px 35% 50px 0} /* center */
#p4 {text-align: right; margin: -95px 0 55px 0} /* center right */
#p5 {text-align: left; margin: -130px 0 30px 0} /* center left */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* bottom center */
#p7 {text-align: right; margin: -80px 0 0px 0} /* bottom right */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* bottom left */
#p9 {text-align: right; margin: -25px 0 5px 0} /* bottom right */
#p10 {text-align: left; margin: -130px 0 70px 0} /* center left */

Tentu saja, anda bebas untuk mengubah style sheet tersebut dengan fonta, warna dan posisi yang berbeda, atau menciptakan aturan style tambahan untuk lebih dari 10 elemen. Juga perhatikan margin kanan dan kiri dari DIV tersebut: nilai mereka dibuat negatif, sehingga menu lebih lebar dari text yang mengelilinginya, tapi dalam halaman margin tersebut mungkin tidak cukup lebar untuk hal ini, jadi anda mungkin perlu menghilangkan aturan ini.

Bila anda mencoba style tersebut, anda mungkin akan memperhatikan bahwa style ini tidak bekerja dengan begitu baik di Netscape 4. Hal tersebut merupakan salah Netscape 4, tentunya. Tapi bagaimanapun, map-ns.css adalah sebuah style sheet yang mirip dan terlihat baik di browser tersebut. Trik berikut di dalam bagian head di dokumen HTML memungkinkan versi dari Netscape 4 dan versi versi berikutnya untuk dapat mengimplementasi CSS dengan lebih baik:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Implmentasi CSS yang benar akan membaca kedua style sheet tersebut, tetapi aturan kedua akan mengkesampingkan yang pertama, jadi selain dari sedikit kerja yang remeh, tidak ada perubahan. Tetapi Netscape 4, tidak akan memuat style sheet kedua, karena atribut "media", tidak dimengerti oleh browser terebut.

Juga, anda mungkin mengira-ngira kenapa elemen-elemen diposisikan dengan menggunakan margin (negative), meskipun hal ini terlihat sebagai calon yang baik untuk properti perletakan absolut. Memang, anda dapat melakukan hal yang sama dengan 'position' serta 'left' & 'right'. Alasan mengapa style shee ini menggunakan margin, adalah karena cara ini dapat berkerja dengan browser yang hanya menerapkan CSS1.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2007/10/27 00:47:16 $ GMT