How to Centre and Layout Pages Without a Wrapper. The number one suggestion I see from the proprietor of html5gallery.com to submitters is not to use the “<section>” element as a glorified “<div id="wrapper">”. Here, I shall demonstrate that “<body>” is already a wrapper and can be hacked to achieve some pretty remarkable layout and clean code! Let me just repeat that. The body element is already a wrapper. It can have a height, width, border, drop-shadow; you name it. (Note that <html>, <head> and even <body> are optional in HTML!) Now let’s add a background colour. How odd. Simply add a background to the HTML element! But why doesn’t the body stretch the full height of the browser window?
Here we have forced the HTML element to be 100%. We use min-height: 100%; because in browsers other than Internet Explorer, content that is longer than the fixed height of an element just spills over the edge. min-height ensures that the body is at least 100% high, but expands for content longer than that. The shadow is done using a CSS box-shadow. Building a Stylish Blog Design Layout in WordPress. Over the last couple of weeks we’ve been through the process of creating a stylish blog design in Photoshop, coding it up into a static HTML and CSS concept, and now we’ll put the whole thing together as a fully working WordPress theme.
Follow this step by step walkthrough of the various WordPress theme files, and see how the HTML is split up and injected with PHP tags to provide the complete blogging functionality. At the end of the last tutorial, we were left with a working HTML and CSS concept of the blog homepage. Since then, a generic inner page has been styled up, to give the CSS for page elements such as comments, author description etc that appear when viewing a complete blog post. A WordPress theme consists of multiple PHP files. The first step when creating any new theme is to create the series of files and copy across any image, Javascript or CSS assets your design uses into a new folder. Other tags used in the lower portion of the header file include <? 10 Beautiful and Free WordPress 3.0-Ready Themes.
This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. WordPress 3.0 was released a little over a month ago, ushering in a bevy of new features for designers and developers. Just last week, WordPress 3.0.1 was released, fixing a few minor bugs and making some other less visible tweaks. Lots of the biggest changes to WordPress 3.0 took place under the hood — the merging of the WordPress MU codebase with WordPress proper, custom post and taxonomy types, and support for easy custom menus in themes that support that feature. It's really easy to add support for some of these features to your existing WordPress theme, but if you're looking for a theme that works great with WordPress 3.0 out of the box, including support for custom menus, post types and taxonomies, check out our round-up of free themes with superb WordPress 3.0 support.
Series supported by Rackspace Rackspace is the better way to do hosting. Stripe Generator - ajax diagonal stripes background designer. CSS: Specificity Wars. CSS: Specificity Wars Join me, and together we can rule the galaxy as father and geeks! A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn't seen before.
Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training. The Dark Side My problem was a simple one, how to feed a transparent PNG image to browsers which support transparency and a GIF image to older browsers which don't, without resorting to hacks. Here's the markup, <div id="nav-supp"><p><a id="a-02" href="#webstandards-org">Top</a></p><! And my CSS starting point. I had assumed that a modern browser would see and apply both rules (with the second overriding the first) and that an older browser which does not understand attribute selectors would see and apply only the first, ignoring the second.
Sith Lords Too much! CSS3 PIE: CSS3 decorations for IE.