Archive for the ‘Tutorials’ Category

Applying contrasting background for titles is considered to be one of the latest tendencies in web design. See example below:



At first sight this task seems to be quite easy, however it may be difficult to realize it. Using «add padding» option you will begin to experience certain difficulties. The point is that padding is added to beginning and the end of text only. So, all line breaks will be ignored.

Once upon a time this task was almost solved by Yuriy Artyukh. The method was based on adding border to a child element. Nevertheless, the work hasn’t been 100% completed. There was no padding at the end of the first string (the place, where words are carried to) anyway. Other solutions I was sent via Twitter had the same problem. Line breaks had not been specified correctly.

So, how to do this?

Several days ago we had a task to port a small iPhone app to the iPad. At the outset, the process seems pretty straightforward. However, as we got into the process we discovered this was not so. Through our efforts to make the app work on the iPad we discovered several iPhone and iPad programming techniques we would like to share. This article covers basic iPhone to iPad porting techniques and also we have supplemented it with our own practical recommendations and additional helpful remarks.

Tip 1 – nib-files

Follow Apples advice and begin porting your application with «Upgrade Current Target for iPad» menu item. It is easily found in the context menu (use right-click button of your mouse) of the current Target in XCode. Thus, all your nib-files of user interface will be duplicated in «Resources-iPad» folder and «-iPad» postfix will be added to the name of each file.

The next step is to process of your newly-created files. They should look pretty good on the spacious XGA display of Apples plane table computer. Here, you have two options at this stage. The first one is to open each nib-file in «Interface Builder» and select «Create iPad Version» item in the «File» menu. Using this method we always achieve the desired results. Nevertheless, there is another approach. You can also specify the attributes in each of nib-files using the way shown in the picture:

How to make columns which act the same way as table cells using only CSS?

There is a method to complete this task – make the columns the same height. It is one of the most popular tasks in html markup. There are several ways to solve it, but all they either provide only visual results (when columns seem to have the same height, but actually they don’t, the effect is a result of laying columns on a special background, this method is called faux columns) or require extra markup, or unusual markup (for example, when one block is included into another one and it is given position: absolute, top: 0, bottom: 0 and a shift to the required side) or these methods are realized to be very clever and not intuitively understandable css (for instance, padding-bottom: 32768px, margin-bottom: -32768px ).

But we have to make the columns act the same way as table cells – the block is stretched out by its width to fill in the empty space if its width is not specified.

Nevertheless, a new solution already exists!

After IE8 came out it becomes possible to work with columns in a way that is specified by the W3C – using display: table-cell properties!

It is an irreplaceable method for situations, when it is necessary to realize the following structure:

This is a standard markup – a container including two columns:

<div id="wrapper">
    <div id="content">
…
    </div>
    <div id="sidebar">
…
    </div>
</div>

Apply the styles to it:

#wrapper {display: table; table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0 auto;}
#content {display: table-cell; width: auto; vertical-align: top; padding-right: 38px; padding-left: 20px;}
#sidebar {display: table-cell; width: 290px; vertical-align: top; padding: 25px 20px 0 15px;}

Everything works perfectly in modern browsers such as – Firefox, Safari, Chrome, Opera and IE8. But what will you do with older versions IE – 6 and 7?

Expression can become a helpful solution anytime – this is a proprietary property of older IE versions (it is excluded in IE8), it allows the calculation of the values of css properties depending on different conditions. In fact, it is a small js built into css.

Thus, in order to realize the similarity of columns with the same height in older IE versions we have to take two blocks and place them one behind another calculating the width of a left cell. We can’t use absolute positioning to place them for the reason this will break webpage flow, that’s why we use float.

Thus:

#wrapper {display: block; zoom: 1}
#content {float: left; width: expression(wrapper.offsetWidth - 325 - 38 - 20 - 5 + 'px') }
#sidebar {float: right; }

A distinguishing feature of the expression is that it is used only if JavaScript is turned on. But, what do we do if a user has an older version of IE with js turned off? (This situation is not as uncommon as it may seem to be – the restriction on using JavaScript can be caused by the internal safety policy of a company). For such a case, it makes sense to specify an approximate width for this block, which the block would have with the standard extension 1024×768, and the next rule is to reassign it if JavaScript is turned on:

#wrapper {display: block; zoom: 1}
#content {float: left; width: 61%; width: expression(wrapper.offsetWidth - 325 - 38 - 20 - 5 + 'px'); margin-bottom: 75px;}
#sidebar {float: right; margin-bottom: 75px;}

The example of realization