| PRIOR NOTE: This tutorial refers to such concepts in the Tutorial Website layout with CSS, of this website. |
| To make the structure of our website, the first thing we must be clear is the design of this structure. I will choose the design that is drawn on the layout tutorial, which conforms well to this site. |
 |
| It Contains a header, footer, and three columns in the middle. The center column of the much wider to enter the contents. On the left you can place the menus, and right, for example advertising or links to external sites, or news or polls. What we want. |
| Now we´ll create a folder on the site you want from our PC and in it create two text files (eg with notepad). One of them is called index.html (there will be any HTML from our site) and the other is called misestilos.css that contain all the CSS properties that need to format the HTML of our website. |
| In the file misestilos.css of time typing the line |
| *{margin:0; padding:0;} |
| to ensure that the margins of any web browser are being used to zero (each browser preset margins, and this creates differences in the designs). |
| Moreover, the index.html file should contain a structure like this: |
 |
| where the line < link href="misestilos.css" rel="stylesheet" type="text/css" > |
| tells us that this document will use as a stylesheet misestilos.css the external file. |
| I think it is obvious that the visible area of a website depends on the resolution of the monitor visitor. If we have a resolution of 800x600 pixels, we will see less contents than in a resolution of 1280x1024 pixels. That is a problem in our structure because we do not know the maximum size that will take us. There are many ways to create websites that are adapted to the width of the screen of any computer, using specific measures to do so. I, for my part, I prefer to make the web a predetermined size (at least the width of the page) and for that I must make a decision. What resolution sould I give the page? |
| Today, most monitors have a resolution between 1024x768 and 1600x1050 pixels or even higher. Then I´ve decided that I will make the page width to 1024 pixels. If the screen resolution of visitors is lower, you will see the horizontal scroll bar or you will lose some information (depending on the property to put overflow), and if the resolution is higher, part of the screen is blank. |
| I chose this resolution in width and not less than another, because then the big monitors will see the content on our site too small, and the future aims to the disappearance of small resolutions and the emergence of new bigger ones, thus aggravate the situation. That is my decision. Any other can be just as good. |
| But what I dislike is that the page appears to the left of the screen leaving the free space on the right. What I wish is that in large resolutions, my page appears centered horizontally. To do so the first thing we will do is generate a large box (which we call CONTENEDOR) and focus on the screen. Thus, within it, we create our structure of the web. |
| Created in the BODY of index.html, labels < DIV ID="contenedor" >< /DIV > |
| In misestilos.css create the BODY tag, and now, we will put a background color, eg black. |
| BODY { background-color: black;} |
| And now create the label CONTENEDOR in the file and give some style attributes. What? |
| The background color, for example, yellow (we will use different colors for better visual detail as we structured the site, but will not be the final). |
| The height and width. |
| Position the box with top and left on the screen. |
| The width seems to be clear, is 1024px. But there is something to be taken into account. If the content is beyond the screen (which will happen for sure below), will leave a vertical scroll bar. If we declare the width 1024px just as in the resolution of screens, the bar will eat some of the content, so we must subtract to 1024 the width of the scroll bar, which is 20 pixels. In this way, the WIDTH attribute of our cash value will CONTAINER 1004. |
| Giving 200px height value at the moment, I am going to position the box by putting a position: relative to the first placed within the BODY because no other before it and by the flow of the document. |
| The top and left and I will put 0px because the box is positioned above and to the left of the screen. |
| But if I put the left to 0px, the box will start to the left of the screen and I wanted to focus, ie, the box has a fixed width (we already knew) and that spaces voids of the sides are flexible, this way as I'm closing the window on one side, the outer margins of the box container must be declining, leaving the box centered horizontally. To achieve this we will leave the box completely positioned to the left of the screen and play with the property MARGIN to leave spaces on the sides. This is done as follows: |
| I'll Place in the BODY tag text-align property with the value CENTER. This will cause the entire contents of this box appears centered, ie, we are focusing all of our web content (this really should not be the case and because the text-align property should only act on the elements inline and not on a full block, but we take advantage of this error to achieve our goal). |
| Now, the label property called CONTENEDOR add margin: auto. This will cause the box CONTENEDOR distributed equitably to the margins, one side to another. As the width is 1004px, on which (according to the resloucion of the screen) is divided on each side of the box CONTENEDOR. |
| One last detail is that we must return to correct the alignment of the text in the box CONTENEDOR, because if we do not, all the contents appear centered. Put a text-align: left; and thus return to the normal position to the left of the box. |
| NOTE: The margin property is explained in detail in the tutorial Borders and Margins. |
| NOTE 2: The text-align property I have not explained yet, but enough to know when it serves to align the text with respect to the window, but here we take advantage of an error in its implementation to align the entire contents of the block (in our case The box CONTENEDOR). Its possible values are LEFT, RIGHT, JUSTIFY and AUTO. |
| The resulting CSS code will be this: |
 |
| The look of the web will be this: |
 |
| Click on this link ' EXAMPLE 1 ' to run it. |
| Try not maximize the window, and change the right margin with the mouse to see the lateral gaps decrease size and the box stays focused until the window size is smaller than the box. Then see the horizontal scroll bar to view the content does not come in the window or display. |
| We still have to resolve the issue of height. We have defined a set amount (200px), but what usually happens is that we will never know what the page is going to measure. Usually the model page is duplicated several times to access different sections of the site, and each section has a size of long dependent on its contents (note it). With this operation, it would make sense to put high HEIGHT: auto; as well, when we define other boxes within it, its size determines the size of the principal. But now if you put the height as auto, the box will not be seen because there are no contents, which currently we´ll extend to see the best value to 600px. It may now be a bit complicated to understand, but later will be easier. |
| We will be filling our content box CONTENEDOR. |
| The first thing we add is a header, were we will further put the main banner. The call for a complicated CABECERA (HEADER). ;) |
| That header will occupy the entire width of the box, and height, for example 100px. |
| I do not like to position the header fix, among other things because I lose screen space forever, and because IExplorer does not support this attribute. The position can be as absolute or relative, but under it we´ll be positioning the other, I think more should do it as relative. |
| This header is not going to give you the option to overflow, so that we descuadre other content. For this set its overflow to hidden. Finally, let's give it color blue, for example, to see the changes. |
| In the BODY, you have to add the < DIV ID = "header" > < / DIV > tags between the opening and closing of the box CONTENEDOR. |
| The resulting CSS code will be this: |
 |
| The look of the web will be this: |
 |
| Click on this link ' EXAMPLE 2 ' to run it. |
| Now let's do the body, ie the center of the wide column. I'm going to do it before the sides, because this box will be positioned in a relative (relative) under the header. At the beginning, some data will be easy to understand. |
| The position is relative and changing their background color to white. |
| Now, before you place it, sould know what width we want the box to have, and the width of the two sidebars. If the total is 1004px, I will leave the left column to 200px wide, the central body or to the right column and 620px to 184px, for example. That leaves me a top to 0 (because the box is relative and will be placed under the sister relative box, the header. If the box was full header, we should define the top to 100px, to put it right, because the absolute positions go outside the flow of the document) and a left to 200px. |
| Now we go with the height. Actually, this is the box that determines the height of the web. This is because I believe that the contents of this box, all pages in this structure will be greater than the contents of the sides box. To do this, if we define the height of this box to Auto, as it is getting data, the box will grow and with it the CONTENEDOR box and the sides, when we´ll define it. I´ll also change the CONTENEDOR box´s height value to Auto. |
| But although it is certain that the central box will be greater than the two sides it could be not on some occasions. To make sure no mistakes and that the window is closing on the content of the side boxes, you could establish a minimum height where the menus are sure that the left box and the contents of the right box will never make it. We could define that minimun height as enough for later if we put a foot on the website, say, 40px from the Headre to the footer, you can see into the browser maximized. As we have assumed a minimal definition of 1024x 768, we'll give that minimum value of 700px (if we see that the contents of the sidebars don´t fit in that space we would make it bigger). |
To set the minimum height of a box we use the property DIV MIN-HEIGHT. |
| The problem is that the property is not supported IExplorer, that with the property HEIGHT acts in the same way as other browsers with min-height, ie, the length of the box will be extended till include the content (so long as the overflow of the box is visible, clear, as it is by default). |
| You need a good tricks I've found in forums and blogs and it works quite well. |
| First we define the minimum height with MIN-HEIGHT: 700px; |
| This line will be understood by all the browsers except IExplorer. |
| Second, we place the line HEIGHT: auto; |
| Third, put the line HEIGHT: 700px; |
| The trick is to give greater weight to the execution of the second line by adding the attribute "! important", which the IExplorer doesn´t understand and the rest of the other browsers understand that if exist twice specified the same property, the property that has the !important will be the one executed. |
| If we put three consecutive lines, we |
| MIN-HEIGHT: 700px; |
| HEIGHT: auto ! important; |
| HEIGHT: 700px; |
| IExplorer will react to the first and third line, not doing the second. IExplorer as beyond the box to contain their content (forgive the repetition), the minimum height is fine. |
| For other browsers, the first sentence as it is understood the way it is, and between the second and third, that are the same property, will choose !important and set the height of the box car, which is what we want. |
| I will make changes step by step. |
| We declare our first new box < DIV > in the BODY under the box CABECERA, inside the box CONTENEDOR. |
| The code resulting index.html is this: |
 |
| Second, in the CSS file, I modify the height of the box CONTENEDOR to Auto and then declare the properties of the new box CUERPO. |
| The resulting CSS code will be this: |
 |
| The look of the web will be this: |
 |
| Click on this link ' EXAMPLE 3 ' to run it. |
Español
English
Home Page
