Member Avatar for karlm

Hi guys,

first & foremost, my apologies if this is posted in the wrong zone - feel welcome to move it if necessary.

OK, and on to my situation...

I'm attempting to rewrite my navigation bar (vbulletin) to use images as oppose plain text. I used to frontpage2003 to start me off (I'm absolutely inexperienced to the lowest level). It all works fine (using 'interactive buttons') on frontpage, but it doesn't work one bit when applied to the templates.

I have zero experience in css & java/javascript so really I'm asking for the most basic of assistance to get me going here.

I'd like to have my navbar so it has - similar to daniweb's navbar by chance - an image that says "User CP" in blue... when hovered, the 'ink' changes to a red, and when clicked the whole image changes again to reflect a 'depressed button' and deep blue ink for the text.

I know it's an easy task, and I apologise for asking such easily answered questions, but I have googled for well over an hour now in an effort to find out what I should be doing.

Allt he information I can locate though doesn't appear to be helping me one bit. Thus, here I am... Any help at all, greatly appreciated.

:)

  • 2 Contributors
  • 6 Replies
  • 123 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by karlm
Member Avatar for Cerberus

Here's a simplified way to do it in CSS.

<html>
<head>
<title></title>
<style type="text/css">
    a:link {
        text-decoration: none;
        color: red;
        background-color: yellow;
    }
    a:visited {
        text-decoration: none;
        color: black;
        background-color: blue;
    }
    a:hover {
        text-decoration: underline;
        color: green;
        background-color: gray;
    }
    a:active {
        text-decoration: none;
        color: silver;
        background-color: cyan;
    }
</style>
</head>
<body>
        <a href="http://www.daniweb.com">Daniweb</a>
</body>
</html>

You can change the colours around between the style tags.

This can be done using your own images using rollover buttons instead.

Member Avatar for karlm

Thank you very kindly, Cerberus, for the head start - I checked it out with frontpage and it works like a dream.
Now, forgive my ignorance - I can see how such a clean script works, using text, but how might I add images?
e.g. say I have three tabs I'd like to use, each has three colours:

tab1-standalone
tab1-hover
tab1-click/ed
tab2-standalone
tab2-hover
tab2-click/ed
etc. etc.
?

thank you again for such a great start on the path to CSS :)

Member Avatar for Cerberus

I'm not sure how you do three images but i'll start you off with a simple roll over button.

<html>
<head>
<title></title>
<style type="text/css">
    .usercp
    {
        background-image: url(usercp2.png);
        display: block;
        width: 50px;
        height: 30px;
    }

    .usercp a
    {
        display: block;
        width: 50px;
        height: 30px;
    }

    .usercp img {width: 50px; height: 30px; border: 0; }
    .usercp a:hover img{visibility:hidden}
</style>
</head>
<body>
    <div class="usercp">
        <a href=""><img src="usercp.png"/></a> 
    </div>
</body>
</html>
Member Avatar for karlm

Thanks again :) got that working in frontpage.

Is there a means to use css so it's not in the head? Because that's where my issue was with changing navbar before, that i couldn't seem to add css into the header (nor headerinclude).
Thank you again :)

Member Avatar for Cerberus

Thanks again :) got that working in frontpage.

Is there a means to use css so it's not in the head? Because that's where my issue was with changing navbar before, that i couldn't seem to add css into the header (nor headerinclude).
Thank you again :)

Yup just copy and paste the style code (delete the style tags completely) into a seperate file and call it something like mystyle.css. Then put the following code into the head tags...

<link rel="stylesheet" type="text/css" href="mystyle.css" />

Member Avatar for karlm

Thank you very much Cerberus, if you click my sig, you'll see i have it working :)
thank you again :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.