Here’s some CSS buttons.
These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.
Here’s some tags. They stretch to fit the text and change state on hover:
Here’s the code and image:
I’ve created a frame for browser shots – it’s the safari browser. All screenshots have to be 300px wide.
Here’s a link to the pre-sliced Photoshop image: mac_browser_sml.psd
Add some extra padding to the bottom and a reflection to the bottom of the browser frame to get that web 2.0 look.
I’ve created a presentation about HTML emails.
Contents:
HTML Markup:
Cross Browser Valid:
CSS Styling:
Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.
Here’s the list of menus with a link to the test and a link to the original sites:
UPDATE: Schillmaina has produced a new improved solution. See it here.
It seems like there’s a million and one different solutions for creating round corners for boxes. There’s a good summary of many of the rounded corners solutions at www.smileycat.com: CSS Rounded Corners ‘Roundup’
That’s why it’s surprising to find there’s no cross-browser solution for rounded corners using PNG transparent images.
This is the web: it moves. We have small screens, wide screens, and a variety of needs for the desktop space on any screen. Fixed layouts are for magazines.
If visitors have a 1024 pixels wide screen – and they don’t want to stretch the browser widow across the entire width – any 1024 pixel wide fixed layout means horizontal scrolling – and that’s not very nice.
In order to demonstrate liquid or fixed CSS functionality within the page it’s necessary to have a liquid layout. It’s even possible to have a liquid elastic layout.
Here’s a list of some of the best liquid layout tutorials on the web: CSS Liquid Layouts.
Liquid layouts do need a minimum width to stop the design breaking when the browser is narrowed. CSS or JavaScript can be used to do this (click here for some links.)
O.K., a rant about liquid layouts within a fixed layout design may be the epitome of irony but hypocrisy is this “blogger’s” speciality. This liquid layout for Wordpress: SeaBeast looks great. It doesn’t have a minimum width but uses a drop column technique so the design looks good at narrow widths.
Here’s a couple of liquid layouts with border images to give great flexibility with web page design:
Make like the polar ice caps: go liquid.
This Multiple CSS/AJAX rating bar from http://www.masuga.com/ is the dog’s blox. Everything is set up so you can just stick as many as you like anywhere in your site. The mark-up for any star rating component is a very simple ‘PHP require’ with a unique ID and the JavaScript id pretty unobtrusive. It automatically creates an entry in the MySQL table whenever anyone votes. Looks like a good place for design help at http://www.masugadesign.com/.
The format is:
< !--[if "condition" IE "version number"]> Only IE displays this text if the condition is met < ![endif]-->
There are 6 conditions that can be applied (there’s a “logical not” case too):
Valid version numbers are 5, 5.5, 6 and 7. (There is support for specific version numbers such as 5.0453.)
For adding a style for IE v5 only:
< !--[if IE 5]> < style type="text/css">@import “IE5_only.css”;< /style> < ![endif]-->
Validators do not check the code inside the comments so take care.
selector {
min-height:500px;
height:auto !important;
height:500px;
}