Enter your contact information.
Enter your project information.
Step 3Choose the PHP programmers you want to hire.
Compare Free PHP Quotes
CSS Trick Applies Fixed and Liquid Layouts to the Same Page
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
The debate over whether to use liquid or fixed layouts on the web is one of those perennial and not-very-interesting debates like Mac vs Windows or Emacs vs Vim. What if, however, there were a simple way to offer up both a fixed width and liquid layout on the same page? Peace on the web? Well, not exactly, but it’s a pretty clever trick nonetheless.
CSS guru Daniel Glazman (co-chairman of the CSS Working Group) shows you how to use just one pseudo class on a single HTML document and still create two different layouts, one liquid, one fixed.
In a fixed-width document named index.html, you usually have a rule setting the width or max-width of the main element. Something like
#main750 { max-width: 750px; }Right? Now think :target pseudo-class and tweak your style rule as followed:
#main750:target { max-width: 750px; }
Glazman’s trick relies on the :target pseudo-class to change the layout parameters when the URL includes #main750. In other words, the URL ending in just index.html would have a liquid layout while index.html#main750 would have a fixed layout.
It’s not necessarily ideal in this particular form, and it could be triggered accidentally if you have any “jump” links in your page, but :target is an often underappreciated pseudo class. Opera’s Håkon Wium Lie has another example using :target to change the background color of a page and another commenter on Glazman’s blog offers up this much more complex pure CSS image zooming example which uses (among other tricks) :target to pan around a zoomed image.
Tue, 29 Nov 2011 16:34:57 GMT
Tags: CSS,
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
CSS
The Future of CSS: Finally, Sane Layout Tools
Woolly, the CSS sheep. HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s not the end of the story. The next major development in web design will likely revolve around one of the thi
Quickly Create CSS 3 Animations with ‘Ceaser’
CSS 3 has some awesome new animation capabilities for web developers — rotating objects, fading them in and out and more — but writing the code is a bit more complicated than most CSS rules. To make your animating job a bit easier, developer M
Simplify Your Stylesheets With CSSPrefixer
Woolly, the CSS sheep. CSS 3 has some awesome new features, like 3D transforms, smooth transitions, border images and gradients. Since most browsers already support these features there’s no reason you can’t use them today, provided you grac
We are a ISO 9001:2008 certified company and STPI registered. Our Services are: Web designing, Web Development, Content & Article Writing, SEO, SEM, SMM
Kolkata, West Bengal IN
Integrity Web Design builds website, will get clients listed on search engines, directories, design brochures, business cards, bookmarks, catalogs, booklets, calendars, door hangers, & club flyers.
San Antonio, Texas US
Technicate Solutions, Inc. is a fast-growing IT Consulting firm servicing the Sacramento area and beyond. We combine innovative technologies with business savvy to make successful projects happen.
Sacramento, California US
This Week in Web – jQuery Forms, JS Microframeworks, Resig & Dahl Q+A
jQuery IdealForms
jQIdealForms is a forms framewo
Google Taps Your Friends to Improve Search Results
Google has updated its Social Search tool to add links, photos and relevant web pages from your frie
Adobe Builds Flash Sandbox for Firefox
Adobe has partnered with Mozilla to build a more secure version of Flash for Firefox. As with a prev
JavaScript Modal Windows – TinyBox2
This update to the TinyBox modal window script brings a ton of new features and still clocks in unde
Firefox 4: 7 Million Downloads and Counting
With over 7 million downloads and counting, Firefox 4 looks on track to match, and possibly surpass,
Article Tags
PHP Programmers Articles
Live Help Chat Software
Web Design Quote
Web Design