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 ++
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;
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;
Explanation of the CSS code that you have created:
- #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)
Then you save this file to a folder CHAPTER V Edit Footer named style.css
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:
Very interesting is not if you master CSS ...?
Conclusion:
The HTML file is only used to create content and settings for the display settings using CSS.
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 . 🙂
