CSS3 Dimensions and Resolutions

Basics of CSS2 – Part 6

Forward: In this part of the series, we talk about the width and height of HTML elements, as governed by CSS3 and their effects on different computer screen resolutions.

By: Chrysanthus Date Published: 23 Jul 2012

Introduction

This is part 6 of my series, CSS3 Basics. In this part of the series, we talk about the width and height of HTML elements, as governed by CSS3 and their effects on different computer screen resolutions. You must have read the previous parts of the series, before reaching here. Here, the word dimension means, width or height. The width is one dimension; the height is another dimension.

Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.

Giving Dimensions to an Element
You can give the width and/or height to any visible HTML element using CSS. You have the “width” and “height” properties for this. Either of them can take a value in pixels or in percentage. The following example illustrates this for a DIV element in pixels. Read and try the code.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        DIV {width:50px; height:50px;border:solid 1px black}
    </style>
</head>
<body>
    <div>
        A DIV element
    </div>
</body>
</html>

The following code is similar to the above, but the unit is percentage and not pixels. Read and try the code – the browser may not respect the height given.

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        DIV {width:50%; height:50%;border:solid 1px black}
    </style>
</head>
<body>
    <div>
        A DIV element
    </div>
</body>
</html>

When the percentage is used, the width is relative to the width of the containing element; and the height is relative to the height of the containing element.

Problem with Height
When designing your web page, you naturally can determine what the width of a containing element would be. However you usually would not know how deep the containing element would be, since you would not know in advance how much text and small elements the containing element would take.

When designing a web page, whether you are using pixels or percentage, if you do not give a height value to an image or video or any other html element, the browser will give you the corresponding or appropriate height. So avoid giving a height value to any image or video or html element, in your design.

Note: the dimensions of the audio element is not determined by you, the coder. It is determined by the browser, everything being equal. The audio element is an inline element. So, as you design your page, know what to expect and do so far as the placement of the audio element is concerned.

Computer Screen Resolution
The pixel is the smallest dot that can be displayed on a computer screen. When you have a colorful picture on the screen, it is made up of pixel dots of different colors. The total number of pixels that a screen can display is called the Resolution of the screen. Different screens have different resolutions. Common resolutions (in pixels) are, 800 X 600, 1024 X 768, 1152 X 864, 1280 X 960 and 1280 X 1024. The first number for each resolution is for the width of the displayable screen and the second number is for the height. If you multiply the width by the height, you would have the total number of dots the screen can display.

Now, the higher the resolution the bigger the computer screen. So, if you give the dimensions (widths) of your elements in pixels, the elements will appear relatively smaller in higher resolution than in smaller resolution screens. This is a disadvantage of using the pixel. What many designers do to solve this problem is that they use pixels and design their web page content to be centered on the screen width or to align to the left of the screen. In this way, when the resolution is small, the page content fills the width of the screen. When the resolution is large (high), the page content is at the center of the screen width or aligned to the left of the screen.

Dimension of Image and Video
An image or video element at the server has already its dimensions. The dimensions you choose for the image or video in your web page for the browser, has to be the same as those at the server or smaller. If you do not do this, you would loose resolution (sharpness) of the image or video. You can simply choose a width value that is the same as the one in the server or a smaller width value, for the web page. Avoid working with the height.

Advantage of using the Percentage
If you give your dimensions (widths) of your elements in percentage, the elements will have the same widths in different resolutions. In containing elements, the inline elements and text will wrap into the lines below. In this way your web page will appear the same way in different resolutions.

A problem, when you work with the percentage, occurs with image maps. If you do not know what “image map” is, read the article I wrote in this blog, titled, “HTML Image Map”. In theory, an Area element of the image map can take the percentage unit for its position and size. In practice, browsers today do not accept the percentage for the Area elements. When working in percentage, you can solve this problem by keeping your image small and floating it to control its position. As the resolution changes because different users are seeing the same web page, the text and inline elements around the floated image will adjust themselves.

Well, time to take a break. We stop here and continue in the next part.

Chrys

Broad Network

CSS3 Dimensions and Resolutions

Basics of CSS2 – Part 6

Introduction

Related Links

Comments