Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact Advertise Here News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

Understanding CSS Positioning

By Stephen Bucaro

One of the most important CSS webpage layout concepts to understand how to position webpage elements. In this article you'll learn how a web browser places elements on the webpage as it renders the display, and you'll learn about the five different methods of positioning: static, relative, absolute, fixed, and float.

Every element on a webpage, be it an image, a drop-down list, or just a paragraph of text, is actually a rectangular box. When a Web browser displays a page, it generally places elements on the webpage from left-to-right and from top-to-bottom. You can think of this as the webpage elements "flowing" into position. As the elements flow onto the webpage, they line themselves up along a "baseline".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
}
</style>

</head>
<body>

<span class="myBox">Element 1</span>
<span class="myBox">Element 2</span>
<span class="myBox">Element 3</span>

</body>
</html>

Webpage elements that flow into position like this are called "inline" boxes. But certain Webpage elements, such as paragraphs <p>, divisions <div>, and horizontal rules <hr /> do not normally flow on the webpage from left-to-right. Each time one these elements is displayed, it starts a new line on the left side of the webpage, and it causes the next element in the flow to start a new line. Webpage elements that start a new line are called "block-level" boxes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style type="text/css">
.myBox
{
background-color:crimson;
border-style:solid;
border-width:1px;
padding:4px;
width:80px;
}
</style>

</head>
<body>

<div class="myBox">Element 1</div>
<div class="myBox">Element 2</div>
<div class="myBox">Element 3</div>

</body>
</html>

Block-level elements into position

Menu - More
Easy Cascading Style Sheets

Web Design Sections

Easy Cascading Style Sheets

Java Script Quick Reference

Easy Java Script Code

Web Design Tools

Coding Issues

FREE Graphics Warehouse

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.