PDA

View Full Version : very easy link style question

eyteen
05-17-2006, 07:17 PM
hi!

i'm new to the forums, and guess what i have a question!

ok i have this code:

<html>
<head>

<STYLE>
A {text-decoration: none; font-weight : bold; font-family : arial;}
A:active{color: #000000; background: #ffffff; text-decoration : none; font-weight : bold; font-family : arial;}
A:hover{color: #000000;background: #FFFFFF;text-decoration : none; font-weight : bold; font-family : arial;}
</STYLE>

</HEAD>

<body bgcolor="black" leftmargin="10" topmargin="10" marginwidth="0" marginheight="0" scrolling="no" text="#ffffff" link="#ffffff" vlink="#ffffff" alink="#FFFFFF">

<a href="link1.html" target="main"><b>link 1</b></a>
&nbsp&nbsp
<a href="link2.html" target="main"><b>link 2</b></a>
&nbsp&nbsp
<a href="link3.html" target="main"><b>link 3</b></a>

</tr>
</td>
</table>
</html>



there are two problems:

1) the visited links are not highlighted in firefox (they are ok w/ explorer)

2) i want to have "link 1" highlighted when this page has first been opened (as if it has been clicked on, before anything is clicked yet)

thanks for the help guys!

stefanie
VIPStephan
05-17-2006, 07:31 PM
At first delete those bgcolor="black" leftmargin="10" topmargin="10" marginwidth="0" marginheight="0" scrolling="no" text="#ffffff" link="#ffffff" vlink="#ffffff" alink="#FFFFFF" and style everything with CSS:


body {
background-color: #000;
margin: 10px 0 0 10px;
color: #FFF;
}

For the links there is a special order: link, visited, hover, active. If you do it differently it won't show the proper results.

a {
text-decoration: none;
font-weight : bold;
font-family : arial;
color: #FFF;
}
a:visited {...}
a:active, a:hover{
color: #000000;
background: #FFFFFF;
text-decoration: none;
font-weight : bold;
font-family: arial;
}


If you want the first link highlighted then you should add an ID to the anchor and refer to it in the CSS. E.g.:

<!-- HTML -->
<a href="#" id="link1" target="main">link 1</a>

/* CSS */

#link1 {...}



And you should always specify an alternative font if the user doesn't have it on his machine:
a {font-family: Arial, "Times New Roman", Sans-serif;}
eyteen
05-18-2006, 07:13 PM
hi stefan,

ok i'm not being lazy, i tried with the a:visited code, but couldn't get it to work. could you please just copy paste all the stuff you pointed out above together for me ?

thanks so much

stefanie
VIPStephan
05-18-2006, 07:54 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<STYLE>
body {color: #FFF;}
a {
text-decoration: none;
font-weight: bold;
font-family: Arial, Helvetica, Sans-serif;
}
a:visited, #current {color: #FFF;}
a:hover, a:active {
color: #000;
background: #FFF;
text-decoration: none;
font-weight: bold;
font-family : Arial, Helvetica, Sans-serif;
}

/* if you want the links placed horizontally do it like this: */
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline;
margin: 0 3px;
}
</STYLE>
</HEAD>

<body>
<ul>
<li><a href="link1.html" id="current" target="main">link 1</a></li>
<li><a href="link2.html" target="main">link 2</a></li>
<li><a href="link3.html" target="main">link 3</a></li>
</ul>
</body>
</html>



Always use a doctype in the beginning of your document (marked red here)
Always specify fallback (alternative) fonts if the user doesn't have the primary font installed (marked blue here)
Never use tables for layout - see Why tables for layout is stupid (http://www.hotdesign.com/seybold/)
Put links in lists instead of table cell
I deleted <b> tags around link text, use CSS font-weight property (you did it already so WTF?)
eyteen
05-18-2006, 10:02 PM
when i do a direct copy & paste, the active still doesnt light up in firefox...

ive made some adjustments and amendments.

i had to change the "color" in body {color: #FFF;} to "background" for it to display correctly, and add a few more colorings so the link colors aren't the default blue.

the biggest problem remains with the link 1's default color ie (#current). it shows up correctly, but always remains as such. ideally i'm looking for it to change once any other link has been highlighted.

it's like a bunch of radio buttons lets say. i'm just saying that 'link 1' is highlighted by default on startup, but once a user chooses another on, its back to usual rules defined. how to do this, i don't know....

also, i can't quite get the spacing right. i want link 1 to start with a 0 margin on the left, but have more space between the links (without putting in "&nbsp")

it has to do with some setting for the below, but when i change to 30px for example the spacing is good now, but then link 1 slides to the right also...
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline;
margin: 0 30px;
}



but so far so good, a big improvement, and i'm playing around with it.

stefanie
VIPStephan
05-18-2006, 10:56 PM
when i do a direct copy & paste, the active still doesnt light up in firefox...
It actually does, but Firefox considers a link only active as long as you hold the mouse button down. And now the hover and active states are the same color so you don't see a difference.

add a few more colorings so the link colors aren't the default blue.
Well, I didn't know what colors you have or wanna have so I just guessed.
the biggest problem remains with the link 1's default color ie (#current). it shows up correctly, but always remains as such. ideally i'm looking for it to change once any other link has been highlighted.
Ok, I supposed when you click on a link the pages would change and on the second page you'd have for example the second link set to "#current". I guess you'd have to use JavaScript fot that special case.

About the spacing: You are right, it has something to do with the margin: 0 30px;. Again, I could only guess since you didn't provide any more code. The way it is set now it says: "Add zero margin to the top and bottom and 30px margin to the left and right." If you wanna set it differently for every side you write four values. It's counted clockwise: top, right, bottom, left. So you would write margin: 0 30px 0 0; That means zero for top margin, 30px for right margin, zero for bottom margin and zero for left margin. This way the first link will stick to the left edge and won't move.
eyteen
05-18-2006, 11:22 PM
thanks for the tips on the margin setting.

no, im using a target frame for the links. what i mean regarding problem with firefox is that the last clicked link does not remain highlighted as it does in explorer. it hovers correctly, firefox opens the link, but then instead of remaining as the hover color settings, it goes back to normal unhovered link but as if it was selected with the mouse (a dashed border like thing i notice)

does firefox not have this feature or are we doing something wrong in the code ?
VIPStephan
05-21-2006, 04:12 PM
Firefox does have this feature. Read my last post (the first explanation) where I explain what happens. You can test this if you set for example background color to red on a:active (just for this example, cause you can't see this since the :hover and :active pseudo classes have the same color/font weight now). In IE it stays active but in Firefox it is only active as long as you click on it and hold the mouse button down. But usually you can assume that Firefox is correct and IE is wrong. You'll have to live with it.