CSS Padding, Border and Margin – The HTML Element Box

How HTML Elements are Affected By Padding, Border and Margin Properties

Padding, Border and Margin properties affect the space around a HTML element. When learning to author web pages understanding how the space around content is defined and used is fundamental design knowledge. The content of each item on a HTML page uses a Box Model when a web browser displays it, this article is a tutorial on understanding the content, padding, border and margin parts of that model.

There are two major types of HTML elements block, where the element content starts below the previous element, and inline, where the content starts next to the previous elements content. For example the paragraph (<p>) element separates text into blocks (this paragraph and the one above are in there own <p> element). Compared to the emphasized (<em>) element which usually gives text an italic look directly in the place it is used. Each element has some content, the space around content is defined in terms of padding (the space between the content and the border), border (the line around the content and padding), and margin (the space between the border and the surrounding elements). This is illustrated in this diagram from the CSS specification.

HTML Content Padding Border Margin

Mona Lisa by Leonardo da VinciThe padding, border and margin can be broken down into top, right, bottom and left segments, illustrated in the diagram i.e. TP for top padding, RB for right border, BM for bottom margin, LB for left border, etc., this is know as the Box Model. A simple HTML page can be used to see the Box Model in action. Create a HTML page with an image (see right) with a red border and some text with a blue border, the borders added using inline CSS. (On Windows this file can be created in Notepad, or use Notepad++ which adds color coding).

Continue reading

Sponsorship and Advertising on Tek Eye

Showcase Your Company, Products and Services on our Site

The articles on Tek Eye are read by thousands of viewers every month, and that number is growing. Currently we serve standard Internet advertisements to recoup a small part of our running costs. You can feature your company, products and services on http:\\tekeye.biz from as little as £25 per year ($40 or €30). We can offer exclusive rights, full site sponsorship, banner ads, in line text links and other options. The banners at the beginning of posts, like the one above, could be yours. The adverts on the right could feature your products. Just get in touch, info@tekeye.biz.

Advertise on Tek Eye from $40 per year.

Visual Studio Express Requirements – Operating System

Visual Studio Express is the Free Version of Microsoft’s IDE

When writing software for Microsoft Windows based systems there are many free programming tools available, including the free Windows development tools provided by Microsoft themselves. Visual Studio is the Integrated Development Environment (IDE) that Microsoft produces for programmers, a.k.a. developers, to write software for Windows. The free version of these development tools is called Visual Studio Express (VSE), the latest version is the 2013 release. The 2013 release coincides with the release of Windows 8.1 and replaces Visual Studio Express 2012.

The 2013 versions are aimed at users of the latest Windows operating systems, Windows 7, Windows 8, Windows 8.1, Windows Server 2008 and Windows Server 2012. For users still running Windows XP or Windows Vista (not including Starter Editions) then Visual Studio Express 2010 will be needed. There are several different versions of VSE 2013 for programmers, which target different uses. The Visual Studio Express requirements vary depending upon which version is used. The versions are for Web, Windows 8 Apps, Windows Desktop or Windows Phone. To move beyond those types of programs the Professional version and upwards of Visual Studio would be required, and these are paid for products. The Microsoft Visual Studio 2013 Express products can be accessed from this link.

Visual Studio Express 2013 System Requirements
Express 2013 Product Used To Develop Minimum Operating System Required for Installation
Express for Web Web sites and HTML5 applications Windows 7 SP1 (With IE 10)
Express for Windows Windows 8 Apps Windows 8.1
Express for Windows Desktop Windows Programs Windows 7 SP1 (With IE 10)
Express for Windows Phone Windows Phone Apps Windows 8

All current versions of VSE are available from this downloads page (scroll down to the Express products, just after the full product trial versions). There is also a version of Team Foundation Server (TFS), Microsoft’s source code and development management software. TFS Express is limited to 5 users (team members). VSE products require free registration to obtain a product key to use them beyond a 30 day trial period.

Dice Roller Source Code for Android Apps

Free to Use Android Dice Roller Source Code to Add to Your App

An Android Dice Roller tutorial with source code for a basic dice roller App for Android. Simply add the example source code to any App that requires a dice roll. Dice face images and a 3D dice icon image provided, all images and code is free to use and royalty free. The code here is for a six sided dice but can be adapted for larger dice or more than one dice. There are no restrictions placed upon the code or the dice face images (all the images are free as they are in the public domain). To try out this Android dice roller source code start by generating a new App in Eclipse, we simply called it Dice. (If you are new to Android programming see the articles Set Up Windows for Android Development and Your First Android Hello World Java Program.)

3D Dice Icon for Android Dice Roller Source Code

(BTW we know that dice is the plural and means two or more die, but it is common to refer to one die as ‘a dice’ so we will be doing that here.)

Add the Dice Face Images

The code given in this article is for a common six sided dice, a cube, and therefore each side of the cube, each face, has a number from one to six, we will use six PNG images to show the dice roll result, plus a 3D image when rolling, the same 3D image is used for the App icon. These images were by the Open Clip Art Library user rg1024.

1st Dice Face for the Android Dice Roller Source Code2nd Dice Face for the Android Dice Roller Source Code3rd Dice Face for the Android Dice Roller Source Code4th Dice Face for the Android Dice Roller Source Code5th Dice Face for the Android Dice Roller Source Code6th Dice Face for the Android Dice Roller Source Code3D Dice for the Android Dice Roller Source Code

The sound of a dice roll will be used, by Mike Koenig and is from SoundBilble.com.


All the resources ready to import into the Dice project are available from this dice resources Zip file. Once imported (select Archive File under General from the File menu, then Import) change the App icon entry in the AndroidManifest.xml file to dice3d, i.e. android:icon=”@drawable/dice3d”. With the visuals and audio done we can move on to the actual Android dice roller source code proper. Continue reading

Why Your TextView or Button Text Is Not Updating

Understand Why Changing View Text Does Not Work or is Delayed

When changing the text for a TextView using the setText method new Android developers sometimes fail to understand why it does not appear to work. The text not updating also applies to other Views as well, such as the EditView and Button, why this happens is explained. This article is also useful in helping to understand why the User Interface (UI) in your Android App might not be as responsive as expected. The underlying problem is the same. So if you are trying to find out why your setText() on EditText, TextView, Button, etc. is not working as intended, or you UI is sluggish read on, it includes a work around to help you out.

Not All Android Code Executes Immediately

When changing the TextView text this code is second nature to all Android developers:

For those new to programming the above is equivalent to these two lines but saves having to declare the TextView object:

When setText(“New Text”) is run the text is not updated immediately. Android is an event based system. Something happens on the device (the screen is touched, a key is pressed, a call comes in, etc.) and Android raises an event. An App is notified of an event and when one occurs that it needs to respond to it does so, often running the code that you have written. Your App runs its code in a loop under the control of the Android Operating Systems (OS). This code loop is referred to as the App’s thread of execution. There is only one thread and it is responsible for both running the App code and updating the display. The setText call posts a message to update the display, so the update does not happen immediately. Once remaining App code has run the UI messages are processed, then the text changes. A running App’s execution thread can be viewed as shown in this simplified diagram. Continue reading