[SOLVED] a[href] not working...

MasterACE14 · July 23, 2007

I'm new to CSS, and what I want is to make the hyperlinks to be of my set font, color, background color and size. but it doesnt seem to be working and I just have standard hyperlinks.

Note: #nav is the left nav panel where I want the hyperlinks to be changed

heres the style sheet code(with the hyperlink part at the bottom):

/* set margins, padding, and inline-level alignment */
body,div { color: white; margin: 1; padding: 0; text-align: center; background: black }

/* set widths and float nav & ads div content boxes */
#nav	{ float: left; width: 130px	}
#ads	{ float: right; width: 130px }

/* set side txt margins 5px > nav & ads widths */
#txt	{ margin-left: 105px; margin-right: 105px }

/* ensure footer stays at the bottom */
#ftr	{ clear: both }

/* show boundaries and set image sizes - for clarity */
#hdr, #ftr	{ background: black				}
#nav, #ads 	{ background: black				} 
#txt		{ background: black				}

#hdr img		{ width: 520px; height: 148px	}
/*#ads img		{ width: 120px; height: 500px	} */
#txt img		{ width: 150px; height: 200px	}

/* set link colors */

#ads href		{ color: green					}

/* set left nav properties */

a[href]		{ background: yellow; color: black; font-size: 0.75em; font: "Pristina" cursive }

Regards ACE

ToonMariner · July 23, 2007

href is not a css selector - replace them with a as that is the tag name....

MasterACE14 · July 23, 2007

ok, I've tried:

a	{ background: yellow; color: black; font-size: 0.75em; font: "Pristina" cursive }

and I've tried:

#nav a	{ background: yellow; color: black; font-size: 0.75em; font: "Pristina" cursive }

with no success.

wildteen88 · July 23, 2007

#nav a should work. Could you post some HTML example code for the left nav

MasterACE14 · July 23, 2007

here's the source.

Note: I have included each page(separate part) into 1 page, footer, header, leftnav, rightnav, and center.

<html>
<head>
<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >
<meta name = "creator" 
	content = "ACE" >
<meta name = "keywords"
	content = "Online,MMORPG,game,fun,crazy,roleplay" >
<meta name = "description"
	content = "Conflicting Forces is a MMORPG" >
<meta http-equiv = "Content-Type"
	content = "text/html; charset = ISO-8859-1" >
<title>Conflicting Forces - Modern Combat - Online MMORPG</title>
</head>
<body>
<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >

<div id = "hdr">

<img src="images/conflicting_forces_header.png">

</div>

<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >

<div id = "nav">
Navigational Panel<br><br>
<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=progress">Progress</a>


</div>

<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >

<div id = "ads">

Supplemental Panel																					<br />

<a href="http://www.nitrozone.net/"
<img src="images/ads/nitrobutton.png">																<br />
</a>

<a href="http://www.ultimate-battle-online.com/">
<img src="images/ads/ubofiread.gif" border="1">														<br /> 
</a>

</div>

<div id = "txt">
<center>

<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >
Conflicting Forces is Currently in the process of being created, <b>Alpha Testing</b> will begin in a few months. Keep checking back often for updates.





</center>
</div>
<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >


<div id = "ftr"><I>Brought to you by Crikey Games</I></div>

</body>
</html>

calabiyau · July 23, 2007

don't know if it has anything to do with your problem but why do you link to the same style sheet in many different places throughout your page? once in the head section is enough.

in your a css defintion you have

a	{ background: yellow; color: black; font-size: 0.75em; font: "Pristina" cursive }

needs to be:

font-family: "Pristina" cursive

could be the source of the problem.

bronzemonkey · July 23, 2007

you need to replace "font" with "font-family". you also need to remove all the repetitions of your stylesheet that occur outside the head.

read some of the tutorials here:

http://www.w3schools.com/css/default.asp

MasterACE14 · July 24, 2007

ok, I have removed the linking without success, and have changed it to font-family without success, however their seems to be a link back to the css file in the div "txt" part of the source, I have checked every file, and I have only left the linking in index.php where all the pages in included on.

page source:

<html>
<head>
<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >
<meta name = "creator" 
	content = "ACE" >
<meta name = "keywords"
	content = "Online,MMORPG,game,fun,crazy,roleplay" >
<meta name = "description"
	content = "Conflicting Forces is a MMORPG" >
<meta http-equiv = "Content-Type"
	content = "text/html; charset = ISO-8859-1" >
<title>Conflicting Forces - Modern Combat - Online MMORPG</title>
</head>
<body>

<div id = "hdr">

<img src="images/conflicting_forces_header.png">

</div>


<div id = "nav">
Navigational Panel<br><br>
<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=progress">Progress</a>


</div>


<div id = "ads">

Supplemental Panel																					<br />

<a href="http://www.nitrozone.net/">
<img src="images/ads/nitrobutton.png">																<br />
</a>

<a href="http://www.ultimate-battle-online.com/">
<img src="images/ads/ubofiread.gif" border="1">														<br /> 
</a>


</div>

<div id = "txt">
<center>

<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >
Conflicting Forces is Currently in the process of being created, <b>Alpha Testing</b> will begin in a few months. Keep checking back often for updates.





</center>
</div>


<div id = "ftr"><I>Brought to you by Crikey Games</I></div>

</body>

</html>

MasterACE14 · July 24, 2007

I've fixed the linking in div "txt" but still the font isnt working.

here's the current page source:

<html>
<head>
<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >
<meta name = "creator" 
	content = "ACE" >
<meta name = "keywords"
	content = "Online,MMORPG,game,fun,crazy,roleplay" >
<meta name = "description"
	content = "Conflicting Forces is a MMORPG" >
<meta http-equiv = "Content-Type"
	content = "text/html; charset = ISO-8859-1" >
<title>Conflicting Forces - Modern Combat - Online MMORPG</title>
</head>
<body>

<div id = "hdr">

<img src="images/conflicting_forces_header.png">

</div>


<div id = "nav">
Navigational Panel<br><br>
<a href="index.php?page=home">Home</a><br>
<a href="index.php?page=progress">Progress</a>


</div>


<div id = "ads">

Supplemental Panel																					<br />

<a href="http://www.nitrozone.net/">
<img src="images/ads/nitrobutton.png">																<br />
</a>

<a href="http://www.ultimate-battle-online.com/">
<img src="images/ads/ubofiread.gif" border="1">														<br /> 
</a>


</div>



<div id = "txt">
<center>
Conflicting Forces is Currently in the process of being created, <b>Alpha Testing</b> will begin in a few months. Keep checking back often for updates.
</center>
</div>




<div id = "ftr"><I>Brought to you by Crikey Games</I></div>

</body>
</html>

heres my index.php which runs the show:

<html>
<head>
<link rel = "stylesheet" title = "CF Layout" type = "text/css" href = "css/page-layout.css" >
<?php

// Include's
include('variables.php');
echo $meta;
?>

<title><?=$gamename?> - Online MMORPG</title>
</head>
<body>
<?php
include('head.php');
?>
<?php
include('leftnav.php');
?>
<?php
include('rightnav.php');
?>

<?php
	switch ($_GET['page']) {
		default:
		case "home":
			require_once ("lib/home.php");
			break;
		case "progress":
			require_once ("lib/progress.php");
			break;
		case "page3":
			require_once ("lib/page3.php");
			break;
		case "page4":
			require_once ("lib/page4.php");
			break;
	}// end switch
?>



<?php
include('footer.php');
?>
</body>
</html>

ToonMariner · July 24, 2007

this line

font: "Pristina" cursive

try

font-family: "Pristina", cursive;

you shouldn't need the quotes around pristina - its only when a space is in the font name that it is required...

MasterACE14 · July 24, 2007

still not working ???

I've tried:

#nav href		{ background: yellow; color: black; font-size: 0.75em; font-family: Pristina, cursive }

:

#nav a		{ background: yellow; color: black; font-size: 0.75em; font-family: Pristina, cursive }

:

#nav href		{ background: yellow; color: black; font-size: 0.75em; font-family: "Pristina", cursive }

:

#nav a		{ background: yellow; color: black; font-size: 0.75em; font-family: "Pristina", cursive }

:

#nav href		{ background: yellow; color: black; font-size: 0.75em; font-family: Pristina, cursive; }

:

#nav a		{ background: yellow; color: black; font-size: 0.75em; font-family: Pristina, cursive; }

and a few other combinations with no success.

AndyB · July 24, 2007

http://www.w3schools.com/css/css_font.asp

What does "not working" mean? Is the font Pristina actually installed on the computer you're using for testing? You do realise that if it isn't on the target (visitors) computer it's going to use a default font, right?

MasterACE14 · July 25, 2007

I checked, I have Pristina on my computer, and I'm pretty sure it comes standard on windows. I tried setting the font-family: to Courier but that doesnt work either so I'm guessing its not the font as such, but an error else where.

ToonMariner · July 25, 2007

I suspect this is down to the cascade....

#nav a { background: yellow; color: black; font-size: 0.75em; font-family: Pristina, cursive; }

(the #nav href will never work - remember href is not a selector!!!!)

define all the elements that nav is in (don't know what they are called so I am just giving example)

div#wrapper div#nav a .....

try that or try putting this declaration right at the bottom of your css.

dbrimlow · July 25, 2007

It doesn't matter what font is on your computer - or anyone else's ... web pages use the browser's compatible fonts only.

But judging from the other tag markup level items you put in your css, I think you do indeed have issue in the css itself.

First, test your page here:

http://validator.w3.org/

THEN test your css here:

http://jigsaw.w3.org/css-validator/

AndyB · July 26, 2007

It doesn't matter what font is on your computer - or anyone else's ... web pages use the browser's compatible fonts only.

That's news to me. Care to provide a reference?

MasterACE14 · July 26, 2007

hmm, these validators gave interesting results, for the HTML validator I got a "cant find DOCTYPE" error.

and for the css validator I got "No style sheet found" error. even though it says their is no style sheet, all the sections of the page is working with the style sheet, except for the font.

I have #txt #nav #ftr #hdr #ads all in their correct position and pixels, but the validator says their is no stylesheet, and the font doesnt work so i dont know? ???

dbrimlow · July 26, 2007

That's news to me. Care to provide a reference?

DHO! LOL! Of course my statement is totally and unequivocally dead wrong! I don't know WHAT I was thinking (or actually not thinking) but was clearly talking through my ... um ... "hat". (thanks for not ripping me a new ... um ... "hat", Andy - although you must have been sore tempted)

Actually, what I probably meant was that if you use a Font that is NOT one of the standard "common" Win/Mac fonts - you should also specify a default family.

For example, here is one that showed me how important this concept was a while back:

h2 {font-family:"Gill Sans MT", Helvetica, sans-serif ; font-size:24px;}

I assumed that most people at least have MS Word (again, what was I thinking?) so "Gill Sans MT" would be safe and common.

But, strangely enough, when I got home and tested the page on a Windows 2000 PC at home - with Office 2000 installed, it wouldn't display Gill Sans MT and defaulted to Helvetica and THIS taught me the importance of always also specifying a "common" Win/Mac standard font.

Here is a link to the standard common Win?Mac fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.

hmm, these validators gave interesting results, for the HTML validator I got a "cant find DOCTYPE" error.

and for the css validator I got "No style sheet found" error. even though it says their is no style sheet, all the sections of the page is working with the style sheet, except for the font.

I have #txt #nav #ftr #hdr #ads all in their correct position and pixels, but the validator says their is no stylesheet, and the font doesnt work so i dont know? ???

We ALL should have caught this from the sample you posted.

Without a correct DOCTYPE your page falls into "quirks mode" and anything goes at that point - although IE will usually work as intended in quirks mode. If your page is also not working in IE and is quirks mode, then it has serious issues.

I copied the sample and and your css posted here. It is NOT proper css at all. But, once I finish editing what you intended you'll see.

dbrimlow · July 26, 2007

Okay. I corrected everything to make it work. You need to learn the basics. Here is the corrected page with css embedded - I'll explain what you did wrong immediately after:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conflicting Forces - Modern Combat - Online MMORPG</title>
<meta name = "creator" content = "ACE" >
<meta name = "keywords" content = "Online,MMORPG,game,fun,crazy,roleplay" >
<meta name = "description" content = "Conflicting Forces is a MMORPG" >
<meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1" >
<style type="text/css">
<!--
/* set margins, padding, and inline-level alignment */
body,div {color:#FFFFFF; margin: 1px; padding: 0; text-align: center; background-color:#000000;font-family:Verdana, Arial, Helvetica, sans-serif; font-size 100%}

/* set widths and float nav & ads div content boxes */
#nav	{ float: left; width: 20%	}
#ads	{ float: right; width: 20% }

/* set side txt margins 5px > nav & ads widths */
#txt	{ margin-left: 105px; margin-right: 105px }

/* ensure footer stays at the bottom */
#ftr	{ clear: both }

/* show boundaries and set image sizes - for clarity */
#hdr, #ftr, #nav, #ads, #txt	{ background-color:#000000}
#hdr {width: 520px; height: 148px}
#hdr h1{display:none;margin:0; padding:0}
/*#ads img		{ width: 120px; height: 500px	} */
#txt img		{ width: 150px; height: 200px	}

/* set link colors */

#ads href		{ color: #00FF00}

/* set left nav properties */

a:link, a:visited	{background-color: #FFFF00; color:#000000; font-size:.95em; font-family: "Pristina", Arial, Helvetica, sans-serif}  
a:hover, a:active	{background-color: #FFFF00; color: #FFFF00; font-size:.95em; font-family: "Pristina", Arial, Helvetica, sans-serif} 
ul {margin: 5px; padding-left: 0; list-style-type: none; }
-->
</style>
</head>
<body>

<div id="hdr">
<h1>Conflicting Forces - Modern Combat - Online MMORPG</h1>
</div>

<div id="nav">
<p>Navigational Panel</p>
<ul>
	<li><a href="index.php?page=home">Home</a></li>
	<li><a href="index.php?page=progress">Progress</a></li>
</ul>
</div>

<div id = "ads">
<p>Supplemental Panel</p>
<ul>
	<li><a href="http://www.nitrozone.net/"><img src="images/ads/nitrobutton.png"></a></li>
	<li><a href="http://www.ultimate-battle-online.com/"><img src="images/ads/ubofiread.gif" border="1"></a></li>
</ul>
</div>

<div id="txt">
  <p align="center">Conflicting Forces is Currently in the process of being created, 
  <strong>Alpha Testing</strong> will begin in a few months. Keep checking back often for updates.</p>
</div>

<div id="ftr"><p><em>Brought to you by Crikey Games</em></p></div>

</body>
</html>

First, and most important, I added an HTML 4.1 Transitional DOCTYPE. Doctype must go above the <html> tag.

CSS issues:

You used text colors - white, green, black, etc. You CAN use them, but it is better to use their actual code 6 digit hex code (starts always with the "hash" mark) #FFFFFF for "white", #000000 for "Black", etc.
I put your hdr image as a background image within the #hdr tag (instead of hard coded in the page markup
I created an h1 header tag for the #hdg that does not display. The text you put in this should be the same text on your #hdg image. but keep the text as short as poss. because it can affect the width and height of the #hdg div
there is no size designation of "1" or "2". You need to either use px, em or percent. So, margin:1; became margin:1px;
in the body tag you should designate the pages default font-family and font-size - I used 100% for size since the design is basically "liquid" - meaning it resizes left center and right columns proportionally depending on the window size. You can use em and % together.
I changed the #nav and #ads columns to 20% each and made the center column #txt 59%
since #hdr, #ftr, #nav, #ads, #txt all used a black background, I shorthanded them (separated by a comma) to use the one background-color:#000000 command.
I coded the a tag to include the four potential browser default states. It is best to ALWAYS do this to avoid issues later if you want to change a link style for a class or id. They must always, ALWAYS follow the proper order of a:link, a:visited then a:hover and a:active.
I put your links into lists. It makes the code cleaner and gives you so much more control over margins, padding, colors, etc.

Mark-up level correction:

Use block level tags to contain text and content! <p>, <ul><li>, <h1> - <h6>. All of your text was just hanging there, flappin' in the breeze, with no block level tags. At the least always use a paragraph tag.
The <b> for bold and <i> for italics should be changed to <strong> for bold and <em> for italics - for underline I create a css class .underline{text-decoration:underline} and the use <span class="underline">this text is underlined</span>
added the <h1> title of your page - it is not a good idea to leave divs empty if you can help it.

In a nutshell, the page didn't work because it was not any current version of HTML. The CSS was not present because it was so poorly coded it wasn't recognized as css. When using an external css page there should be NO text whatsoever that is not valid syntax for a css command (unless it is "commented out").

The best and easiest quick learn place to get the basics of css is at http://css.maxdesign.com.au/. I mean it! This will easily and quickly explain proper css syntax, rules, use.

Good luck.

Dave

dbrimlow · July 26, 2007

A few minor corrections to the page I posted. all images must have an

alt="something"

.

also, a better version of the link style:

a:link, a:visited	{color:#FFFF00; background-color:#000000 ;  font-size:.95em; font-family: "Pristina", Arial, Helvetica, sans-serif; text-decoration:none}  
a:hover, a:active	{background-color:#FFFF00 ; color:#000000 ; font-size:.95em; font-family: "Pristina", Arial, Helvetica, sans-serif; text-decoration:none}

I'm done.

Good luck.

Dave

MasterACE14 · July 26, 2007

Its working!!! Thanks Heaps everyone and especially Dave!!!

and also thanks for the link to the CSS tutorial, much appreciated

Regards ACE

Sign In

[SOLVED] a[href] not working...

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information