| The layout of a webpage is the first task that we undertake. This issue is not trivial and should be studied carefully because many times we become crazy trying to guess why, for example, a box is nor well positioned on the screen. To do this, I will be describing the properties of CSS that are needed for a successful layout, complete with examples. And in another tutorial, I create a model of our future website. Many definitions are taken as is or simplified W3C Recommendation on Cascading Style Sheets, Level 2 Revision 1 (CSS 2.1), and Recommendation W3C "HTML 4.01 Specification" section that are in HTML / CSS of this web. |
| What is a website layout? Therefore is to define a structure dividing the space where we will show the contents in subspaces or boxes. There are many ways to structure a web, it is typical to leave a space at the top to a header, and the rest of the space we can distribute in one, two or three columns, some wider than others to hold menus and other content . It is also quite often common to leave the space as a footer. Taking the example on the web that we are using its structure is a header, three columns (the middle one more thick to put the contents) and a small foot. |
 |
| |
 DIV
|
| These 'spaces' that divide our website can be done in several ways. The boxes are the best (in HTML is the command DIV). Basically when using the DIV tag in HTML we are creating a container (box) with the style and position that we define in the CSS attributes of its identifier (ID) or their class (CLASS). |
|
 ID o identifier: |
|
This attribute assigns a name to an element. This name must be unique within a document. States with the # and the BODY is known as ID = "nombredelidentificador". |
|
CLASS: |
|
This attribute assigns a class name to an element. You can assign the same class name to any number of elements. States with a point and in the BODY is known as CLASS = "nombredelaclase". |
| |
|
| Setting an example: |
 |
| For now, this will be the structure of our website. Between the tags < style > and < / STYLE > we´ll write the properties of our DIV. That space is owned by the cascading style sheet CSS. When we finish we´ll pass the space to a separate file so that all of our web pages can access to the properties of our stylesheet, but for now write the CSS properties in the same file, for convenience. |
| Within the section < STYLE > < / STYLE > I have given an identifier called 'principal'. I have chosen an identifier for the element name will be unique in our website. |
| Between the < DIV > and < / DIV > We wrote the content for this box (tables, paragraphs, images ...), which is now empty, but already filled with something later. |
| Inside ID #principal still nothing. It will be inside this identifier specifying the position, how to behave, and the color of the box and its contents. In summary, we define in the stylesheet all positional characteristics, behavior and visual identifier for that and hence for that box. Let's see how. |
| |
HEIGHT - WIDTH |
| These properties specify the height and width of the content (in this case, the box). Can take three types of values: |
|
exact value: |
|
Ie, height and / or fixed width. There are many ways to establish the measures in a web. In this case use px, which are pixels. For example, if I write at #principal
HEIGHT: 100px; WIDTH: 200px;
I will be creating a box 200 pixels wide by 100 high. |
|
percentage: |
|
This percentage is calculated on the cash element of the container, ie its parent box, or put another way, the box that contains it. If there is no box that contains it, it will refer to BODY. If the element container has no fixed size (exact value) or not specified, the percentage is defined as' auto '. For example, if I write at #principal
HEIGHT: 60%;
I will be creating a box that is up 60% of the height of the box container. |
|
auto: |
|
The box will take size of the height required to view its contents. In width shall be extended until there is nothing that prevents it (another box or container end of the box). For example, if I write at #principal
HEIGHT: auto;
and between the opening and closing tags of the DIV
HOLA
write, I will be creating a box that is up one line ( word of the HOLA). |
| |
|
| |
BACKGROUND-COLOR |
| This property sets the background color of an element. |
|
value: |
|
Keyword that defines the color, such as 'red' or a 6-character hexadecimal code ( #ffffff). |
|
keyword -transparent- |
|
to make the underlying colors seen through. |
| |
|
| This property is not necessary to make a web layout, but it helps to visualize the position and behavior of the box (DIV) that we created. Each box is assigned a different temporary color, in order to see how position. When the entire structure is created, change the provisional values of the colors of the boxes to the final ones we want. |
| We will introduce the following values #principal: |
 |
| If we execute our website will get a box of 200 pixels high by 60% of the box container by width, which in this case is BODY (Notice that if we are changing the width of the window (showing non-maximized and dragging one of the side with the mouse), we see that the width of the box is changing to keep 60% of the total, but the high is fixed at 200px. Click this link ' EXAMPLE 2 ' to run. |
| Now we add some things for testing. |
| In the BODY, under the tag going to write the word HOLA |
 |
| If you run the page we see that the HOLA appears under the box. Click on this link ' EXAMPLE 3 ' to run it. |
| If we would have liked to appear in the box, we had written between the two DIV tags. From this test we have to understand that a standard form, which positions the elements in a web page will go up and down but what if I put something on the right of the box? Would not it be more logical that the natural position of the elements is from left to right and top to bottom? (after all, that's the way we read a document). |
| Well, yes. This naturally position itself (as we read the documents) is referred to as flow or flow of the document. |
| |
| flow or flow of the document (WATCH OUT! IS NOT A PROPERTY. IS A CONCEPT.) |
| By flow we mean the way your content "flows" within the browser window, and that may change or not depending on the value of certain properties. The normal flow of a document is horizontal, from left to right. |
| |
|
| But then why not place it under and to the right? |
| Because not all elements understand this flow in the same way. Without going into too many details at the moment (if you like, look at the display of CSS in the W3C Recommendation Cascading Style Sheets, Level 2 Revision 1 (CSS 2.1)), the DIV element is considered as a block (as opposed to other elements that can be considered 'inline') and for these, the natural flow of the page is up to down, so the word HOLA appears under the box. |
| If I add a new box called #segunda to our page, it will be placed under the word HOLA, because each DIV is positioned in a new line, and ends by jumping to a new line (positioning block). |
 |
| Click on this link ' EXAMPLE 4 ' to run it. |
| Ok. Agreed. The boxes are positioned one below the other in a natural way, but what if I want to place a box on the right? So that is introducing a new property called POSITION, along with four other supplementing it: TOP, BOTTOM, LEFT and RIGHT (which basically indicates the place where the box is positioned on the screen). |
| |
POSITION |
| This property determines the way it calculates the position of a box on the website. Their values can be: |
|
static: |
|
The static position is the default for all HTML elements, meaning that if you do not specify anything, the item is positioned in this way.
elements in static position, as will placing the flow of the document, in the case of DIV or boxes will be up to down. In this mode of positioning, the properties top, bottom, left and right do not apply. |
|
relative: |
|
The relative position also means that the elements are positioned according to the flow of the document, but unlike the static position, we can use the properties top, bottom, left and right. That is called 'moving the Fund to its normal position'. The values of the properties top, bottom, left and right are made regarding the Box container. |
|
absolute: |
|
The absolute position permites to place the box completely, using the properties top, bottom, left and right. Does not depend at all in the normal flow of the document and the other sisters boxes (boxes that are on the same level, don´t include this box nor are they included by it) does not take into account the normal flow of the document. The values of the properties top, bottom, left and right are made regarding the Box container. |
|
fixed: |
|
Is a derivation of Absolute Position. The only difference is that the values top, bottom, left and right are referenced with respect to the browser window, and not with respect to a box container. In this way, even if shifts in the website, any box POSITION FIXED, will not move.
NOTE: POSITION FIXED is not supported by Internet Explorer. |
| |
|
| |
TOP, BOTTOM, LEFT y RIGHT: |
Respectively define the distance from the container box to the point of beginning or ending of the box.
In the case of absolute or relative position, the container box is its parent box, or BODY, in the event that there is none.
In the case of fixed position, the box container is the window of the browser, maximized.
In the case of static position, these properties are not valid. |
| |
|
| I will give examples: |
| We will modify the values of the two boxes we've created (the height and / or width), and we will delete the word HOLA: |
 |
| Click on this link ' EXAMPLE 5 ' to run it. |
| NOTE: The line * (margin: 0; padding: 0;) in the CSS section, we have written to eliminate the margins that each browser sets the default to be viewed equally in all. |
| We have positioned the main box completely, and have moved 150 pixels to the right, from the left side of the box container. As is position: absolute, its box container is its father box, as doesn´t exist, it is BODY. Then top (the top is 0), and 150 pixels from the left of the body, which in this case coincides with the window. |
| What about the second box? As we have not changed anything, his position is static (position: static) and placed at the top left, with the flow of the document. It is important to realize that an absolutely positioned layer is extracted from the document flow, and does not affect the successive layers sisters. The main box appears on the second because, being extracted from the flow of the document is on a higher level. This is important because if not well structured funds, we can duplicate layers and losing content without realizing why it happens. |
| What would happen if we put a new box? |
| If static or relative, be placed under the second box (the green), with the difference that we can move the relative box with the properties top, left, right and bottom. |
| If it would be absolute or fixed, they would be placed on the same properties top, left, right and bottom, outside the flow of the document. |
| Change the code again and consider further changes: |
 |
| Click on this link ' EXAMPLE 6 ' to run it. |
| As I said before, the third box (blue) is located under the second, bypassing the principal because it is outside of the document. It does this because it is relative. The fourth box follows the same model as above, but this time to put the top: 10px; it will leave this space between the third and fourth box. |
| I will now add to the third box, a top: 10px; What happens? |
| Click on this link ' EXAMPLE 7 ' to run it. |
| Well, between the second and the third box, there are now 10 pixels in blank. This is correct, but why have the same 10 pixels disappeared between the third and the fourth box? The fourth-box also has a top: 10px; and if it is relative, this means that it should follow the flow of the document, and position after the third, and then leave 10 pixels between the two boxes. Where is the error? No error. We must always have in mind that when a box is positioned relatively, it does so on its place in the flow of the document, but does not take account of displacements that we have put. So although the third box is moved 10 pixels down, the relative position of the fourth box does not see it and puts it as if we wouldn´t have move the third. That´s why the 10 pixels disappear. |
| Attention to this because if the displacement of 10 pixels of the third box was 20 pixels (as I did in the example 8) we have now lost 10 pixels of the third box without knowing how or where, as we see in Example 8, because the left position (left) is different in both cases. |
| Click on this link ' EXAMPLE 8 ' to run it. |
| Someone may say, what position a box relatively? I position all the boxes completely, and I'm saving problems. When I explain the layout of this website we will see when it can be useful positioning layers relative. |
| Let's make another change. The third box we will introduce into the main box, as a daughter, and we will reduce the height to 50px. |
 |
| Click on this link ' EXAMPLE 9 ' to run it. |
| Now the shift left and top are not made with respect to the window, but made with respect to the parent or container box, the box principal. This is because the third box is positioned relatively (position: relative). The same with position: absolute. |
| However, if we change the position of the third box to position: fixed; |
| Click on this link ' EXAMPLE 10 ' to run it. |
| Positioning the box 20 pixels high and 100 to the right of the limits of the window, and not from the main container box. |
| NOTE: A FIXED POSITION is not supported by Internet Explorer. In these cases, the line of the CSS "position: fixed" not executed, and no other valid position, recognizes the box as static, skips the top, left ... and placed in 0.0 (upper left) of the box container, which in this case is principal. |
| To complete this tutorial I have made some changes again. I deleted the fourth box and I have set the third as relative. Also I have a new height: 400px; |
 |
| Click on this link ' EXAMPLE 11 ' to run it. |
| Now a problem occurs. The box daughter (the third in this case) has a height larger (400 px) than the box container (the principalx which has 200 px tall). What happened? So what happens is called overflow. Its effect is different in each browser. By putting the two most commonly used as a reference, IExplorer father overflow box to contain the daughter (note, without nothing the displacement we have given to the daughter), and mozilla, the effect is the same, but the background color of the box parent, will not exceed the height stated, seeming it doesn´t extend the overflowing. |
| Left unchecked can take a lot of headaches when we have advanced web page and start adding content to our overflow boxes. So it is better to control the overflow property set up for this purpose, the overflow property. |
| |
OVERFLOW |
| This property specifies whether the contents of a block-level element is clipped when it overflows the element's box. Their values are as follows |
|
visible: |
|
This value indicates that the content is not clipped, ie can be processed outside of the housing block, but only until the end of the browser window. (default). |
|
hidden: |
|
This value indicates that the content is clipped and that no user interface must provide scroll bars to view the content outside the cropped region. |
|
scroll: |
|
This value indicates that the content is clipped and that if the user's application uses a displacement mechanism that is visible on the screen (such as a scroll bar), this mechanism should be displayed in a box, whether or not this part of its cut. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. |
|
auto: |
|
The behavior of the value 'auto' means that if the box daughter is not out of control, there are no scroll bars, but if not, appear necessary (horizontal or vertical) to cover the overflow box daughter and will have exactly the size of the container box, situated on its right side or down as appropriate. (default for body) |
| |
|
| Let's see how it works. |
| If we take the example 11 of the previous page and put in window mode (not maximize) and we raise the lower limit for the mouse to 'eat' one box, we see that there is a vertical scroll bar on the right side of the screen. That happens because we are overflowing the size of box BODY, and for box BODY overflow by defect is auto (the same happens to the right margin). |
| If we put a new label in the BODY of styles and we assign OVERFLOW: HIDDEN;. What happens? |
 |
| Click on this link ' EXAMPLE 12 ' to run it. |
| Well, if we reduce the size of the website for some extreme, the contents of the box will be lost and there is no scroll bar (The Body, because we have disactivited, and the rest of the boxes, because default is 'visible' to indicate that the contents can overflow, but to limit of the window without leaving scroll bars). |
| If now we add to the box #principal the OVERFLOW: AUTO; |
 |
| Click on this link ' EXAMPLE 13 ' to run it. |
| We see exactly the effect that before commenting. To the right of the box # principalx see a scroll bar, because its content (in this case the third box) is greater than it and beyond. |
Español
English
