CSS Layouts: The Fixed. The Fluid. The Elastic.
Filed Under CSS Resources | Comments Off
A recent blog post on CSS Layouts shares a description, pros, cons and advice on fixed, fluid and elastic layouts. A MUST READ for any serious CSS web developer, the article asks the following questions:
- Which Cascading Style Sheet (CSS) layout is best?
- Is one more accessible than the other? More usable?
- What are the drawbacks and how are they dealt with?
- Is one easier to create than the other?
- Is there an evil, inaccessible layout?
The author further says that all layouts have their quirks and their unique pros and cons, and all are suitable if you take steps to ensure usability and accessibility. The article is the author’s view on the rigid fixed, the adaptable fluid, and the expandable elastic layouts.
Read the full article: CSS Layouts: The Fixed. The Fluid. The Elastic.
Two great examples of Expandable Elastic Layouts:
- Life, Jeeps and Web Standards by Tommy Olsen
- Elastic Lawn by Patrick Griffiths of HTML Dog
NOTE: To fully appreciate the layout effect, resize the text in your browser window while viewing the sites. It’s totally kewl!
CSS Styles for Print
Filed Under Web Developer, CSS Resources | Comments Off
I know that I should create a separate style sheet for print, yet I often don’t take the time to do so. This is another standard that should be part of my normal routine.
I am currently working on a wordpress blog for a ministry in my church and need to provide a printable form that will enable users to print the form to be mailed with payment to the church.
Printing from a blog can create a lot of code, especially if you have a lot of posts, comments and history. In my quest to figure this out, I stumbled upon an article by Michael Meadhra, of Builder.com, entitled Tips for creating CSS styles for print. This easy to read and use 2-page article is a MUST read if you want to learn this skill. Check it out!
And this is the style that resulted from my lesson:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: white;
color: black;
}
a:link,a:visited {
color: #3333CC;
text-decoration: underline;
font-weight: bold;
}
div#top-nav {
display: none;
}
div#sidebar {
display: none;
}div#search-box {
display: none;
}div#content{
width: 100%;
margin: 0pt;
padding: 0pt;
}
CSS Resources
Filed Under CSS Resources | Comments Off
I thought I’d share a few resources that might inspire and help aspiring CSS Designers. Check them out!
cssBeauty: http://www.cssbeauty.com/
Smashing magazine’s 50 Beautiful CSS-Based Web Designs: http://www.smashingmagazine.com/2006/12/19/50
-beautiful-css-based-web-designs-in-2006/
CSS Remix: http://www.cssremix.com/
And my favorite … CSS Zen Garden: http://www.csszengarden.com/
Layout Gala by Alessandro Fulciniti
Filed Under CSS Resources | Comments Off
In November 2005, Alessandro Fulciniti presented a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility.
The result is a set of 40 layouts that are worth sharing. In each layout you will find a download link or if you want, you can download the entire collection, 40 HTML pages in a single zip file.
All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. For more information, visit the Layout Gala website.
Max Design CSS Page Layouts & Tutorials
Filed Under CSS Resources | Comments Off
Max Design CSS Page Layouts & Tutorial Links
This site hosts a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed (their words, not mine!). The layouts and tutorials vary and include one-, two- and three-column layouts that are fluid (will span the width of the browser) and fixed.
The tutorials are a great resource for the beginning CSS design student because it includes explanations and how to while you do the work.
keep looking »