Network Sites: Grunge Textures · Image Abstraction · Designs by Darren · Design Packs
Thoughts and commentary about web design plus links to helpful resources including fonts, plugins, templates, stock photos, software, scripts, tutorials, and other useful tools for webmasters!
Web design is a complex discipline that involves a wide range of skills. I notice that some of the most basic skills are lacking in many web site designs. Those basic skills are quite simple, but can be hard to gain because of a lack of teaching material. That’s what WDFS aims to solve! Designing effective web sites requires having a firm understanding of design fundamentals, and applying them with an eye for simplicity. The simple approach doesn’t make sites boring or plain! On the contrary, well-designed sites can be beautiful, and fulfilling and enjoyable to use. ‘Web Design from Scratch’ describes my approach to simple web design.
Tutorial by Nick Rigby, A List Apart
“It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem. We used to use tables, which worked well in this scenario—but forms don’t constitute tabular data, so it’s a semantic faux pas.
I’ve tried to create a form-styling solution that is both accessible and portable (in the sense that I can move the code from one project to the next). Floats have often provided a solution to my problem, but given the complexity of some layouts and the numerous float bugs associated with Internet Explorer, it’s not always easy to reuse a float solution. I wanted to create something that anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.”
The layout generated has changed significantly from previous versions. The main reason for change was to simplify the layout and in doing so make it easier to use. It no longer provides fixed width columns with fluid center or full length columns by default. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. Links to articles in the “Layout Hints” box to the right and the CSS Forum will provide help where needed. The generator requires a DOM capable browser with JavaScript enabled.
Tutorial by Smashing Magazine
CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.
We’ve taken a close look at some of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.
Sometimes you may need two columns of the same height in your layout. If the height of their content differs, their backgrounds should flow and end at the same position. This is exactly how columns were made by tables.
There are several ways to make two columns in CSS. You can use one floating block, both blocks floating, one block positioned into other’s margin etc. Anyway, every time the block ends where its content ends. That’s OK — in fact, the “same-height columns” is just a design illusion: not the columns, but the background under them makes the effect. Thus, let’s make the columns of their own height and then just play with the background. That’s the matter.
All content © 2005-2009 freewebpageheaders.com and it's contributors, All rights reserved.