Hey there,
This is part 3 in my series of HTML/CSS Tutorials. Make sure to read the first, then the second, I do not explain things twice!
Now, so far we have learnt ho to make a website with a background, menu, headers and text. Now, next thing we will learn is how to make a footer, and how to make a mini menu.
First, we'll start with the footer. We will start with that so that we kinda have a full page before we start with a mini menu/sidebar.
As always we look at the CSS first.
As you can see, this will make another div we will use, and some text specifications for paragraphs in the div.
Now, over to the HTML.
The only new thing is
which will make the copyright c.
Now, you should have a working footer saying copyright bla bla bla. Be sure to place it before your end tags for html and body!
We'll move on to the mini menu/sidebar now.
Now, you should get everything. I'll go on with the HTML.
It will look something like this:
All new is that we use a div with both an id and class, which means both will affect it.
Well, that should go above footer and below content. Enjoy!
Notes:
-Make sure to read entire tut, things are NOT explained twice
-Make sure to have a folder called images directly in your site.
-For the sidebar, maake sure to have the text a little lleft so that there are empty space on your content.
-Have all images, call them the same as mine or change the code.
-Don't worry if you can't make it work, just post here or PM me 🙂
-Your page is incomplete? Experiment with what you have learned, cuz there is no part 4 🙁
This is part 3 in my series of HTML/CSS Tutorials. Make sure to read the first, then the second, I do not explain things twice!
Now, so far we have learnt ho to make a website with a background, menu, headers and text. Now, next thing we will learn is how to make a footer, and how to make a mini menu.
First, we'll start with the footer. We will start with that so that we kinda have a full page before we start with a mini menu/sidebar.
As always we look at the CSS first.
Code:
#footer
{
padding: 20px;
background: url(images/footer.gif) repeat-x
}
#footer p {
text-align: center;
font-size: 9px;
color: #ffffff;
}As you can see, this will make another div we will use, and some text specifications for paragraphs in the div.
Now, over to the HTML.
Code:
<div id="footer">
<p>Copyright © INSERT NAME HERE 2009</p>
</div>The only new thing is
Code:
©which will make the copyright c.
Now, you should have a working footer saying copyright bla bla bla. Be sure to place it before your end tags for html and body!
We'll move on to the mini menu/sidebar now.
Code:
.sidebar {
float: left;
margin-bottom: 2em;
}
#sidebar2 {
width: 200px;
margin-left: 10px;
}
#sidebar2 h2 {
background: url(images/.gif) no-repeat left top;
height: 26px;
color: #FFFFFF;
padding-left: 20px;
padding-top: 10px;
}
#sidebar2 li {
padding: 5px;
background: url(images/img04.gif) repeat-x left bottom;
font-size: .8em;
}Now, you should get everything. I'll go on with the HTML.
It will look something like this:
Code:
<div id="sidebar2" class="sidebar">
<h2>My Links!</h2>
<ul>
<li> <a href="/page.html">Page 1</a></li>
<li> <a href="/anotherpage.html">Page 2</a></li>
<li> <a href="/pagethree.html">Page 3</a></li>
</ul>
</div>All new is that we use a div with both an id and class, which means both will affect it.
Well, that should go above footer and below content. Enjoy!
Notes:
-Make sure to read entire tut, things are NOT explained twice
-Make sure to have a folder called images directly in your site.
-For the sidebar, maake sure to have the text a little lleft so that there are empty space on your content.
-Have all images, call them the same as mine or change the code.
-Don't worry if you can't make it work, just post here or PM me 🙂
-Your page is incomplete? Experiment with what you have learned, cuz there is no part 4 🙁
