background preloader

Get down! How to keep footers at the bottom of the page

Get down! How to keep footers at the bottom of the page
by Matthew James Taylor on 10 November 2007 When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done. When I first ditched tables for pure CSS layouts I tried to make the footer stay at the bottom but I just couldn't do it. See it in action: View my demo with the footer at the bottom The main features Works in all modern, standards compliant browsersCompatible browsers: Firefox (Mac & PC), Safari (Mac & PC), Internet Explorer 7, 6 & 5.5, Opera and Netscape 8Fails gracefully on older browsersOlder non-standards compliant browsers position the footer under the content as per normal. There is only one limitation You must set the height of the footer div to something other than auto. So how does it work? The HTML div structure The CSS

Ajax Bestiary » AJAX Development, News, Techniques & More Safari Web Content Guide: Configuring the Viewport Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. If you are already familiar with the viewport on iOS, read “Using the Viewport Meta Tag” for details on the viewport tag and “Viewport Settings for Web Applications” for web application tips. Read “Layout and Metrics on iPhone and iPod touch” to learn about the available screen space for webpages on small devices.Read “What Is the Viewport?” See “Supported Meta Tags” for a complete description of the viewport meta tag. Layout and Metrics on iPhone and iPod touch Because Safari on iOS adds controls above and below your web content, you don’t have access to the entire screen real estate. What Is the Viewport? Safari on the Desktop Viewport

CSS Starbursts with CSS3 transforms and transitions by Matthew James Taylor on 15 May 2010 I was recently experimenting with the new CSS3 rotation property and it occurred to me that I could use this to create image-free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star. To start with I created a 16 pointed star by using three nested span elements inside a link. NEWCSS3Starbursts! The above starburst will only work in browsers that support the CSS3 rotation property, currently that's Safari, Firefox, and Google Chrome. Here is the HTML code. <a href="#" class="starburst"><span><span><span><br />NEW<br />CSS3<br />Starbursts! The CSS is a little bit longer. Animated CSS3 starbursts If you create your starbursts with CSS3 you can do so much more than with images. About these CSS3 Starbursts: No CSS Hacks There are no CSS hacks required for these CSS3 starbursts.

jQuery plugin: Tablesorter 2.0 Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!)under MIT or GPL licenses. Please with sugar on top! Don't hotlink the tablesorter.js files. Update! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: $(document).ready(function() { $("#myTable").tablesorter(); } ); NOTE!

13 Ways to Browser Test and Validate Your Work - Nettuts+ Every day, when reviewing templates on ThemeForest, I test the submissions for validation and browser compatibility - not to mention my own work as well. Over time, I've scrounged the web for the best validation and browser compatibility testing tools around. Here's my favorites. HTML and CSS Validation First let's take a look at some methods to check HTML and CSS validation. Along with validating your files, you should format your markup nicely as well. 1. Probably most commonly known is the online W3C Validation Service. 2. W3C also has a CSS validation service that you're most likely familiar with. 3. The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation. You can also turn on "Display Page Validation" to show some quick validation information for HTML and CSS without needing to open a new tab. 4. 5. Most development editors offer some sort of validation tool. 6. 7. 8. 9 & 10. 11. 12.

50 Best Design Blogs For Mom: Where to head for style inspiration & drool-worthy products The beauty of the Internet is in the sharing of ideas. There's no better example than the creative, resourceful, and spunky moms that churn out hundreds of ingenious ideas every week. If you need to figure how to cozy up your home on the cheap, decorate a birthday party, or simply soak up some inspiration to make your life a little more beautiful, turn to these innovative moms. On this list, you'll find up-and-coming newcomers to the blogging scene, as well as classic favorites that continue to produce some of the best design content on the Internet today. Know a design mom blogger we missed? The What’s What: 3191 is an online magazine of sorts written by mom Stephanie Congdon Barnes and Maria Alexandra Vettese, two friends that met online and began blogging together in 2007 by discussing their mornings while they lived (you guessed it) 3191 miles apart.

ASP.NET en Español » Web Development for the iPhone :: CSS, JavaScript and XHTML Ex Web Development for the iPhone: Targeting the iPhone Safari browser Developing for the iPhone Also check out Creating native looking iPhone web apps with CSS3 (no images). That works on the iPhone and Safari 5 only. Also see CSS, XHTML and JS support in the iPhone. It’s way more relevant than this article, which is about v1. The Safari iPhone user agent string is:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3Platform string: (iPhone; U; CPU like Mac OS X; en)Version string: Version/3.0 Mobile/1A543a Safari/419.3 To target the iPhone with CSS, use: <! The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. To target the iPhone server-side with PHP you can use: if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {} :hover pseudoclass on the iPhone iPhone Viewport Orientation The iPhone supports both landscape and portrait views. Notes:

Brandintheory | Marketing, Digital & Brand Thinking jQuery Templates and Data Linking (and Microsoft contributing to jQuery) The jQuery library has a passionate community of developers, and it is now the most widely used JavaScript library on the web today. Two years ago I announced that Microsoft would begin offering product support for jQuery, and that we’d be including it in new versions of Visual Studio going forward. By default, when you create new ASP.NET Web Forms and ASP.NET MVC projects with VS 2010 you’ll find jQuery automatically added to your project. A few weeks ago during my second keynote at the MIX 2010 conference I announced that Microsoft would also begin contributing to the jQuery project. In this blog post, I’m going to talk a little about how my team is starting to contribute to the jQuery project, and discuss some of the specific features that we are working on such as client-side templating and data linking (data-binding). Contributing to jQuery jQuery has a fantastic developer community, and a very open way to propose suggestions and make contributions. jQuery Template Support Converters

What HTML/CSS would you use to create a text input with a backgr Eat Sleep Social – Mike Phillips | exploring all things social media

Related: