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.
The 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).
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, email@example.com.
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
Express for Windows Desktop
Windows 7 SP1 (With IE 10)
Express for Windows Phone
Windows Phone Apps
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.
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.)
(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.
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 →
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:
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 →