Tuesday, July 21, 2009

Keeping Labels and inputs together.

When you are placing multiple inputs (and labels) in a <form> tag organizing the layout can sometimes get tricky. There are times when <fieldsets> seem appropiate, that's easy then however there will be times to have more control even with in a <fieldset>. Placing a <div> around each <label> and <input> works. Then use ID or CLASS attributes to control your layout.


<fieldset>
   <legend>Set of inputs</legend>
  <div id="item01">
    <label for="item01input">item01</label>
    <input id="item01input">
  </div>
  <div id="item02">
    <label for="item02input">item02</label>
    <input id="item02input">
  </div>
</fieldset>


That's great! However I think we should make it more semantic. <div> tags are technically block elements. Lets change those <div> tags to <p> tags.


<fieldset>
   <legend>Set of inputs</legend>
  <p id="item01">
    <label for="item01input">item01</label>
    <input id="item01input">
  </p>
  <p id="item02">
    <label for="item02input">item02</label>
    <input id="item02input">
  </p>
</fieldset>


Now I'm happy! If you have other solutions and comments please feel free to speak up.


Tuesday, June 23, 2009

Call to Action: Design Tips

The linked article is not new or rocket science. However it is nice to have reminders and examples.

E-commerce calls to action: design tips | Blog | Econsultancy: "Call to action buttons need to jump out at the shopper and leave them in no doubt about the next step they need to take to make a purchase."


Thursday, April 30, 2009

Button Sprites with Text Part 2 - An ANSWER!

As you may already know I love button sprites you may already too! In an earlier post Button Sprites with Text I showed 2 versions. Unless someone has a better argument I think the SPAN-ed the text version is the best.

My original problem was the silly "active highlight that expands all the way to the left and out of view." See the top button in the following example. What the hell is that!


Well my friends.... "outline:0 none;" saves the day! Below you can see the code in action.

Now, normally I would say don't remove this outline. It is probably a very helpful for assistant technology users. Though if you are using :hover, :active, and :focus I think you may be indicating the actions that are happening anyways.


CSS Solution
a:link, a:visited{
position: relative;
display:block;
width:200px;
height:30px;
background: url(/images/buynow.png)no-repeat 0 0;}

a:hover, a:active , a:focus {
outline:0 none; /% this removes outline. %/
background: url(/images/buynow.png) no-repeat 0 -50px;}

a span{
position: absolute;
top:0; left:-9999em;}


HTML Solution
<a href="">
<span>Buy Now</span>
</a>




Tuesday, February 10, 2009

Button Sprites with text

Edited 4/30/2009: New findings see Button Sprites with Text Part 2 - An ANSWER!
--------------------------------------

Button Sprites. I love em. Changing a background of a text link instantly to make hover and stuff is awesome.

Though what is the proper solution when you want the words to be stylize in the graphic and you do not want to use the default text in the browser?

Unusually I find this version often. It will take the text in the span and position it -9999em to the left. Unfortunately you get the crazy active highlight that expands all the way to the left and out of view.
<a class="CLASSname"
href="http://www.blogger.com/LINK" title="Click Here" >
<span>Click Here</span>
</a>


I have also seen the use of the dreaded clear.gif or spacer.gif. This takes advantage of the alt text for accessibility. It seems right but what a waste of extra code and bandwidth even if it is only 43ish bytes.
<a class="CLASSname"
href="http://www.blogger.com/LINK"
title="Click Here" >
<img src="/clear.gif" alt="Click Here" />
</a>


New Findings See
Button Sprites with Text Part 2 - An ANSWER!
If you would like to make a comment make it at the newer posting.

About Me

My photo
Connecticut, United States