Thursday, August 28th, 2008
One of the values for the display property is inline-block and although it has been around for quite a while now browsers have been slow on the uptake which is a shame because it’s just the sort of thing that can be very useful. In this article we will investigate ways to implement display:inline-block in a number of browsers.
If you are unfamiliar with inline-block then its use is defined as follows: “an inline-block makes the element generate a block box that’s laid out as if it were an inline box“.
What this means is that a “block level box” can retain most of its block level capabilities but in an inline environment. This would allow you to align a number of boxes on the same line all with their own width and height much in the same way as floating the elements but having the benefit of allowing inline rules to be applied to them unlike floats.
For example, three or four inline-block elements could be aligned horizontally and centered by using the text-align:center property on the parent. This would automatically center the elements within the available width. We could also apply the vertical-align:property to align their top or bottom edges with each other.
Perhaps it’s best to start with the finished example so you can see what we are talking about. The result is also shown in the screenshot below.
As you can see in the above we have achieved three (apparently) block elements all aligned nicely in the same row. The elements are perfectly centred and they all have their bottom borders aligned with each other. Imagine trying to do this with floats.
The truth is you could not do this automatically with floats at all as you could never align the bottom borders unless you were using fixed heights and then could calculate the margins for each. It is also very difficult to center floats also. With very little code we have achieved this effect so now we will get down to specific details.
Wednesday, August 20th, 2008
I love ASP.NET, but one thing I find extremely frustrating is dealing with the automatically generated ID properties that it places on page elements.
For example, let’s say you have a div with an id of “contentTop” like below:
<div id="contentTop" runat="server" >...</div>
Because you have made the control a server-side control by adding the runat=”server” attribute it will now be rendered with a different ID when it hits the browser (view the source code and you will see). It will get rendered as something like this:
<div id="ctl00_contentTop" >...</div>
But I don’t want to just complain here, I would like to provide some solutions too.
The solution will be found in the ClientID property of the server-side control. The ClientID property represents the ID that ASP.NET will use for the element on the client.
Using the ScriptManager we place the ClientID in a hidden form field. This can all be done in the code-behind file by using the following code:
ScriptManager.RegisterHiddenField(this, "contentTop", contentTop.ClientID);
Be sure to have included the ScriptManager to your page, like so:
<asp:ScriptManager ID="ScriptManager1" runat="server">
var id = form1.contentTop.value;
var cTop = document.getElementById('id');
That’s it, if you know of another way, please let us know.
Saturday, August 16th, 2008
If you’re like me you’ve been staying up way too late the last week watching the Olympics. Specifically Michael Phelps, or Aquaman as I like to call him, break just about every swimming record known to man. Phelps has so far acquired
seven eight gold medals, that ties surpasses Mark Spitz who won seven gold medals in 1972.
It’s very rare that you get the opportunity to watch the best person in the world do their craft and so I am in awe of him. So in Phelp’s honor goes this post and I have included for your listening pleasure the Marvin Gaye version of The Star Spangled Banner. You likely have heard it recently in the Nike Basketball commercial.
Wednesday, August 13th, 2008
This article details how to produce a product category list with associated images and text. This is the sort of thing you would see if you did a search on Amazon.
I am going to start by showing the finished product as this will help you visualize what we are going to achieve along the way. Figure 1 below shows a smaller version of the task ahead.
We are going to make a similar display but without using tables as in my view the information presented is not tabular and does not have a logical correspondence between rows and columns. Even if you do present a good case of why this should be in a table, please don’t comment on this as we are interested in the layout techniques rather than perfect semantics (for this example). The techniques presented here can be used in other layouts that are certainly not tabular and will prove useful in many situations.
Wednesday, August 6th, 2008
I met with some people last month that run an e-commerce website. Their story is an all too familiar one. They’re not selling as much product as they had hoped to and want to see what can be done to change the situation.
In this article I’ll share with you what I shared with them. It may surprise you to hear some of my suggestions.
The beginning of our conversation was your typical SEO talk. It started with an explanation of how Google (and others) ranks web pages. The typical reader of this blog will be familiar with this, so I’ll skip it. But if you need a refresher, read the article Google’s PageRank Explained.
After explaining to them the significance of inbound links to their site it didn’t take long before they asked the question that always gets asked at this point, “How do we get people to link to our website?”
I deflated their spirits be telling them that it’s not easy. You see, e-commerce sites, like theirs, don’t typically attract people wanting to link to them. Nobody, naturally, wants to link to a website that sells jewelry or Hungarian food condiments and trying to get people to link to a site they don’t want to can be an in futility. I know, because I’ve done it many times. Exercise
But hope is not lost. There is a way…
The short answer is you have to give people a reason to want to link to you. But how does an e-commerce site do that?
That’s what we’ll look at in this article. No, it’s not your typical, “How to acquire links” article so read on.