/* Position Is Everything */ — Modern browser bugs explained in detail! CSS Play Below is a list of CSS demonstrations that range from the simplest for beginners, to the most complex for advanced users. If you do not find what you are looking for then please contact me with your requirements and I will let you know if it is possible using just CSS. Avatar ParadeSimple image display using :hover. What's on TVAnother method of displaying images using :hover. A photograph galleryA photo gallery using thumbnail images. A photograph gallery - with links » 20-02-2009A photo gallery using thumbnail images amd linking to large images. A photograph gallery - using <object> » 06-06-2009A photo gallery using the object element. A mixed gallery - using <object> » 22-06-2009A mixed gallery using the object element. Photo Gallery Mk.IIA photo gallery with horizontal scrolling. A gallery using :target » 25-11-2011A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button. Sliding photo-galleriesCompressed images that expand on :hover.
CSS Stacked Bar Graphs - Wojo Design To design the stats feature of Backbone, our Ruby on Rails CMS, we needed to show a stacked bar graph of page views vs unique visitors. I looked around for a sample of how others did stacked bar graphs and came up empty handed. There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So I’ve done it here. Based off Alen Grakalic’s Pure CSS Data Chart. The Markup The first thing I do anytime I start HTML/CSS work is code the HTML. Like Alen Grakalic’s implementation, I used a definition list. Each <dd> is given a class that corresponds to the percentage of that bar. p100 is 100% the height of the graph and p0 is 0% the height of the graph. The other class to which we’ve added some of the <dd> tags is “sub”. Finally, we wrap our data in <b> and <span> tags so we have enough to work with when we’re styling it. Styling the Graph. Next, we hide the dt tags. I’ve made a diagram to explain what each tag is doing. Add the Axes. Styling the Axes.
CSS Techniques Roundup - 20 CSS Tips & Tricks September 22, 2005 Related Entries 55 people found this page useful, what do you think? Trackbacks Trackback Address: Comments Pete, Well done! Sami Pete, Great collection of useful references. Thanks Mark and Sami! Pete, this is really useful, about to get a junior developer to start on some look and feel tasks for a new application we are building and this wil save me a lot of time, thanks for the links. Also updated my site now so hopefully it doesn't offend the colour blind ;-) Once again cheers. Thanks Kev, glad to help out. Hey, there's some AWESOME stuff in here... Always great, instructive posts! Well, useful stuff, but ALL of them are listed on Here's a nice little top 10 from Evolt (now that they've got their site back up..... Hi Chris, Many of the links I posted here are listed in the link you posted, but not ALL of them. Keep up the good work Pete! thanks, Good job!!
Fixed Width Layouts Versus Liquid Layouts - CSS Web Layouts How to Decide Which Design Style is Right for Your Site Web page layout can be done in two different ways: Fixed Width Layouts These are layouts where the width of the entire page is set with a specific numerical value. Liquid Layouts These are layouts where the width of the entire page is flexible depending upon how wide the viewer's browser is. There are good reasons for using both layout methods, but without understanding both the relative benefits and deficiencies of each method, you can't make a good decision about which to use for your Web page. Current Status Fixed Width Layouts Fixed layouts are layouts that start with a specific size, determined by the Web designer. Liquid Layouts Liquid layout are layouts that are based on percentages of the current browser window's size. Stake The method chosen for your Web site design will have an impact on more than just your design.
CSS examples CSS-Based Tables: Modern Solutions Advertisement We continue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms1, today we present some useful techniques for displaying information in a tabular mode. So what do we have? Zebra Tables Redesigning a simple table3 Zebra Tables5 Better Zebra Tables7 Splintered striper: Enhanced Zebra Stripes9 Standardista Table Sorting (A client-side JavaScript Table Sort module)10 Designing Tables with Stylesheets12 SortedTable instructions and examples14 A CSS Styled Table16 by Veerle Pieters. 2184ways: Tables with style19 Sinnhafte Websites20 Data Tables and Cascading Style Sheets Gallery21 – 78 CSS Table Designs. Zebra Table Showdown22 featuring Plain DOM Scripting, Yahoo UI, Dojo, Prototype, Mochikit, mootlos, jQuery, AJS. – design67 Stripe your tables the OO way23 Unobtrusive Table Sort Script (Revisited)24 Brainjar.com: DHTML Table Sort25 Replicating a tree table27 The Table Ruler34
CSS Tabbed Navigation This page demonstrates a pure CSS method to generate a 'Tab' style interface (see here for more). It first uses the trick of an inline list to generate the tabs. To get the tabs to really look the part - the 'active' tab needs to blend into the 'content' area. Because the purpose of the tab interface is to 'guide' the user as to their present location, these small features do actually improve the 'usability' of the tab structure. The code is very simple, the CSS is embedded to let you see 'under the hood'. Note that for IE5/5.5 you probably need to add hacks to the CSS to overcome their bugs, I would have done it but I'm tired of box-model hacks... I have also made a second version, but with the tabs part of an overlying banner, and fixed so that the tabs always stay visible. Valid XHTML V1.0 strict and CSS V2.0 | Go back to CSS page | Go home (including an email link) | This page is CopyLeft, you are free to use the code!
How to Center A Div with margin:auto in IE8 | Stever.ca On the count of 3 everybody scream “MICROSOFT SUCKS AND I HATE INTERNET EXPLODER”. 1, 2, 3, go. note: Newer post has solutions for centering in IE9 I’ve been working on revamping my Sticky Footer code for IE8 compatibility when I ran into a little bug of sorts. These are the three fixes I know of; Width:100% Set your containing element to width:100%; so then your centered div inside of that one will actually center. Text-Align:Center If you apply text-align:center to the containing div IE8 will obey the margin:auto. Use Transitional Doc Type If you are using XHTML 1.0 Strict as your doc type, IE8 will not obey the margin:auto method for centering an element, unless you use one of the above hacks. Here’s a link to doc type declaration syntax. Oh the joys of cross browser web design.
Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
jQuery HTML Table Toolbox - Noupe Design Blog Apr 13 2010 By Paul Andrew In the 15 years since the HTML table element was first incorporated into HTML 2.0, it has been on a constant roller coaster ride. Upon its introduction it was a revelation, it was a new way for web designers to present detailed data in structured tabular format, it made our life easier and we loved it. But as is the nature of web development, it was pushed further and further to do even more. Pretty soon the main use of tables was no longer tabular data, it was used as a handy and quick way to control the layout of a complicated web page. But that is were the love story ends and its bad rep begins.Using the table element for web layouts proved to be hard to modify, obtrusive and, more importantly, it caused major accessibility and usabilty problems. Out of the box the tables are very, very bland, reasonably hard to style, its very difficult to display complex data effectively and you are limited to its basic functionality. jQuery Table Plugins graphTable Demo