Home1
HTML/CSS Tutorial - Creating a side-navbar Sat May 26, 2012 4:02 am
RSguideMaker
Registered Member
Posts : 342
Points : 228
Age : 25
Location : United Kingdom
Browser :
Hi there,
It's me RSguideMaker, here to give you a guide on how to make a side-navbar in HTML, similar to the one on the Wikipedia posts:
Now, by looking at it, you would think it was quite difficult, but it's not. All you need is a website with similar proportions to this:
Now, you will need this code in your CSS area (doesn't matter whether it's internal or external):
And that will adjust your links and your box. You will need to adjust the padding according to how many links you put. I have it set for 5 links, plus the Contents header.
The code I used for it is this:
I would do the code that I provided in the DIV2 section.
And it looks something like this:
I hope you found this tutorial useful. Please comment if you would like more tutorials in the future. If you have any ideas for the future, please don't be afraid to post.
It's me RSguideMaker, here to give you a guide on how to make a side-navbar in HTML, similar to the one on the Wikipedia posts:
Now, by looking at it, you would think it was quite difficult, but it's not. All you need is a website with similar proportions to this:
Now, you will need this code in your CSS area (doesn't matter whether it's internal or external):
- Code:
a:link {
COLOR: #0000FF;
TEXT-DECORATION: none;
}
a:visited {
COLOR: #0000FF;
TEXT-DECORATION: none;
}
a:hover {
COLOR: #FF0000;
TEXT-DECORATION: none;
BACKGROUND: none;
}
a:active {
COLOR: #0000FF;
TEXT-DECORATION: none;
BACKGROUND: none;
}
p.contents
{
width: 100px; height: 100px;
border-style: solid;
border-width: 1px;
padding-top: 5px;
padding-bottom: 50px;
padding-right: 10px;
padding-left: 10px;
border-color: #000000
}
And that will adjust your links and your box. You will need to adjust the padding according to how many links you put. I have it set for 5 links, plus the Contents header.
The code I used for it is this:
- Code:
<p class="contents"><strong>Contents</strong>
<br />
<br />
<a href="#">Home</a>
<br />
<a href ="#">Forum</a>
<br />
<a href ="#">Contact</a>
<br />
<a href ="#">About</a>
<br />
<a href ="#">Shop</a></p>
I would do the code that I provided in the DIV2 section.
And it looks something like this:
I hope you found this tutorial useful. Please comment if you would like more tutorials in the future. If you have any ideas for the future, please don't be afraid to post.
Last edited by RSguideMaker on Tue May 29, 2012 1:44 am; edited 1 time in total (Reason for editing : Changed bottom bold color to blue as red is used for administration)
