How To Nail A Sexy Layout // Archives // Addicted To New
Part One, Skeletize, Visualize, and Nakedize This is the first article of a series on “How To Nail A Sexy Layout”. The sexy layout I have chosen for this series is HumanRadiator.com , the web home of the “blisteringly driven, torridly imaginitive, and feverishly creative” Jim Gosz. For those who don’t know, I am a developer and Jim is a designer for the University of Notre Dame’s Webgroup . When Jim approached me to help him out and develop his new design I was pretty excited. He is a great web designer and I enjoy giving his creations life, be it at work or on the side. Skeletize The first step in my development process is always creating the skeleton. <title>Generic Title</title> My intent for this series is not to spark a debate on whether or not my naming conventions are the best or I use too many divs, etc, etc. Onward! Visualize The goal of standards based development is to separate structure and presentation. The navigation will need a background image because a special font is used.
Friday Challenge
January 23, 2004 Whether it’s a deceptively simple problem or a case of being too close to the code to see the easy answer, I’ve been struggling with this one problem on and off for months now: Is it possible to use floats to position a fixed-width sidebar on the right of a page, with a liquid content area, if the content comes before the sidebar in the markup? Floating, and not absolute positioning is necessary for the sake of a clearing footer. <div id="content"> ... Corresponding CSS: Simple, right? But why should the sidebar need to go before the content in the code order? Note that floats are reliant on code order, and do work best with defined widths, but with the proper CSS you should be able to get a simple two-column layout working. I can’t. Again — 1) no changing the order of the code (although adding new divs would be fine), and 2) no using absolute positioning unless you can somehow make it work with the footer. Update: Well that was quick.
HTNASL Part II: Crop and Style // Archives // Addicted To New
In Part One of How To Nail A Sexy Layout , I discussed my method of skeletize , visualize and nakedize . This second article in the sexy series will discuss cropping the images followed by the first wave of styles for the stylesheet. Cropping Based on our nakedized version of the design (shown below), cropping is a cinch. What I tend to do (like it or not) is flatten the image and crop away based on the guides. Default Stylesheet Since cropping isn’t really that interesting,I’ll move on to the first wave of styles. You might be thinking what the crap was @media screen, projection and be-nice-to-Mac-IE5 . Linking the Styles My prefered method of linking stylesheets is to <link type="text/css" rel="stylesheet" href="/path/to/style.css" /> to a style sheet which then imports the main stylesheet (ie: @import url("mature.css"); ). A Few Explanations Conclusion So what all have we covered so far?
Clearing a float container without source markup
(This clearing technique was developed by Tony Aslett, of csscreator.com. The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. <div><!
Top 7 Freshest Designs of 2006 » Wisdump
Be Sociable, Share! 2006 was the year of Web 2.0 design and pretty much that type of design got old real quick. Below I have listed the Top 7 Freshest Designs in my mind that I have come across this year and although these kind of lists can easily be argued, I try to provide you with enough reasoning behind my decisions. Cuban Council Why choose a site that wasn’t even designed in 2006 as a fresh design for 2006? In a year where we saw a return of the one-page layout, I still find that Cuban Council’s timeless design outdoes all-newcomers in not only providing a rewarding experience, but also a helpful one. Everything you need to know about them is on one page and it doesn’t seem too long or overbearing on the user. Never one to shy away from experimentation, Inman gives us what we most want from a blog…the content. Here’s to 2007 and a whole new batch of fresh designs.
Piefecta - A superb 3-col tableless layout
Important new information as of July 2008: IE bugs discussed in this obsolete document have been found to be associated with hasLayout. Knowledge of this MS concept is essential if you want to make IE behave well with advanced CSS using floats. Also see this basic method for specific ways to combat the IE bugs on your pages. This column is first in the source, being a right float within a left-floated wrapper. The second col is floated left in that same wrapper, and following the wrapper is the left floated right col. (confusing, ain't it?) The headings and italicized paragraphs are "widthless" and have 1px red borders to show any width problems in the columns. Some Of The Features Any col may be longest without problems, thanks to the fact that all the cols are floated and "within" a single container. A number of bug fixes have been used to make this design work well in different browsers, particularly IE/Win. Piefecta's Dirty Little Secret Update July 4th, 2008 Special Announcement!
