Editing Footer

After you create a layout, navigation, content and column right, now you need to edit footer. You must first create a folder named Chapter V Edit Footer , and in that folder create folder also images, because you need images for the footer.

Creating an HTML File Footer

Type the following HTML code in notepad ++

       

         

                  HOME 
                  PRODUK 
                ARTIKEL 
                MEMBER 
                TESTIMONIAL
                ABOUT US 
           

             

              Copyright © 2011 http://fajaryusuf.com“>Fajar Yusuf.com
           

       

The explanation for the above code:

• HTML file above I made the writing-HOME-PRODUCTS-ARTIKELMEMBER-ABOUT US TESTIMONIAL with each own I give the link “#”
• I also give writing Copyright and code and copy the code to create the © symbol and its name with a link to fajaryusuf.com.
• Each was I given selector. 

Save the file into the folder CHAPTER V Edit Footer , name footer.html.

Create CSS Footer

Now is the time you create a CSS file so that the footer nicer to be presented to the user. 

Type the CSS code below on the software you use

#container{
        width:1000px;
        margin:0 auto;        
        }
#footer{
        background-image:url(images/footer.gif);
        width:1000px;
        height:128px;
        float:left;
        }
#bottom{
        text-align:center;
        font-family:Geneva;
        font-size:12px;
        margin:25px 0 0 0;
        font-weight:bold;
        letter-spacing:1px;
        word-spacing:8px;
        }
#bottom a{
        color:#FFFFFF;
        }
#bottom a:link{
        text-decoration:none;
        }
#bottom a:hover{
        text-decoration:underline;
        color:#FFFF00;
        }
#copy{
        margin:25px 0 0 0;
        font-family:verdana;
        color:#FFFFCC;
        font-size:10px;
        text-align:center;
        }
#copy a {
        color:#FFFFCC;
        }
#footer #copy a:link{
        text-decoration:none;
        }
#footer #copy a:hover{
        text-decoration:underline;

• #container {…}create a page with a width of 100 px margin 0 with the placement of the middle (auto).
• #footer {…}to set footer with 1000px width and height of 128 placements float: left
• #bottom {…}for setting the writing placement test ditengan bottom menu (text-align: center), using the Geneva font, the font size 12px, we give a margin of over 25 px and the rest 0, made bold font (bold) with spacing between letters 1 px, and the spacing between words 8 px. 
• #bottom a {…}to set the writing by link white (# FFFFFF).
• #bottom a: link {…}to control the effects of bottom menu without underline text (text decoration: none).
• #bottom a: hover {…}to give effect if the mouse hovers over the article by adding underline (textdecoration: underline) and text color change color to yellow (# FFFF00).
• #copy {…}for setting copyright article, we give a margin of 25 0 0 0, using Verdana font, light yellow (#FFFFCC), 10 px font size, font placement center.
• #copy a {…}provide font color setting by a link with the same color with the word copyright is light yellow (#FFFFCC)
• #footer #copy a: link {…}give effect to underline the link without giving the value none (text-decoration: none)
• #footer #copy a: hover {…}effect on the link if you mouse over the text with effects underline (textdecoration: underline)

If you are correct then the folder view as above. 


Then you run the file footer.html to click 2 times, so the results are:

You can continue to the end of the matter, namely CSS:  Combining Whole Matter CSS. 



If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com . 🙂