Jump to content


Css Help

Started by FFX, Aug 02 2006 05:54 PM

15 replies to this topic

#1 FFX

    Young Padawan

  • Members
  • Pip
  • 105 posts

Posted 02 August 2006 - 05:54 PM

I recently have tried using css.
I am new to it and here is my problem.

ive got my link code so that when you hover a link it will have underline effect.

Heres my code in my css file.

a:link {  color: #677D8F; text-decoration: none}
a:visited {  color: #677D8F; text-decoration: none}
a:active {color : #677D8F;  font-family: verdana;  font-size: 10px; text-decoration: none} 
a:hover { color : #333333; text-decoration : underline; font-weight: medium


Here is an example of what i mean.
http://www.fractical-fx.co.uk/news.php

You notice the blue hyperlinks. In the html i have not done anything other than linking to other bits of the site so i dont understand why its not working :D


Also i was wondering how you do the underline like on greycobra.com ?


thanks.

#2 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 02 August 2006 - 06:00 PM

Here try this:
a:link{color: #677D8F; text-decoration: none;}

a:visited{ color: #677D8F; text-decoration: none;}

a:active{ color: #677D8F; font-family: verdana; font-size: 10px; text-decoration: none;}

a:hover{ color: #333333; text-decoration: underline; font-weight: medium; }

Now I think it should work, make sure you always add the ; after every statment.

EDIT:
never mind your code is fine look at your html you have style="text-decoration: none;" in the links that don't work, that should fix your problem.

dEcade

Edited by dEcade, 02 August 2006 - 06:03 PM.

#3 Matthew.

    Official Spammer .Matt

  • Members
  • PipPipPipPip
  • 2,749 posts
  • Gender:Male
  • Location:England

Posted 02 August 2006 - 06:06 PM

Try:

td a:link {  color: #677D8F; text-decoration: none}
td a:visited {  color: #677D8F; text-decoration: none}
td a:active {color : #677D8F;  font-family: verdana;  font-size: 10px; text-decoration: none}
td a:hover { color : #333333; text-decoration : underline; font-weight: medium

if that fails replace table with p in the css.

That page is extremely messy though, lack of closing paragraphs, random font tags...lol (they need to be closed also)

And for greycobra it's:

a:link 
{
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}

View PostdEcade, on Aug 3 2006, 12:00 AM, said:

Here try this:
a:link{color: #677D8F; text-decoration: none;}

a:visited{ color: #677D8F; text-decoration: none;}

a:active{ color: #677D8F; font-family: verdana; font-size: 10px; text-decoration: none;}

a:hover{ color: #333333; text-decoration: underline; font-weight: medium; }

Now I think it should work, make sure you always add the ; after every statment.

EDIT:
never mind your code is fine look at your html you have style="text-decoration: none;" in the links that don't work, that should fix your problem.

dEcade


Umm....you dont need to add a closing semi colon to the final statement and also style="blah" will work fine however it will overwrite the rules in the stylsheet.

Edited by .Matt, 02 August 2006 - 06:08 PM.

#4 FFX

    Young Padawan

  • Members
  • Pip
  • 105 posts

Posted 02 August 2006 - 06:29 PM

thanks for the quick replys i tried both of what you said but still not working.

I also added the 
a:link 
{
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}

and that's not showing either.

Any ideas ?

Thanks

#5 Aussiestinger

    Young Padawan

  • Members
  • Pip
  • 270 posts

Posted 02 August 2006 - 06:47 PM

um is it just me or is there not even the basic tags?... those being the heady body etc...

#6 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 02 August 2006 - 06:54 PM

Okay look at the links in your html, the ones that don't work look like this:

<a href="http://www.fractical-fx.co.uk/forum/showuser_3" style="text-decoration: none">
	<font size="2">Fractical</font></a>

Take out:

style="text-decoration: none"

So that all your links look like this:

<a href="http://www.fractical-fx.co.uk/forum/showuser_3">
	<font size="2">Fractical</font></a>

That should fix it.

dEcade

#7 Hayden

    P2L Jedi

  • Members
  • PipPipPip
  • 716 posts
  • Gender:Male
  • Location:Texas

Posted 02 August 2006 - 06:56 PM

View PostAussiestinger, on Aug 2 2006, 11:46 PM, said:

um is it just me or is there not even the basic tags?... those being the heady body etc...

yeah, but we're not sure if it's there and he just didn't include it or what. ^_^

<html>
<title>CSS Page (Links)</title>
<head>
<style type="text/css">
<!--
a:link {  color: #677D8F; text-decoration: none; }
a:visited {  color: #677D8F; text-decoration: none; }
a:active {color : #677D8F;  font-family: verdana;  font-size: 10px; text-decoration: none; }
a:hover { color : #333333; text-decoration: underline; font-weight: medium; }
-->
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
</body>
</html>

doing it like that will make that the standard for ALL links on the page, unless otherwise SPECIFICALLY stated otherwise (if I recall correctly)


text-decoration : underline;

I believe THAT was your problem. If you'll notice, there is a space on BOTH sides of the colon. :P

Edited by SpatialVisionary, 02 August 2006 - 06:58 PM.

#8 FFX

    Young Padawan

  • Members
  • Pip
  • 105 posts

Posted 02 August 2006 - 06:58 PM

I did look heres the html

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


<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%" id="AutoNumber1" height="140">
  <tr>
	<td width="100%" height="19">
<a href="http://www.fractical-fx.co.uk/forum/showtopic_85" >
<font face="Verdana" size="2">Pixel2life V3</font></a><font size="2" face="Verdana"></a></font><font face="Verdana"><font size="2">
		by : </font> 
		<a href="http://www.fractical-fx.co.uk/forum/showuser_3" >
	<font size="2">Fractical</font></a></font></td>
  </tr>
  <tr>
	<td width="100%" height="80">
	<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="89">
	  <tr>
		<td width="100%" height="25"><font face="Verdana" size="1">Quote :
		<a target="_blank" href="http://pixel2life.com/" >Pixel2life.com</a></font></td>
	  </tr>
	  <tr>
		<td width="100%" height="64">

  <font face="Verdana" size="2">Ladies and gentlemen, girls and boys, spam bots 
		and web crawlers... Welcome to the latest release of www.pixel2life.com! 
		After a year of planning and coding, we are very happy to announce that 
		you can now strap on your parachute pants because our third generation 
		website is finally ready for the live audience. Project HammerTime is 
		now</font></td>
	  </tr>
	</table>
	</td>
  </tr>
  <tr>
	<td width="100%" height="19">
		<p align="center">
		<font face="Verdana" size="2">
		<a href="http://fractical-fx.co.uk/links/out/10/" >Pixel2life</a></td>
  </tr>
  <tr>
	<td width="100%" height="19">
		<p align="center">
		<font face="Verdana" size="2">
		<a href="http://www.fractical-fx.co.uk/forum/showtopic_85">Read More</a> 
		|
		<a href="http://www.fractical-fx.co.uk/forum/index.php?act=post&do=reply_post&f=2&t=85">
		Comment</a></td>
  </tr>
</table>

Thanks

#9 Aussiestinger

    Young Padawan

  • Members
  • Pip
  • 270 posts

Posted 02 August 2006 - 06:59 PM

yeah as SV said

<html>
<title>CSS Page (Links)</title>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%" id="AutoNumber1" height="140">
  <tr>
	<td width="100%" height="19">
<a href="http://www.fractical-fx.co.uk/forum/showtopic_85" >
<font face="Verdana" size="2">Pixel2life V3</font></a><font size="2" face="Verdana"></a></font><font face="Verdana"><font size="2">
		by : </font>
		<a href="http://www.fractical-fx.co.uk/forum/showuser_3" >
	<font size="2">Fractical</font></a></font></td>
  </tr>
  <tr>
	<td width="100%" height="80">
	<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="89">
	  <tr>
		<td width="100%" height="25"><font face="Verdana" size="1">Quote :
		<a target="_blank" href="http://pixel2life.com/" >Pixel2life.com</a></font></td>
	  </tr>
	  <tr>
		<td width="100%" height="64">

  <font face="Verdana" size="2">Ladies and gentlemen, girls and boys, spam bots
		and web crawlers... Welcome to the latest release of www.pixel2life.com!
		After a year of planning and coding, we are very happy to announce that
		you can now strap on your parachute pants because our third generation
		website is finally ready for the live audience. Project HammerTime is
		now</font></td>
	  </tr>
	</table>
	</td>
  </tr>
  <tr>
	<td width="100%" height="19">
		<p align="center">
		<font face="Verdana" size="2">
		<a href="http://fractical-fx.co.uk/links/out/10/" >Pixel2life</a></td>
  </tr>
  <tr>
	<td width="100%" height="19">
		<p align="center">
		<font face="Verdana" size="2">
		<a href="http://www.fractical-fx.co.uk/forum/showtopic_85">Read More</a>
		|
		<a href="http://www.fractical-fx.co.uk/forum/index.php?act=post&do=reply_post&f=2&t=85">
		Comment</a></td>
  </tr>
</table>
</body>
</html>

#10 Hayden

    P2L Jedi

  • Members
  • PipPipPip
  • 716 posts
  • Gender:Male
  • Location:Texas

Posted 02 August 2006 - 07:04 PM

btw, if Verdana is gonna be your default font and 10px will be the default size, you can do...

body { font-family: verdana; font-size: 10px; }

...in your CSS. ^_^

#11 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 02 August 2006 - 07:16 PM

It seems to underling for me, the color is the default link look but other than that it looks fine.

dEcade

#12 FFX

    Young Padawan

  • Members
  • Pip
  • 105 posts

Posted 02 August 2006 - 07:22 PM

View PostdEcade, on Aug 3 2006, 01:16 AM, said:

It seems to underling for me, the color is the default link look but other than that it looks fine.

dEcade


ye it's underlining the blue text links now ^_^ but not the rest. And how do i get the blue hyperlinks to do the same as the others because the html for the link is the same for every link B)

does css update instantly when you refresh the page once ive uploaded the new css.
Because i uploaded the css refreshed the news page and it was the same :P

#13 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 02 August 2006 - 07:40 PM

Try adding

color: #677D8F;

to

a:link 
{
	text-decoration: none;
	border-bottom: 1px dotted #677D8F;
}

so it would look like:

a:link 
{
	text-decoration: none;
	border-bottom: 1px dotted #677D8F;
	color: #677D8F;
}

I hope that will work.

EDIT

you do not need <style> --> </style> in your style sheet because that is used if you are having it on a plain HTML page but because it is in a CSS page u don't need it.

dEcade

dEcade

Edited by dEcade, 02 August 2006 - 07:41 PM.

#14 FFX

    Young Padawan

  • Members
  • Pip
  • 105 posts

Posted 03 August 2006 - 07:46 AM

thanks that works now.
But the only thing now is that the underline effect like greycobra doesnt apply to all the links.

#15 dEcade

    P2L Staff

  • P2L Staff
  • PipPipPipPip
  • 1,850 posts
  • Gender:Male
  • Location:Saskatoon, Saskatchewan
  • Interests:Guitar, Programming, Storm Chasing, Games (Designing and playing), Hockey, Photography

Posted 03 August 2006 - 09:58 AM

Hmm, it seems to work fine for me, what browser are you using? You might want to check your "Read More" link because you have the "<hr>" inside the link still so that makes it link too.

dEcade

#16 FFX

    Young Padawan

  • Members
  • Pip
  • 105 posts

Posted 03 August 2006 - 10:15 AM

thanks ive fixed that.
Only thing that is wrong now is on my main site my nav links.
Some have the underline border and some don't the code for each link is the same but different name and link, yet some work and some don't.
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design