Welcome to pmob.co.uk a site dedicated to hosting fully supported examples of CSS implementation. Within the tutorials and FAQ you'll find examples of how to create CSS based page layouts, style your documents and organise your code. This site also exposes, then shows you how to fix, many of the bugs and foibles of the most common browsers.

Even though this site is currently undergoing a facelift it is fully functional. You can still visit all of its most popular components including the FAQ tutorials (which are not meant as a lesson in aesthetics), the three column Demos (still valid today even though they were done 2 years ago) and the various examples of how to use css to seamlessly add content to your site.

Be aware that some of these techniques are quite advanced and require a reasonable understanding of CSS. Consequently if you're relatively new to CSS taking a glance through the tutorials should give you a good idea of whether you're ready to start using them. Again, none of the examples are meant to be pretty and I have spent no time beautifying them (as you can tell). Indeed I seem to have gone out of my way to make them as ugly as possible (it's a good talking point).

Some of the demos listed below are simply experiments without explanation. However, as many people have found them interesting part of my site redesign plan includes documenting them fully. If the particular example has not been fully documented yet please check back later and if you intend to forge ahead unassisted, the examples are at the least well organised and with some perseverance will, I hope, prove helpful.

The age of the demos listed below vary greatly and going through them to sort out the wheat from the chaf is another item on my to-do list. To help direct readers to the recently updated and documented demos I have placed them in little beige boxes. Working my way through all the demos though is going to take some time!

3 Columns

3 Fluid ColumnsSo you just want three fluid columns that span the full width of your container...

Border Effects

Dashed borderThis is a very simple dashed border effect that is created by applying a background... Dotted bordersThis example is to defeat the 1px dotted border bug in ie where the dashes disappear... Side image bordersTo add full length side borders using images you simply need to nest one element inside...

Captions

Image ClearIf you want to display a number of images from your database and then alongside them you...

Centering

Centred FloatsIt is usually stated that you cannot centre floated elements but this is not quite true.. Centre Multiple Divs in IEIt would be nice if we could centre multiple block elements and there is a way.. Centred Page Horizontal and Vertical centering has always been awkward with css as vertical-align only.. Centre - No widthCentering block level elements is easy as you simply need to use margin:auto and a..

Equal Columns

Equal ColumnsBefore you start you should know that the only element that will base its height dependent on ...

Rollovers

Simple Tab RolloversThere are many ways to do rollovers but as a general rule of thumb you should never ... Advanced Tab RolloversThis is about as complicated as you can make it but the effect is well worth the effort.. Disjointed Rollovers(Plus a css image gallery)
A dis-jointed rollover is when you rollover some text or an image.. Animated RolloversAnother disjointed Rollover effect that animates a menu pointer as you scroll along...

Older Stuff Follows

These are the original links to older articles and demos. I am working through them as time allows updating them to a more fully documented form. They have been left here for now so that they are still available while I work on them but use with care (especially the fixed positioned ones in IE6) as some are just basic ideas for experiment.

Disjointed rollover effects:
http://www.pmob.co.uk/temp/disjointednavlist1.htm http://www.pmob.co.uk/temp/disjointedrollover2.htm
Horizontal and vertical drop down menus based on the suckerfish menus:
Basic horizontal drop down Horizontal drop down with sub menu displayed in case js is disabled Vertical drop down Vertical drop down multi level 1 Vertical drop down multi level opaque Vertical drop down in same column Horizontal drop down menu imitate an image map drop down imitate an image map drop down 2 imitate an image map drop down 3 expanding drop down 1 expanding drop down 2 with nav identity expanding drop down 3 (unfinished) Drop down inserted into fixed positioned header
Main 3 column demo: 2 column equalising - content first - column on right 2 columncentred equalising using background image Fluid side column 3 col layout: equal columns using bg image: 2 column centred content first I column centred: vertical background fade:
http://www.pmob.co.uk/temp/example2.htm http://www.pmob.co.uk/temp/gradient.htm http://www.pmob.co.uk/temp/gradient2.htm http://www.pmob.co.uk/temp/bgimages.htm
Fixed position footer in iE: CSS table:
http://www.pmob.co.uk/temp/fourcellsboth.htm http://www.pmob.co.uk/temp/tabledemo.htm
Header Replacement 1: Header Replacement 2: Better Still Navigation Image Replacement Inline centred lists:
http://www.pmob.co.uk/temp/hozinlinemenu.htm http://www.pmob.co.uk/temp/hozinlinelist3.htm
Hundredpercent borders all around using display:table: Hundredpercent images around layout text and image left and right in same element: Lists and list effects:
http://www.pmob.co.uk/temp/list-withborder-onhover.htm http://www.pmob.co.uk/temp/list-withborder-onhover2.htm http://www.pmob.co.uk/temp/list7.htm http://www.pmob.co.uk/temp/listexample.htm http://www.pmob.co.uk/temp/cssrollover11.htm Another list example Indented lists List with rollover effect Separate nested list form its parent visually but not physically.
IE5 mac 100% 3 column layout (the only one ever). IE5 mac 100% 2 column layout (the only one ever). Min and max width expressions for ie (the third example is expression free and uses no scripting):
http://www.pmob.co.uk/temp/min-max-width.htm http://www.pmob.co.uk/temp/2colminwidth.htm http://www.pmob.co.uk/temp/min-width-ie.htm
Multiple classes example: Opacity in IE:
Ie's proprietary alpha image loader - transparent borders Transparent background to text box Ie's proprietary alpha image loader http://www.pmob.co.uk/temp/opacity2.htm http://www.pmob.co.uk/temp/opacity.htm http://www.pmob.co.uk/temp/opacityview.htm Transparent shadow 1 Transparent shadow 2
Random bg image with css and js: List bullet on the right side instead of left: Alternate coloured rows in table: Simple CSS table: Table with fixed column while content scrolls: Tab effect:
http://www.pmob.co.uk/temp/tabmenu_mine2.htm http://www.pmob.co.uk/temp/tabexample4.htm http://www.pmob.co.uk/temp/tabexample.htm http://www.pmob.co.uk/temp/cssrollovertabs.htm Overlapping Tabs Overlapping Tabs with Hover
Transparentheader example: Vertical-align:examples:
http://www.pmob.co.uk/temp/vertical-align.htm http://www.pmob.co.uk/temp/vertical-align-examples.htm http://www.pmob.co.uk/temp/vertical-align3.htm vertical align to bottom Text at bottom Vertical and horizontal centering an element of no specific width or height - You thought this was impossible didn't you?
Three column examples:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm http://www.pmob.co.uk/temp/new3colfluid/3col.htm http://www.pmob.co.uk/temp/new3colfluid/3col_3.htm http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm http://www.pmob.co.uk/temp/mac3column.htm http://www.pmob.co.uk/temp/3coltest-2.htm One column centred:
Equal columns:
http://www.pmob.co.uk/temp/2equalisingfloats.htm http://www.pmob.co.uk/temp/2equalisingfloats2.htm http://www.pmob.co.uk/temp/2equalising-columns-separate-good-2.htm 2 equalising fluid columns
centre an element of no specified width.
http://www.pmob.co.uk/temp/centre-no-width.htm http://www.pmob.co.uk/temp/centre-no-width2.htm
Fixed header and footer for ie and moz:
http://www.pmob.co.uk/temp/fixedlayoutexample2.htm http://www.pmob.co.uk/temp/fixedlayoutexample3.htm http://www.pmob.co.uk/temp/fixedlayoutexample4.htm http://www.pmob.co.uk/temp/fixed-centred.htm
New versions for standards mode:
http://www.pmob.co.uk/temp/fixedlayoutexample5.htm http://www.pmob.co.uk/temp/fixedlayoutexample6.htm http://www.pmob.co.uk/temp/fixedlayoutexample7.htm http://www.pmob.co.uk/temp/fixedlayoutexample8.htm http://www.pmob.co.uk/temp/fixedlayoutexample9.htm http://www.pmob.co.uk/temp/fixedlayoutexample10.htm http://www.pmob.co.uk/temp/fixedlheader-footer-left.htm http://www.pmob.co.uk/temp/fixedleft-header.htm
Random Stuff
Wrap content under float and keep backgrounds and borders from sliding under float: centred page horizontal and vertical: Nav example: 2 column blog type layout: Simple float clearing Confining cleared elements Imitating outline text: Float an image and stop text from going underneath Styling the legend in a fieldset 2 columns centred - 1 fluid and 1 fixed Fluid column with full length background on both sides Four iframes to 100% height (not ie7) Bullet image on hover Indicate current page using body id Rounded corners Content first in 3 column fixed width layout using relative positioning Another 3 column fixed width layout template Demo to show IE's incorrect font re-sizing when em's are used as a base font-size on the body 1px background Jog in IE 1px Gap on absolute elements 3 scrollable divs to 100% height in standards mode.
Various Captions
caption 1 caption 2 caption 3 caption 4 caption 5 caption 6 caption 7 caption 8 caption 9 caption 10 caption 11 caption 12
More Random Stuff
Full length borders Image to the right and text to the left Avoiding Float drop Recipe Menu Pop Up Fade Highlight Input Disjointed Rollover with opacity Equalising colums separate with borders More equal columns - fixed width More equal columns - fluid width Another sticky footer More Captions More Captions More Captions More Captions Toggle columns - 100% independent columns Overflow controlling width of floated column More centred floats Simple Captions Current nav via body id and no clickable link for current page Sideways scrolling with images Table with fixed header and footer Block hover effect main content centred with left nav hanging to the side Round corners with javascript toggle Show bigger image on rollover Star Rating - CSS only Floating left and right All fluid drop down (with max-width) Defining an image for the cursor Hide and show with css only Using foreground images as background images

^ Back to Top ^

You are viewing a mobilized version of this site...
View original page here

Mobilized by Mowser Mowser