rate my and how do i do a mouseover? - Overclock.net

Greensystemsgo · 08-19-09

heres the site im using. free template. but definitely modified. what you think?

my problem is i wan tthe nav bar at the top, to when you mouse over, the font turns black. i have tried like 3 different ways, but i dunno what im doin wrong i cant do it. can someone plz just make one a mouseover and ill do the rest. ill lub you forever.

aksthem1 · 08-20-09

What do you want us to rate? I don't see a link to the site.

It would be a bit easier to know what we are dealing with so that we can make that mouse over.

Greensystemsgo · 08-20-09

yes im dumb and forgot the link. my bad. i was in a rush for a date. which we saw the time travelers wife. yipee

its k though next time its my turn to choose

http://goodjobrecords.com/personal/stuff/it/index.htm

aksthem1 · 08-20-09

I like it for it being a template. Colors fit in well with the scheme. The banner is a bit off on the nav bar though. It's always going to be off by a slight bit depending on the browser you use.

Ok now for the mouseover black text.

Code:

a#navbar:hover { color: #000000; 
    font-weight: bold;
    text-decoration: none;
}

Ok so you may be wondering where I got the navbar from, but I had to put in an ID for it. Here is the code just replace it with this and it should work.

Code:

        <ul>
            <li class="nlink"><a id="navbar" href="#Home">Home</a></li>
            <li class="nlink"><a id="navbar" href="#Archives">Archives</a></li>
            <li class="nlink"><a id="navbar" href="#Apparatus">Apparatus</a></li>
            <li class="nlink"><a id="navbar" href="#Members">Members</a></li>
            <li class="nlink"><a id="navbar" href="#Gallery">Gallery</a></li>
            <li class="nlink"><a id="navbar" href="#Traingin/">Traning</a></li>
            <li class="nlink"><a id="navbar" href="#Store">Store</a></li>
            <li class="nlinkend"><a id="navbar" href="#Links">Links</a></li>
        </ul>

Greensystemsgo · 08-20-09

Quote:

Originally Posted by aksthem1

I like it for it being a template. Colors fit in well with the scheme. The banner is a bit off on the nav bar though. It's always going to be off by a slight bit depending on the browser you use.

Ok now for the mouseover black text.

Code:

a#navbar:hover { color: #000000; 
    font-weight: bold;
    text-decoration: none;
}

Ok so you may be wondering where I got the navbar from, but I had to put in an ID for it. Here is the code just replace it with this and it should work.

Code:

        <ul>
            <li class="nlink"><a id="navbar" href="#Home">Home</a></li>
            <li class="nlink"><a id="navbar" href="#Archives">Archives</a></li>
            <li class="nlink"><a id="navbar" href="#Apparatus">Apparatus</a></li>
            <li class="nlink"><a id="navbar" href="#Members">Members</a></li>
            <li class="nlink"><a id="navbar" href="#Gallery">Gallery</a></li>
            <li class="nlink"><a id="navbar" href="#Traingin/">Traning</a></li>
            <li class="nlink"><a id="navbar" href="#Store">Store</a></li>
            <li class="nlinkend"><a id="navbar" href="#Links">Links</a></li>
        </ul>

omg dude thankyou so much you went so far and beyond giving me the complete section, i loveyou. also the header was fixed, by simply making the picture seperate from the nav bar. dont kno what the original maker wouldnt.

and again thankyou SO MUCH

OpticWaves · 08-21-09

The site looks to be down atm.

My favorite way to do mouse-overs is do exactly what aksthem said, but just barely different.

A really easy way to make buttons for menus is to make a button in photoshop like this -

Notice how the bottom half is lit up just a little.

Then, position image for links to the top, and the a:hover to the bottom, so when you hover, the bottom half shows rather than the top. The cool thing about this technique is that you don't have to use any javascript or load any extra images.

Here's the CSS -

For links

Code:

#wrapper #menu a {
	background-image: url(../images/green_btn.jpg);
	background-position: top;
	width: 100px;
	height: 30px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	display: block;
	text-align: center;
	line-height: 30px;

For hover -

Code:

#wrapper #menu a:hover {
	background-image: url(../images/green_btn.jpg);
	background-position: bottom;

		Overclock.net - Overclocking.net > Software, Programming and Coding > Coding and Programming > Web Coding
rate my and how do i do a mouseover?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)