...

View Full Version : CSS - Navigation Bar



xandra60
01-26-2012, 12:35 PM
:thumbsup: Hi Everyone

I would be really grateful for you help, I currently have a site which is in frames and its starting to look very dated. I have alot of content on there and I'm trying to move to CSS, I still want the site to work the same way, for example, Links down the left hand side which open in content part of the webpage.

I've only ever used HTML so CSS is all new to me! Any help or a no if its impossible would be great! :confused:

Thank you

Frankie
01-26-2012, 12:48 PM
Hey there,

It is most certainly possible! We do all the time. But you're looking at a whole new way of coding, that will most certainly take serious training as well. I would suggest to start with http://w3schools.com, after which the tutorials I wrote for the intermediate student should really get you going - see my signature page.

This may look like a lot of work, and it is, but do keep in mind that with CSS you can do really wonderful things! :-)

And to make it so that you will only have to change one navigation bar in case you add a page, you should learn the basics of PHP, i.e. the include function, as well. You will love that, too.

melloorr
01-26-2012, 01:28 PM
if you changed all the links in your navbar so they are in a list like this:


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

you could add divs around it like this:


<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Then using CSS, you can style it like this:

#navbar{
width: 140px;
height: 200px;
}
#navbar ul{
list-style: none;
padding:0;
margin: 0;
width: 140px;
text-align: center;
font-size: 1.2em;
}

#navbar ul li{
}

#navbar ul li a{
display: block;
width: 140px;
text-decoration: none;
color: #5F5E93;
}

#navbar ul li a:hover {
color: #0000ff;
}

Just edit it to how you would like it :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum