The top part of the website which still is called a cap usually reflects subject of a resource and may contain a navigation bar. If the cap of the website has a certain width, then on screens of the users having different permission, this part of the website will look differently. In order that the website cap on any screen looked equally, it is necessary to make some of its sections stretching or contracting depending on the screen sizes. Such rubber cap can be made, having refused fixing of its width in pixels.
It is required to you
- - have own website
Instruction
1. To make a rubber cap, at first draw it in the photoshop. Then separate 3 parts of the picture: 2 side and middle. These parts should be about 10-20 pixels wide and height in the necessary height of a cap. Save each element so that at you 3 different files turned out: 1.gif, 2.gif, 3.gif. Fill in these images on the website.
2. Then create the table in which elements of the top part of the website will be located. For this purpose in the HTML-code write:
<table cellspacing= "" 0"" cellpadding= "" 0" of" width= "" of 100% "">
</table> the Table with a width of 100% will stretch or contract depending on the sizes of the screen of the user.
3. Make a line in which cell place the left part of a cap of the website 1.gif in the table:
<table cellspacing= "" 0"" cellpadding= "" 0" of" width= "" of 100% "">
<tr>
<td width= "" 20"">
<images/1.gif img src= """" width= "" 20" of" height= "" 80" of" border= "" 0"">
</td>
</tr>
</table>
4. Create the middle part of a cap of the website consisting of the repeating picture 2.gif. For this purpose in the CSS code make such record:
.header {background-image: url ('images/2.gif'); }
5. Now in a line of the table create one more cell and place in it an average element of the top part of the website, having pointed to its name header in the CSS code:
<table cellspacing= "" 0"" cellpadding= "" 0" of" width= "" of 100% "">
<tr>
<td width= "" 20"">
<images/1.gif img src= """" width= "" 20" of" height= "" 80" of" border= "" 0"">
</td>
<td class= "" header"">
<h1> Name of the website
6. Having created the third cell in a line of the table, arrange in this cell the right part of a cap of the website 3.gif:
<table cellspacing= "" 0"" cellpadding= "" 0" of" width= "" of 100% "">
<tr>
<td width= "" 20"">
<images/1.gif img src= """" width= "" 20" of" height= "" 80" of" border= "" 0"">
</td>
<td class= "" header"">
<h1> Name of the website </h1>
</td>
<td width= "" 30"">
<images/3.gif img src= """" width= "" 30" of" height= "" 80" of" border= "" 0"">
</td>
</tr>
</table>