Welcome to Design Guide
Web Design Extras Article
. For a permanent link to this article, or to bookmark it for further reading, click here.
Want to learn Column Designs with CSS
from: Jon St. George - Designs-By-Jon.comAlmost everybody knows that CSS makes layouts easier than they were with tables. One of the reasons many people stuck with tables for so long is that it’s a bit difficult to create column-based designs using CSS.
Believe me, CSS columns aren't that difficult to produce once you understand how CSS float rules work. Float allows you to say that some portions of your content should 'float' next to other portions, instead of being displayed one after the next.
A column layout in CSS is quite simple and you’ll see why. Just see how to divide your content from your navigation using the div tag, as mentioned below:
Please note that the divs must be in this order – left, right, centre – because otherwise one column might end up underneath another in a way you don't expect. Ordering things logically as left, centre, then right, for example, will cause your right column to end up under the centre one.
Anyway, the next step is to write the CSS for those IDs you just set up. See below-
#left-nav {float: left; width: 30%;}
#right-nav {float: right; width: 30% }
You can adjust the width % depending on how wide you want your left and right columns to be (you can even choose whether to set the width in percentages or in pixels). And now you've set up a successful three-column layout. Amazing! Isn’t it?
If you wish that your left and right columns should have a different background colour to the centre one, this might be a bit trickier. This is because in most of the browsers, your columns are only considered to extend downwards as far as the text in them does meaning that the bottoms of your columns won't line up.
How to solve this issue then? The best way is to make your columns fixed-width (meaning that you specify their width in pixels, eg. 'width: 100px;'). Once you've done that, you can create one-pixel-high image that includes the colours you want for the columns, and make it the background image. But the fixed-width columns can look strange if you leave them spaced as they are. The solution is to specify a fixed width for your document's body, and then set the left and right margins to 'auto' – this will centre the page on the screen.
You might also like to add text-align: center, so they appear in the middle of the page. There are few more things which you would need to learn about but if you found the above simple I am sure you’ll find playing around with CSS easy.
Web Design Extras News
HP Photosmart 5520 e-All-in-One
The HP Photosmart 5520 e-All-in-One is a basic home MFP in some ways, but goes well beyond the basics in others.
Read more...A Thousand Ice Cream Cones and Other Extra Treats at Glenwood Hot Springs Every Day this Summer
Glenwood Hot Springs is world-famous for its enormous thermal spring pools and award-winning Spa of the Rockies, but when it comes to what makes Glenwood Hot Springs one of Colorado’s splashiest summer vacation destinations, it’s the extras that make all the difference – extra fun, extra activities, extra treats, extra-long hours and, of course, extra savings.Glenwood Springs, Colo. ...
Read more...PR: Warped Sci-Fi Web Cartoon "New Eden" Set for Launch Online in May 2012
Warped sci-fi web cartoon set for launch New Eden, a hilarious new animated sci-fi web series pilot launches online this month. (click to enlarge) New Eden follows the adventures of bickering odd couple Murray and Hamilton, two... Read More
Read more...Dear Google: Android Needs Your Help
The search giant is ignoring its mobile OS, and the neglect is starting to show in poor apps and defecting developers.
Read more...LG 47LM6700
Editor's Rating: User Rating: Good: The LG LM6700 series delivers accurate color and good picture quality in 3D mode with little to no crosstalk. Its clever motion-control remote is used with a highly customizable menu system, and its Smart TV suite offers plenty of content. It ships with six pairs of passive 3D glasses. The external design is striking in silver, although probably not for ...
Read more...LG 55LM6700
Editor's Rating: User Rating: Good: The LG LM6700 series delivers accurate color and good picture quality in 3D mode with little to no crosstalk. Its clever motion-control remote is used with a highly customizable menu system, and its Smart TV suite offers plenty of content. It ships with six pairs of passive 3D glasses. The external design is striking in silver, although probably not for ...
Read more...Swann Freestyle HD Wearable Action POV Video Camera Review
Swann is an Australian company who for the last 25 years have specialised in wireless connectivity, professional quality CCTV cameras with infrared night vision, digital video recording with motion detection and networkability, web surveillance and remote notification products, globally. We first reported on the Freestyle HD when it was announced in November 2011. This is a new entry [...]
Read more...