Archive for the ‘Web design’ Category

Equidistant objects with css - another way

Tuesday, October 21st, 2008

I recently read an article about the equidistant spacing of elements with css over at css-tricks.com. The simplicity of the technique really struck me as a case of good old lateral thinking. Despite this I was a little uncomfortable with the extra html that was required to make the technique work.

Inspired by the css-tricks.com solution I decided to try and solve the same problem with out the need for the extra div’s.

Admittedly, the solution I came up with isn’t quite as clean as the one proposed by Chris Coyier but never the less I feel compelled to share it.

Here’s an example

It’s all about lists

firstly, here’s the basic html…

<ul class="equal">
<li class="n1" ><a href="thelink">the first item</a></li>
<li class="n2" ><a href="thelink">Another item </a></li>
<li class="n3" ><a href="thelink">A piece of link text </a></li>
<li class="n4" ><a href="thelink">this also goes somewhere </a></li>
</ul>

That’s right, just good old lists with classes to allow us the differentiate between them.

The css

Firstly, all the list items need to be floated, The floats need to be contained within their parent ul and for simplicity I’ve added a rough and ready css-reset to remove any margins and padding and to remove the default bullets

ul.equal {
padding-left:9em;
height:auto;
zoom:1;/* just for ie - put it in ie only style sheet*/
}
.equal:after{content:".";clear:both;visibility:hidden;height:0px;display:block}
* { margin: 0px;
padding: 0px;
list-style: none outside;
}
.equal li {
min-width:9em;
float:left;
}

The trick, as with Chris Coyier’s solution, the trick is to get three of the four items to each take up a third of the overall width. the trick with this technique is to offset the 1st item using a negative margin and use a padding on the containing ul to prevent anything from droping behind it. You’re now left with a ul which has a width which can be divided into thirds.

.n1{margin-left:-9em;display:inline;/*fix ie6 double margin float bug*/}
.n2,.n3,.n4{width:33.3%!important;text-align:right;width:33.2%;}/*ie6 causes problems due to rounding-up so use a slightly smaller percentage for it.

after the we’ve got the floated <li>’s nicely expanding we need to make sure the last three are right-aligned in their respected <li>

.equal a {
background: #fff;
height: 9em;
display:block;
margin:0 0 0 auto;/*right aligns a block element in the good browsers*/
width: 9em;
text-align:center;/*to override the text-align required for ie6 for the parent li*/
}
.equal .n1 a {margin:0;}

In the good browsers you can use a min-width to prevent the boxes dropping down onto multiple lines.

As with most layout techniques… IE 6 has to be coaxed into behaving how would like. The code required to do this would normally be put in a stylesheet of it’s own using conditional comments but for the purposes of simplicity i’ve used a couple of hacks to keep everything in one file.

rounded corners… without images

Monday, October 20th, 2008

A piece of css which will create the impression of rounded corners without any images, javascript , proprietary css, and practically no extra html. The method is inspired by a technique used on google reader though I have to say… I think my methods cleaner.

view demo

Admittedly, it’s pretty inflexible in that there’s no control over corner radius (2 pixels) but I though it was worth posting as there may be instances where it comes in useful. I’ll try and write up the method when I get time but for now you can just view the source.

mForms - a css form layout library

Wednesday, June 27th, 2007

A library of CSS classes which I hope will take some (if not all) of the pain out of controlling form layout in pure CSS. It uses a modular approach so each form element is independent of it’s neighbouring elements, allowing you to mix and match and still achieve the desired results. I’m still working on additional classes to allow even more flexibility but in the current version should meet most needs. As well as being completely modular it’s also width independent so should work regardless of the available width, it will simply occupy the width of the containing element, alternatively you can just set width for the form element itself.
note - To eradicate the need for extra html markup this system uses label tags that wrap the form elements…
note - While wrapping form fields in labels is a valid technique in the xhtml transition DTD, unfortunately it isn’t valid ‘Strict’ xhtml. I’m happy to say that I’d miss-understood the validation error, The example has been fixed and is now valid strict xhtml.

Use

once the css files has been attached to your document and the class of ‘mForm‘ added to your form tag all you you need to do is add the appropriate class the the element label and mForms should do the rest for you.

Customisation

As well as using the css ‘out of the box’ there are also constants which can be changed to further customise the appearance.

demo

View example of mForm

Download

Download mForm.css

I’ll try and do more work on this, I’m just putting it out there to try and gauge the interest level. If you want me to motivate me to develop this further, incentives are welcomed.

Grid Layout Calculator (show me the multipliers)

Wednesday, June 27th, 2007

When designing websites in either Photoshop or Illustrator it’s often useful to be able to define a grid to work to. Because it’s better to keep all the measurments pixel perfect it’s handy to know all the multipliers of your chosen screen width. To make this process as quick as possible I’ve written a small script which will calculate all the multipliers (as well as number of grid squares) of any width you specify.
The Grid Calculator Script is here…’ hope it’s useful.

Beautifully simple on-screen colour picker

Friday, April 27th, 2007

A useful little tool for anyone who needs to quickly sample on-screen colours and copy the hex value to the clipboard ready for use. This simple little program does one thing, and does it well… ( win | 415k | free )
instant-eyedropper.com

permanent vertical scrollbar

Tuesday, March 27th, 2007

When a design uses a content area which is centred within the browser window you may frequently notice a ‘jolt’ as you click from a page where the content fits in the window to one where the browser has inserted scrollbars on the browser window.

This is caused by a slight reduction in the body width (and consequently the center line) from one page to another.
You can get round this problem by adding a 'overflow-y:scroll;' parameter to the body.

Unfortunately it doesn’t validate although it is supported by both gecko and I.E. and is simply ignored by other browsers.

right-aligned form buttons

Monday, November 27th, 2006

Up until recently I relied upon floating form buttons or elaborate text alignment scenarios to get them to sit at the bottom right of a form. I’ve just discovered that a better method exists and is in fact so glaringly obvious I’m surprised I’ve not come across it before.

If you give your input button a class of btn, all that’s required is:

input.btn {
margin-right:5px;/*or any value*/
margin-left:auto;
display:block;
}

that’s it! of course, if you where being fancy (and didn’t care about ie) you could use input[type=submit] in place of the class selector.

I think i may write an article purely about form layout in the not too distant future. I’ve been styling forms for a few years now and it seems that with each new site i discover an improvement to my previous method. If it’s something people would be interested just let me know and it might encourage me to do it sooner rather than later.

  • You are currently browsing the archives for the Web design category.

  • Categories