Overclock.net banner
1 - 16 of 16 Posts

·
Registered
Joined
·
2,024 Posts
Discussion Starter · #1 ·
This is a homework assignment for class that I want to look good.

So I am attempting to make my links when hovered over blow up or increase in size if you will to 150%.

I tried

Code:

Code:
a:hover
{
font-size:150%;
}
but it isn't working correctly.

Here are my current links using styling tags.

Code:

Code:
<!-- begin footer -->

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="../../index.htm">Home

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="tvradio.htm">TV & Radio

<!-- test code here -->
<a style="hover; font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="activities.htm">Activities

<!-- end footer -->
And here is my entire code with no content yet. Trying to get the skeleton of the webpage up first.

Code:

Code:
<!DOCTYPE html>

<!--

        documentation segment
        website: Pittsburgh
        web page: pittsburgh.htm
        author: manderson
        date created: feb.2013

-->

60's

<!-- begin wrapper -->
<!-- begin master -->
<!-- begin message -->

<a name="shopping"/>

Click on what you want to know about!

<!-- end message -->

<!-- begin content -->

<!-- end content -->

<!-- begin footer -->

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="../../index.htm">Home

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="tvradio.htm">TV & Radio

<a style="ex2:hover; font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="activities.htm">Activities

<!-- end footer -->
<!-- end master -->
<!-- end wrapper -->
Anyways thanks for looking it over.
biggrin.gif
I've posted at other website but those guys are such jerks. So it's back to good ol' trusty OCN.
thumb.gif
 

·
Premium Member
Joined
·
5,647 Posts
Can't you simply set the font-size to 1.5em? that would take the default font size and make it 1.5x normal size.
 

·
Registered
Joined
·
2,024 Posts
Discussion Starter · #3 ·
Quote:
Originally Posted by DaClownie View Post

Can't you simply set the font-size to 1.5em? that would take the default font size and make it 1.5x normal size.
That would defeat the purpose of hover. I don't care if the normal font is bigger. I want it so that when someone hovers over a link it will enlarge the text so they know the link is working correctly.
 

·
Premium Member
Joined
·
5,647 Posts
Quote:
Originally Posted by NinjaSushi2 View Post

Quote:
Originally Posted by DaClownie View Post

Can't you simply set the font-size to 1.5em? that would take the default font size and make it 1.5x normal size.
That would defeat the purpose of hover. I don't care if the normal font is bigger. I want it so that when someone hovers over a link it will enlarge the text so they know the link is working correctly.
Exactly... a:hover{font-size:1.5em;}

It works.
 

·
Premium Member
Joined
·
5,647 Posts
Quote:
Originally Posted by NinjaSushi2 View Post

I see. I will try it later in the morning. Nap time.
Not a problem. I work overnights... providing the OCN tech support on 3rd shift! lol
 

·
Registered
Joined
·
2,024 Posts
Discussion Starter · #7 ·
I was up till 0530 writing my code to realize I wrote most of it the hard way. Should have made my skeleton page then copy paste instead of correcting like all seven. *epic facepalm* Time to try out the code.
biggrin.gif
 

·
Registered
Joined
·
6,119 Posts
This is your problem:

(From W3C Schools)
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
 

·
Premium Member
Joined
·
5,647 Posts
Quote:
Originally Posted by NinjaSushi2 View Post

Quote:
Originally Posted by 3930K View Post

This is your problem:

(From W3C Schools)
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Epic face palm...
doh.gif


Bought to find out! lol

Got the link for it?

Edit: Doesn't work.
Works for me in Google Chrome...

What browser are you using? It could be the way you're doing your links, as in, perhaps the individual classes on each link is overwriting and superseding your a:hover in your global style sheet
 

·
Registered
Joined
·
2,024 Posts
Discussion Starter · #12 ·
Code:

Code:
<!DOCTYPE html>

<!--

        documentation segment
        website: Pittsburgh
        web page: pittsburgh.htm
        author: manderson
        date created: feb.2013

-->

60's

<!-- begin wrapper -->
<!-- begin master -->
<!-- begin message -->

Pittsburgh, 1960's

<!-- end message -->
<!-- begin message -->

[URL=../../index.htm]Home

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="tvradio.htm">TV & Radio

<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="activities.htm">Activities

<!-- end navigation -->
<!-- begin content -->

<a style="font-family:Trebuchet MS; font-size:1.7em; font-weight:900; color:#000";>WALK DOWN MEMORY LANE in Pittsburgh, Dana Spriggs

<a style="font-family:Trebuchet MS; font-size:1.3em; font-weight:300; color:#000";>

The 1960's started with the Pittsburgh Pirates winning the World Series over the New York Yankees in 1960.

[MEDIA=youtube]youtube-noc[/MEDIA]

The final phase of the Parkway West project was completed as the Fort Pitt tunnels open on September 1, 1960. Prior to the opening of the tunnels motorists had to exit the Parkway West and go via the West End Circle and go across the point bridge to get to downtown Pittsburgh.

Civic Arena opens in 1961 and many events take place in the new arena. Ice Capades, Ringling Brothers Circus, WWWF wrestling and many concerts took place during the 1960's. The Beatles, Elvis Presley and Frank Sinatra all performed there. In the late 60's KQV radio would present its "Shower of Stars concert series where you got to see 4 or 5 acts. Pittsburgh Penguins hockey was also played at the civic arena in the 60's.

Interstate 79 connecting Erie with Washington, PA, is completed by the late 1960's. "The Bridge to Nowhere" is finally completed in 1969 just in time for Three Rivers Stadium to open in 1970. The bridge was started in the early 60's and then a few years went by before it finally was completed.

<!-- end content -->
<!-- begin footer -->

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="../../index.htm">Home

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="shopping.htm">Shopping

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="restaurants.htm">Restaurants

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="tvradio.htm">TV & Radio

<a style="font-family:Trebuchet MS; font-size:.9em; font-weight:900; color:#c1cdcd"; href="activities.htm">Activities 
<!-- end footer -->

<!-- begin footer2 -->
<a style="font-family:Trebuchet MS; font-size:1.2em; font-weight:900; color:#33ffff";>References: Youtube.
<!-- end footer2 -->

<!-- begin footer3 -->
<a style="text-decoration:underline; font-family:Trebuchet MS; font-size:1.2em; font-weight:900; color:#c1cdcd"; href=https://www.youtube.com/watch?feature=player_embedded&v=Bs8foFpXpwU>Pittsburgh Pirates win World Series 1960[/URL]
<!-- end footer3 -->

<!-- end master -->
<!-- end wrapper -->
 

·
Registered
Joined
·
80 Posts
The problem is your putting some styles in the tag so it overwrites whatever you have in the css. So this

Code:

Code:
<a style="font-family:Trebuchet MS; font-size:1.2em; color:#000"; href="../../index.htm">Home
should be

Code:

Code:
<a href="../../index.htm">Home
and do that for all your a tags, but you're also gonna have to put all the attributes that were inline that we deleted in your css like this :

Code:

Code:
a
{
        font-family:Trebuchet MS;
        margin:1em;
        font-weight:900;
        text-decoration:none;
        font-size:1.2em; 
        color:#000
}
now if you do these in your css

Code:

Code:
a:link
{
}
a:visited {

}
a:active {

}
a:hover {
        font-size: 150% 
}
it should work. Also you didn't close your body tag properly you forget the closing >. Hopefully everything makes sense
 

·
Fantastic Mr Fox
Joined
·
5,862 Posts
Quote:
Originally Posted by NinjaSushi2 View Post

Code:

Code:
a:link, a:visited, a:active, a:hover
{
        color:#ffffff;
        font-size: 1.5em;
}
I don't think you want this. You are setting links to 1.5em for all states, not just hover. You won't be able see any difference. On top of that, the_duke's note about inline styles is also correct. In general you should only use inline styles if you absolutely have to, and this is usually because they were set with JavaScript. Inline styles override all other styles except those marked with the !important flag (if you need to use this, you are almost always doing it wrong).

Ignoring CSS selector specificity*, styles get applied in the following order:

External stylesheets
Internal stylesheets (inside style tags)
Inline stylesheets (inside style attributes on individual elements)

The above is why we call them cascading style sheets. In addition to this, styles get applied in the order that they appear for each type of stylesheet above. If you set a:link to have a colour of #fff in an external stylesheet and later a colour of #000 (in the same stylesheet) then it will appear black.

*This can be even more annoying than the fact that styles are applied in a cascading manner. For example:

Code:

Code:
.footer a { color: #000 }

... /*200 lines of more CSS*/

a { color : #FFF }
According to what I said above, the latter rule will override the former rule. However, the browser will apply styles with a more specific selector after styles which are less specific, even if the less specific ones are further down in the file. This only applies to styles within the same stylesheet type. An inline style will still override a very specific internal or external selector. See the below example:

Code:

Code:
[URL=#]link[/URL]
Despite the fact that I have a very specific (and downright ugly) selector in the internal stylesheet, the link will still be red. If the inline style was removed, the link would be black rather than red or white.

Specificity is a bit tricky. If an element doesn't get styled how you think it should be, use a tool like Firebug or Chrome's element inspector to see the styles being applied and which styles are being overridden by others. Both tools will show styles in the reverse order that they were applied, so the top-most styles which are not overridden are what you will see rendered.
 
1 - 16 of 16 Posts
This is an older thread, you may not receive a response, and could be reviving an old thread. Please consider creating a new thread.
Top