Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
10 Rare HTML Tags You Really Should Know - Nettuts+ Web developers these days are often expected to know and work in multiple languages. As a result, it's tricky to learn everything a language has to offer and easy to find yourself not utilizing the full potential of some more specialized but very useful tags. Unfortunately we haven't been tapping into the full potential of these more obscure HTML tags as of late. Here are ten of some of the most underused and misunderstood tags in HTML. 1. All of us will be familiar with the <blockquote> tag, but did you know about <blockquote>'s little brother <cite>? The <cite> tag is really useful for citing bibliographic and other site references. David Allen's breakthrough organization book Getting Things Done has taken the web by storm. 2. The <optgroup> tag is a great way to add a little definition between groups of options inside a select box. Live demo: This allows the select list to visually separate the movie listings. 3. The <acronym> tag is a way to define or further explain a group of words.
960 Grid System 456 Berea Street: Articles and news on web standards, accessibil Javascript code prettifier Languages : CH Setup Download a distribution Include the script tag below in your document <script src=" See Getting Started to configure that URL with options you need. Look at the skin gallery and pick styles that suit you. Usage Put code snippets in <pre class="prettyprint">... For which languages does it work? The comments in prettify.js are authoritative but the lexer should work on a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, and Rust. Other languages are supported via extensions: If you'd like to add an extension for your favorite language, please look at src/lang-lisp.js and file an issue including your language extension, and a testcase. How do I specify the language of my code? You don't need to specify the language since prettyprint() will guess. <pre class="prettyprint lang-html"> The lang-* class specifies the language file extensions.
Top 12 Ruby on Rails Tutorials A former student asked me a few days ago how I learned Ruby on Rails. The answer was that I simply read alot of great tutorials. So in the spirit of sharing, here are the 12 tutorials that I found most useful: Rolling with Ruby on Rails – Curtis Hibbs of ONLamp.com offers his first excellent introduction to Ruby on Rails. This is the article that got me really excited about RoR.2. Rolling with Ruby on Rails, Part 2 – The sequel to Curtis Hibbs excellent series of articles.3. Hey, Ruby on Rails Fans! UPDATE, JUNE 2009: Want more up-to-date tutorials on Ruby programming? Happy Rails developing and if you have any other tutorials that you’d like to share, please leave them in the comments! Tagged as: ruby on rails, tutorial
CSS, Accessibility and Standards Links backstage.bbc.co.uk :: Front Page ::