WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 HTML/CSS Tutorial - Creating a side-navbar on Sat May 26, 2012 4:02 am

RSguideMaker

avatar
Registered Member
Registered Member
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):

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. Very Happy



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)

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
Its a good tutorial but I have to say this. If you said navbar will be simular to as at wikipedia you hould make same. As I did here:

Code:
<html>
<title>Check it out</title>
<head>
<style type="text/css">
a {
text-decoration:none;
}
a:hover {
color:red;
}
</style>
</head>
<body>
<ol style="list-style-type:decimal;">
<li><a href="#url">Something</a></li>
<ul>
<li><a href="#url">Inside1</a></li>
<li><a href="#url">Inside2</a></li>
</ul>
<li><a href="#url">Something2</a></li>
<ul>
<li><a href="#url">Inside3</a></li>
<li><a href="#url">Inside4</a></li>
</ul>
</ol>
</body>
</html>

Outcome:

RockerMan

avatar
Technician
Technician
There is a better way to make a vertical nav, you can just use an unordered list item like this:

Code:
<ul>
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
   <li><a href="#">Item 5</a></li>
</ul>

Then you can remove the bullets with:
Code:
li { list-style: none; }

No need for a load of br tags, CSS is a powerful tool Smile

Also, <html> has not been needed for around 2 years now Wink


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum