fordie's Blog » css http://fordie.co.uk Just another WordPress weblog Tue, 10 May 2011 17:58:14 +0000 en hourly 1 http://wordpress.org/?v=3.3 Scroll to the first error in form – using jQuery http://fordie.co.uk/2008/10/28/scroll-to-the-first-error-in-form-using-jquery/ http://fordie.co.uk/2008/10/28/scroll-to-the-first-error-in-form-using-jquery/#comments Tue, 28 Oct 2008 11:27:42 +0000 admin http://fordie.co.uk/?p=125 Oftentimes we ask our users to provide us with an awful lot of information in things like registration forms. It’s no wonder that every now and again the poor dears forget to fill in a box or make a mistake.

On longer or complex forms users can find it difficult to see where the errors actually are.

The other week our QA manager asked us (the front end team) to scroll to the first error on a page. I started off thinking that it was going to be difficult and time consuming to achieve, but with the awesomeness of jQuery & one little-bitty plugin I was able to achieve the desired effect in  3 or 4 lines of code.

This technique relies on you already having validated your form and added a class of “error” to you the markup, either on the form elements or an error message.

You will need

  • jQuery
  • The scrollTo plugin (I used the minified version)
  • A web page with some errors on it
  • a couple of old yoghurt pots and some sticky back plastic.

And here’s the code

add this to the head of your document:

    <script type="text/javascript" src="/JQuery.js"></script>
    <script type="text/javascript" src="/jquery.scrollTo-min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".error:first").attr("id","firstError");
            $("#firstError").each(function (){
                $.scrollTo("#firstError", 800);
            });
        });
    </script>

And Bob’s your uncle!

Please let me know if you found this technique useful.

Incidentally the code for this post was prepared with the very excellet postable. Check it out!

]]> http://fordie.co.uk/2008/10/28/scroll-to-the-first-error-in-form-using-jquery/feed/ 1 How to create a sticky footer in ASP.net pages http://fordie.co.uk/2007/10/25/how-to-create-a-sticky-footer-in-aspnet-pages/ http://fordie.co.uk/2007/10/25/how-to-create-a-sticky-footer-in-aspnet-pages/#comments Thu, 25 Oct 2007 16:29:53 +0000 admin http://fordie.co.uk/index.php/2007/10/25/how-to-create-a-sticky-footer-in-aspnet-pages/ When we were developing the Tesco Property Market website there was a requirement to be position the footer either at the bottom of the browser window or at the end of the content if it was over one screen high. On the original site I wasn’t able to acheive this, due to the way some of the web controls had been coded the side bars had to be absolutely positioned and were often taller than the main content.

With the recent redesign I completely scrapped the existing templates and started again doing away with the absolute positioning. However, none of the techniques I’d used in the past for footer positioning worked and for the life of me I couldn’t work out why.

Eventually the answer dawned on me; the form element that .net annoyingly insists on wrapping everything in was not being targeted by the CSS. Once I’d realised that it was fairly straightforward to get the footer working. Here’s how I did it:

The basic xhtml structure for your page should look like this


<body>
<!-- Stupid form required by .net -->
<form id="form1" runat="server">
<div id="container">
<div id="contents">
<!-- Everything apart from the footer goes in here-->
</div>
</div>
<div id="site-info">
<!-- footer stuff-->
</div>
</form>
</body>

And here’s the CSS to work the magic

html, body, #aspnetForm
{
	height:100%;
	/* without this the footer stays at the end of the content
           - not the botom of the viewport */
}
#container
{
	margin:auto;
	min-height:100%;
	width:980px;
	/* #container is at least the height of the veiwport and contains
            everything except the footer*/
}
#contents
{
	padding-bottom:3em;
	/* #contents contains everything excepte the footer and adds padding at least equivalent to the height of the footer beneath the content*/

}
#site-info
{	height:3em;
	margin :-3em auto 0 auto;
	width:980px;
	/* #site-info (the footer) contains the supplimenatry navigation and copyright info.
	   It's height and negative top margin should be the same as the bottom padding in #contents   */
}

This technique was based on Cameron Adams’ “footerStickAlt”.

Blogged with Flock

]]> http://fordie.co.uk/2007/10/25/how-to-create-a-sticky-footer-in-aspnet-pages/feed/ 0 Using lists as an alternative to image maps http://fordie.co.uk/2007/06/26/using-lists-as-an-alternative-to-image-maps-2/ http://fordie.co.uk/2007/06/26/using-lists-as-an-alternative-to-image-maps-2/#comments Tue, 26 Jun 2007 14:38:14 +0000 admin http://fordie.co.uk/index.php/2007/06/26/using-lists-as-an-alternative-to-image-maps-2/
  • eyes
  • ears
  • mouth
  • oh my!

    • Some time ago I got asked how to produce an “accessible alternative to an image map“.

    As long as Image Maps are implemented correctly there’s no reason why the shouldn’t be accessible however they may not always be the most appropriate or semantic way to mark up your content.

    In this example I’ve used a simple unordered list to describe some of the features of the young lady on the left, and positioned the list items over the top of her photo using CSS. The list is set to display:block and the height & width are set to match the background image you want to use; position:relative is used to allow you to absolutely position the list items within the list. Each list item is given a unique id and absolutely positioned within the list, their height and width are also set in the CSS. At it’s most basic that’s all there is to it.

    In this example I added borders round the list items highlight the active areas, you probably wouldn’t want to display them as they probably detract from the aesthetics of your image. I also used text-indent on the anchors to hide the text until you hover over them and then set the text-indent to 0 using the :hover pseudo class.

    Here is the XHTML used to mark this list up:

         <ul id="map">

         <li id="eyes"><a href="#">eyes</a></li>

         <li id="ear"><a href="#">ears</a></li>

         <li id="mouth"><a href="#">mouth</a></li>

         <li id="ilb"><a href="#">oh my!</a></li>

     </ul>

    And here is the CSS:

    #map {
 display:block;
 height:298px;
 width:200px;
 float:left;
 border:1px solid #FFA200;
 margin:0 10px 10px 0;
 background: url(/images/blog/girl.jpg) no-repeat;
 position: relative;
}

#map li {
position:absolute;
display:block;
list-style:none;
border:1px solid #ffcc00;

 }
#map li a {
 display:block;
 height:100%;
 width:100%;
 text-indent:-2000px;
 color:#ffcc00;
 font-weight:bold;
}

#map li a:hover {
 text-indent:0;
 text-decoration:none;
}

#eyes	{
 top:46px;
 left:71px;
 height:18px;
 width:44px;
}

#ear	{
top:46px;
left:132px;
height:26px;
width:21px;
}

#mouth	{
top:81px;
left:82px;
height:16px;
width:33px;
}

#ilb	{
top:177px;
left:80px;
height:63px;
width:81px;
}

    This article is an extended version of the example I originally published here on 30/01/2007

    ]]>     http://fordie.co.uk/2007/06/26/using-lists-as-an-alternative-to-image-maps-2/feed/ 1     Fordie’s Form System – a POSH way to mark up forms http://fordie.co.uk/2007/05/29/fordies-form-system-a-posh-way-to-mark-up-forms/ http://fordie.co.uk/2007/05/29/fordies-form-system-a-posh-way-to-mark-up-forms/#comments Tue, 29 May 2007 21:12:56 +0000 admin http://fordie.co.uk/index.php/2007/05/29/fordies-form-system-a-posh-way-to-mark-up-forms/ Form layout is one area where designers have struggled to find a sensible way to replace tables with nice clean semantic xhtml + CSS.

    In 2005 Andy Clarke demonstrated his approach to form layout at CSS for designers, He wraps the label around the input field, then put the actual label text in a span.

    <label> label text<input type="text" /></label>

    In the CSS he then sets the label to “display:block” and puts width on the spans. The list items effectively create rows spans columns.

    This approach is fine when you only have two elements you want to appear on a line, however, when you start throwing other things into the mix (like required field markers or “help” links) you need a system that can handle more than two elements. This got me thinking…

    In late 2005 I came up with a solution I call Fordie’s Form System (FFS).

    FFS is based on the premise that a form is essentially a list of questions to which we need an answer, with label being the question and the input being the place for the user to answer it. That being the case, the obvious way to mark up the form (in my mind) is with lists.

    I believe that as well as well as providing the structure to hold the form together, the lists add meaning to the markup – making FFS a POSH way to markup forms.

    FFS Structure

    Each group of label, input and related controls (for example help and validation) within the form is referred to as a “question”.

    1. The Form tag goes around the whole form
    2. Related questions are grouped using fieldsets
    3. Lists hold the questions within the fieldset (you can use ordered on unordered lists)
    4. Each question is contained in a list item (li) containing:
      • A label
      • An input
      • Usually one or more of the following:
        • A required field marker
        • A “help” link
        • Validation Errors indicator

    Basic FFS mark-up

    Here is an example of a form marked up in FFS

    		<form action="/" method="post" name="ffsExample" id="ffsExample">
			<fieldset>
				<legend>Your Details</legend>
				<ul>
					<li class="alt">
						<label for="title">Title</label>
						<select name="title" id="title">
							<option value="1">Mr</option>
							<option value="2">Mrs</option>
							<option value="3">Miss</option>
							<option value="4">Ms</option>
						</select>
					</li>
					<li>
						<label for="firstName">First name</label>
						<input name="firstName" id="firstName" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="surName">Surname</label>
						<input name="surName" id="surName" type="text" />
					</li>
					<li>
						<label for="contactTel">Contact Telephone Number</label>
						<input name="contactTel" id="contactTel" type="text" />
						<a href="/help/" class="help">help</a>
					</li>
					<li>
						<label for="eMailAddress">Email Address</label>
						<input name="eMailAddress" id="eMailAddress" type="text" />
					</li>
				</ul>
			</fieldset>
		</form>

    And here’s the CSS for the layout

    I’ve added comments to the CSS the explain what each rule does

    		fieldset
		{	/* contains a list of related questions, you can have multiple fieldsets in a form */
			border:0;
			margin:0;
			width:100%;
			padding:0;
			clear:both;
		}
		fieldset ul
		{
			display:block;
			border:0;
			margin:0;
			padding:0;
		}
		fieldset li
		{	/* removes the bullet from & adds vertical space in between list items  */
			display:block;
			list-style-type:none;
			clear:both;
			margin:0.2em 0 0.2em 0;
			line-height:2em;
		}
		fieldset li label
		{	/* Sets the width of the labels */
			display:block;
			width:33%;
			padding:0.2em 0 0.2em 0;
			float:left;
		}
		fieldset li input, fieldset li select
		{	/* floats the inputs left to sit next to the labels */
			float:left;
		}
		fieldset li a.help
		{	/* positions your "help" links, you may also have required field markers or
			   validation messages that you need position within the li*/
			float:right;
		}

    Variations on a theme

    There are a couple of input types that need special treatment: radio & check boxes tend to have their labels wrapped round them. This means that we need to introduce a new element to contain “question text” and change the width of the labels. By adding a class to the li we can change the attributes off all the elements contained within

    		<li class="radio">
			<span>Gender</span>
			<label><input name="gender" type="radio" value="Male" />Male</label>
			<label><input name="gender" type="radio" value="Female" />Female</label>
		</li>

    The CSS for the radio class looks like this

    		li.radio span
			{
			/* This span is only required if you want to put additional descriptive text in the first column*/
				display:block;
				width:33%;
				float:left;
			}
		li.radio label
		{
			width:auto;
		}

    FFS is flexible and can handle many elements with in a list item. It can also display the form in a number of different ways simply by changing the CSS, for example:

    • One question per row (using the CSS above will give this result)
    • Two questions per row (set the width of the li to 50% and float left)
    • One question per row, question above the input (set the label to 100% of the width of the li)

    You can see implementations of FFS here*:

    *These are not particularly clean implementations, they need a lot of extra classes thrown at them to accommodate the asp.net generated html that the application produced.

    I have been planning this article for a long time, I’ve had it in draft form for over a year but I’ve only recently discovered a way to get it into the blog with the markup intact.I hope you find it useful.

    ]]>     http://fordie.co.uk/2007/05/29/fordies-form-system-a-posh-way-to-mark-up-forms/feed/ 2     Ffffffliping floats! http://fordie.co.uk/2007/03/20/ffffffliping-floats/ http://fordie.co.uk/2007/03/20/ffffffliping-floats/#comments Tue, 20 Mar 2007 13:45:57 +0000 admin http://fordie.co.uk/index.php/2007/03/20/ffffffliping-floats/ I’ve been having various problems over the past few days with CSS floats. more specifically, either background images on containing elements not appearing or floated elements acting as if they’ve run out of room in the parent element and dropping down on to “the next line”.

    The cause of this is the fact that I haven’t cleared the float before closing the containing element. I have found two ways of curing the problem.

    1. Clear the float.
    2. set a min-height on the parent (containing) element. Remembering of course to add a height in your IE specific stylesheet.

    This is pretty basic stuff, but it’s been a while since I’ve hit a problem like this in CSS so it makes sense for me to blog it to help me remember next time; and who knows it might help someone else too.

    ]]>     http://fordie.co.uk/2007/03/20/ffffffliping-floats/feed/ 0     Creating your own wordpress theme http://fordie.co.uk/2007/01/22/creating-your-own-wordpress-theme/ http://fordie.co.uk/2007/01/22/creating-your-own-wordpress-theme/#comments Mon, 22 Jan 2007 11:19:55 +0000 admin http://fordie.co.uk/index.php/2007/01/22/creating-your-own-wordpress-theme/ It was never my intention to use an existing wordpress theme for this blog. My original plan was to build a theme myself, however a combination of time pressure & a creative mental block meant that I ended up with a theme that I’d downloaded (albeit slightly modified).

    My biggest stumbling block was that all the WP themes I looked at were pretty bloated and it was very difficult for me with my limited php knowledge to sus out what I needed to keep and what I could throw away. I searched in vain for “blank” wordpress theme after a couple of weeks I gave up.

    A few days ago I stumbled upon an article by Ryan Arrowsmith which has a link to that elusive blank theme and step by step instructions for creating your own theme! (Thanks Ryan)
    So now I have a blank theme sitting in the background on the server. Now all I have to do is decide how I want this site to look.

    ]]>     http://fordie.co.uk/2007/01/22/creating-your-own-wordpress-theme/feed/ 1     @media 2007 registration is open! http://fordie.co.uk/2007/01/18/media-2007-registration-is-open/ http://fordie.co.uk/2007/01/18/media-2007-registration-is-open/#comments Thu, 18 Jan 2007 10:07:22 +0000 admin http://fordie.co.uk/index.php/2007/01/18/media-2007-registration-is-open/ I just got this email from those lovely folks at vivabit:

    The @media 2007 web site has just been launched, and you can now register to attend:

    http://www.vivabit.com/atmedia2007/europe/

    Taking place on June 7th and 8th, this year the bar will be raised and web design and development best practices will be pushed that one step further. Providing an unparalleled educational, inspirational, and all-round enjoyable experience, @media will once again demonstrate why it has a reputation for being the foremost web design conference in Europe.

    The last event sold out, so be sure to register soon – we hope to see you back this year!

    Damn I wanna go! I guess I’ll have to sweet talk the boss.

    ]]>     http://fordie.co.uk/2007/01/18/media-2007-registration-is-open/feed/ 1     Adobe launch CSS Advisor beta http://fordie.co.uk/2006/12/21/adobe-launch-css-advisor-beta/ http://fordie.co.uk/2006/12/21/adobe-launch-css-advisor-beta/#comments Thu, 21 Dec 2006 09:53:22 +0000 admin http://fordie.co.uk/index.php/2006/12/21/adobe-launch-css-advisor-beta/ Adobe have launched a new community website with the aim of:

    • Finding solutions to CSS and browser compatibility issues
    • Sharing solutions and workarounds you’ve discovered with the community
    • Allowing the community to comment on and improve existing solutions

    CSS Advisor will apparently be integrated into the next version of Dreamweaver which (according to Sitepoint) is due out next year.

    I think that this will be a really useful tool for anyone develops CSS based sites, assuming that people contribute to the site and Adobe keep access open to the general public once the next version of DW is released.

    ]]>     http://fordie.co.uk/2006/12/21/adobe-launch-css-advisor-beta/feed/ 1     Transcending CSS http://fordie.co.uk/2006/11/20/transcending-css/ http://fordie.co.uk/2006/11/20/transcending-css/#comments Mon, 20 Nov 2006 13:19:29 +0000 admin http://fordie.co.uk/index.php/2006/11/20/transcending-css/ I have been waiting for this book to come out for months. Transcending CSS: The Fine Art of Web Design by Andy Clarke could be the book of the year for web designers.

    tranding css: - cover I have to admit, I am a big fan of Clarke’s. I found his blog a couple of years ago and was hooked straight away, then last year I was fortunate enough to attend the “CSS for designers” workshop presented by Andy and Molly E. Holzschlag, If you ever get the chance to see these two speak I highly recommend it. Andy’s session at @media 2006 was entertaining and inspiring.
    Andy is a classically trained artist who went on to work in in advertising as a designer. He has specialised in the web for nearly ten years. His designs are always fantastic and frankly inspirational.

    Here’s what the book’s website has to say:

    The web has changed, and so has the art of creating web sites. Few visual designers are natural programmers, and as a result, visualizing how to work with markup, CSS and a range of programmatic techniques to create beautiful design is difficult.

    To make things more complicated, most web design teaching materials focus on the technical rather than the creative. Countless resources and guides focus on semantics, compliance, and validity—and while all important—mean nothing to the creative designer who wants to impress his or her clients and employers with exceptional design without worrying that the way they approach the design will be compromised by creativity-limiting technical issues. So how do creative designers learn to be artistic yet functional? With Transcending CSS: The Fine Art of Web Design.

    I’m hoping that Trancending CSS will live up to my expectations, it’s certainly going on my Christmas list.

    ]]>     http://fordie.co.uk/2006/11/20/transcending-css/feed/ 3     A change of theme http://fordie.co.uk/2006/09/27/a-change-of-theme/ http://fordie.co.uk/2006/09/27/a-change-of-theme/#comments Wed, 27 Sep 2006 10:57:51 +0000 admin http://fordie.co.uk/index.php/2006/09/27/a-change-of-theme/ I decided it was time for a change of theme. I know I’ve only had the blog going for a couple of months, but I’ve not been entirely happy with the look of the site since the word go.

    The old “Almost Spring” theme was OK but not quite what I was after. The new three column layout is based on Fluidity3c 1.0 by Kaushal Sheth. The only real change I’ve made so far is to the header image, and replaced the <h1> in the header with an image.

    I still need to tidy up the lists in the side bars for some reason the list items are squashed on the left hand side, so that needs sorting. But overall I’m much, much happier with the site’s look.

    Blogged with Flock

    ]]>     http://fordie.co.uk/2006/09/27/a-change-of-theme/feed/ 2