Your ISP, if Net Neutrality disappears (PIC)

CSSNEWBIE’s Super Simple Horizontal Navigation Bar

Original post at: http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

Tutorial by Rob Glazebrook on September 4, 2009

I occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a basic, no-frills horizontal navigation bar. And in more cases than not, a simple navigation bar is exactly what the doctor ordered.

So today’s tutorial is all about going back to basics. This is what you need to know to build a simple navigation bar like the one pictured above (and you can see a working example here).

The List

As with most modern navigation bars, ours will be based on the unordered list (<ul>) tag. This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site. The traditional horizontal orientation is simply a convenient means to get all of our most important list items “above the fold,” so the user can see them without having to scroll down the page.

So here is our sample HTML:

<ul id="nav">
 <li><a href="#">About Us</a></li>
 <li><a href="#">Our Products</a></li>
 <li><a href="#">FAQs</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Login</a></li>
</ul>

That’s really all it takes! You’ll notice I did use one ID, so we could tell our navigation bar apart from all the other unordered lists on the page. But if this were tucked into a div with its own ID (like a “banner” or “header” div), the ID probably wouldn’t be necessary. And yes, I could add even more IDs and classes if I wanted to make this fancier, but we’re all about simplicity today.

Making It Horizontal

By default, our list is vertical. So let’s make it horizontal:

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; }
#nav li {
    float: left; }

Here we’re floating both our list and our list items left. Floating the list items left is what pulls them into a nice horizontal row for us, stacking the items from left to right. However, because of how floats behave, our containing list will collapse to a height of zero unless it is also floated left.

Teknik Dasar Vokal: What we went through

It’s a 45 minutes meeting, consisting both the theory and practical vocal excercise.

Here’s what we did:

1. Theory practice: reading notes, translate musical chords into notes, and vice versa
2. Breathing practice: starts from 15-20 second sustain, to a lighthead-inducing 45-60 second sustain.
3. Solfegio: Progressive solfegio.
4. Song practice: You Raise Me Up, To God be the Glory.

Teori Teknik Dasar Vokal: Textbook

Seni adalah: Ungkapan perasaan seseorang yang dituangkan kedalam kreasi dalam bentuk gerak, rupa nada, syair, yang mengandung unsur-unsur keindahan, dan dapat mempengaruhi perasaan orang lain.

Teknik vocal adalah: cara memproduksi suara yang baik dan benar, sehingga suara yang keluar terdengar jelas, indah, merdu, dan nyaring.

Unsur-unsur teknik vokal:

1. Artikulasi
2. Pernafasan
3. Solfegio
4. Phrasering
5. Sikap badan
6. Resonansi vokal
7. Vibrato
8. Improvisasi
9. Intonasi

Cresendo adalah suara pelan berangsur-angsur keras.

Decresendo adalah suaran keras berangsur-angsur pelan.

Staccato adalah suara dalam bernyanyi yang patah-patah.

Suara Manusia

Suara manusia adalah instrument yang paling sempurna di antara semua alat musik. Karena terutama alat itu ada di dalam dirinya, berarti dekat dengan perasaan dan emosinya.

Fase Nada Musikal

Setiap nada musikal memiliki 3 buah fase atau segmen yaitu:

1. Fase permulaan (attack)
2. Fase penahanan (sustain)
3. Fase pelepasan (release)

Don Moen Live! I Believe There is More

Don Moen Live ! I Believe There is More

Workshop 14 Sept biaya Rp. 350rb / session

09.30 – 11.30    Sound Engineering

13.30 – 15.30    Multimedia

16.00 – 18.00    Song Writing

19.00 – 21.00    Life Style of a Woshipper & Worship Leading

 

Concert 15 Sept’09 jam 6pm

Tribun   Rp. 100 rb

Silver    Rp. 200 rb

Gold      Rp. 300 rb

 

Semua ini berupa voucher yg bisa dibeli sampai tgl. 11 Sept’09

Penukaran Voucher tgl. 13-15 Sept’09

Ticket bisa di beli di Pondok Pujian, TB.Immanuel, TB. Metanoia, TB Halleluya. Kalau ada yg mau ticket VIP langsung hubungi 021 5220878

Facing Your Giants by Max Lucado – 8 minutes webcast

If you focus on giants, you will fall. But if you focus on God your giants will. We read the story of David in 1 Sam 17. Take note of the times David refers to God and the number of times David refers to Goliath. I count 9 references to God and only 2 references to Goliath. 9 to 2 ratio. 4 times as many references to God as there is to Goliath.

Just awesome…

Wikipedia Will Use Colors to Add Layers of Trust to its Articles

Original blog post: http://ow.ly/15N7SK

Back in 2007, Mashable wrote about a plan to add different colors to various Wikipedia edits, signifying the level of their trustworthiness. It’s easier to trust editors with a high number of entries and revisions than those who are new to the site, and now registered users will be able to easily discern between the two by looking at the color of the text’s background.

If an untrusted source adds text to Wikipedia, it will have a bright orange background; text from trusted editors will be lighter. The background color will change over time; as more people view and edit the new entry, its background will slowly change color to white, signifying that it is getting more and more trustworthy. This feature, called WikiTrust, will be available for registered Wikipedia users.

Accuracy and bias on Wikipedia have always been a source of debate surrounding the largest online encyclopedia. After all, if anyone can edit it, it means that some degree of misinformation will always slip through. Wikipedia’s army of volunteers, however, have so far managed to do a pretty good job at keeping this enormous body of text relatively clean, with only a handful of incidents in its entire history.

The principle of how Wikipedia keeps itself accurate and bias free is simple: when people notice misinformation, they react and correct it. This is also the basis on which WikiTrust resides: the longer text is visible, the bigger the chance that it’s accurate. While WikiTrust won’t make Wikipedia’s accuracy 100% perfect – no encylopedia, regardless of how it’s maintained, can ever claim to have 100% accurate information – its color-based trust system will definitely make life easier for those for whom accuracy is crucial.

CSS Frameworks and the Resets

For quick development of standard-compliant and accessible web projects, most developers will use a reset css somewhere in their codes. In fact, all developers should have it before they want to see the same results across different browsers. I always use google’s blueprint reset css to get my projects started. How about you? Many frameworks have different resets in their code arsenals. So let’s take a look at each one of them. (For thos who never use this awesome tool you better read so here)

Google’s Blueprint. (Download page)

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

More resets coming up!

CSS 3 Around the Corner?

Then it’s time to compile resources for quick CSS 3 development. You can always google it and get what you want in less than a minute. But I prefer searching in my own blog, so here they are:

Code previews:

• http://www.css3.info/preview/

Modules:

• Status: http://www.css3.info/modules/

Tools:

• CSS3.info’s selector test. This tool will test your browser’s compatibility with CSS3.

More coming up!

How to center fixed-positioned element

This trick I’ve just discovered, is for some of you who have done fixed positioning but couldn’t make it work with the margin:0 auto; fix. It couldn’t, and will never work. So here’s how:

#fixedPositionedElement {
position:fixed;
left:50%;
width:250px;
margin:0 -125px;
}

So as you can see, the left margin is set to half of the element’s width. With this you will have a fixed-positioned and centered element.

I used this once for a notification pop-up that emulates the stylish WordPress’ Lightbox plugin.