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 various examples of how to use css to 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
Border Effects
- Dashed borderThis is a very simple dashed border effect that is created by applying a background...
- Side image bordersTo add full length side borders using images you simply need to nest one element inside...
Captions
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
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:
- 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:
- CSS table:
- Header Replacement 1:
- Header Replacement 2: Better Still
- Navigation Image Replacement
- Inline centred lists:
- 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):
- Multiple classes example:
- Opacity in IE:
- 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:
- 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:
- centre an element of no specified width.
- Fixed position examples in standards mode: (Use with care)
- Fixed header footer and left sidebar
- Fixed header footer
- Fixed footer only
- 3 scrolling elements
- Fixed in bottom corner
- 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/fixedlayoutexample9.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
- 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
- Never ending header background
- Navigation tricky rollover
- Disjointed gallery effect
- Drop down with full width panel (like amazon drop down)
- Another Drop down with full width panel (like amazon drop down)
- The Ultimate Sticky Footer (New for IE8)
- Horizontal scroll
- Toggle content on and off
- Defintion list example
- Gradient at top and bottom of layout
- 2 columns content first centred
- Fixed sidebars using expression
- Legend type effect
- Rond box with minmal extra mark up
- Absolute full length borders 1
- Absolute full length borders 2
- Absolute full length borders 3
- Round box using one image
- 2 column split into 2 sections verycally - uses expression for ie6
- Category type listing with defintion list
- Inline block example
- Transparent drop down 1
- Transparent drop down 2
- Fixed header and sidebar
- Fixed left column
- Transparent image on background image
- Vertical center with header above
- 2 column with footer at base of 2nd column only
- 3 equal columns
- 3 equal fluid columns centred
- Fixed header and left sidebar using expressions.
- Cloud tag example
- A drop down the goes up then horizontal
- A drop down that goes up
- Fade text in and out of div edge (uses an expression for ie6)
- A Drop down menu that works when clicked but uses no JS (experimenatal)
- Fixed header with 100% scroll under fixed element.
- Caption with one or two lines at top and bottom
- Caption with one or two lines at top and bottom
- A round input button
- Round input button using one small sprite
- Fixed header and footer with centred layout using a table for vertical centering
- As above link but with a JS fix for IE to make footer appear correctly
- Fixed header and footer as above link but using a div instead of a table. Unfortunately works everywhere except IE7 (IE8 and ie6 are ok).
- 3 column min and max width with sticky footer
- Transparent image borders 1
- Transparent image borders 2 (Not IE)
- Vertical center - just for fun - not really usable
- 3 equal columns with moz rounded corners.
- 100% header and footer in sticky footer layout with right full length sidebar.
- Iframe to 100% height with header
- Another graphical sticky footer
- Round corners using one image - can be used on images - transparent corners.
- Align text block and images vertically with each other.
- Sticky footer with wide header and footer
- Image shadow with shadow as a background to the image itself
- Some more captions using display:inline-block
- 3 column layout - source order (min/max)
- 100% high with header and footer and scrollable centre
- CSS only animation and games (rough and ready)