CSS and hyperlinks 1

[TheCandyman]

I have a page in which i would like different css styled links. One standard for all links and a different one for my menu, but I have missed something, as the menu shows as a standard link. Any ideas from the following?


CSS

#menu a:link    { color: #4284B0; background-color: inherit; text-decoration: none;}
#menu a:visited { color: #4284B0; background-color: inherit; text-decoration: none;}
#menu a:hover   { color: #ffc423; background-color: inherit; }		   
a:link, a:visited { color: #4284B0; background-color: inherit; text-decoration: none; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}
a:hover { color: #ffc423; background-color: inherit; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}

html

<a href="index.asp" class="menu">Home</a>
<a href="About_Us.asp" class="menu">About Us</span></a>

 

[monksnake]

You are referencing menu in your CSS as if it were an ID of an object. munu is a class, therefore replace all instances of

#menu

with

.menu

The . signifies a class name.
The # signifies an object ID.






<.

 

[feherke]

Hi

Group the bare [tt]a[/tt] styles at the beginning and the [tt]#menu a[/tt] styles after them.

Feherke.

http://rootshell.be/~feherke/

 

[Rieekan]

Based on the code you've provided, you don't have a Menu class for anchor tags, but do have an ID named menu that has all of the styles for anchor tags within that block. Based on the CSS, you should have HTML that looks like the following:

<div id="menu">
  <a href="index.asp">Home</a>
  <a href="About_Us.asp">About Us</a>
</div>

Now, if the HTML was supposed to be the correct part, then your CSS should change to something like the following:

a.menu:link    { color: #4284B0; background-color: inherit; text-decoration: none;}
a.menu:visited { color: #4284B0; background-color: inherit; text-decoration: none;}
a.menu:hover   { color: #ffc423; background-color: inherit; }           
a:link, a:visited { color: #4284B0; background-color: inherit; text-decoration: none; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}
a:hover { color: #ffc423; background-color: inherit; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}

It might be a good idea to run through the tutorials on CSS selectors again to brush up.

 

[feherke]

Hi

Uh. Late and wrong. I should go home now.

Feherke.

http://rootshell.be/~feherke/

 

[monksnake]

Uh. Late and wrong. I should go home now.

You can't be doing so bad, you're Tip Master of the Week. Congrats on that.

<.

 

[TheCandyman]

Good suggestions by all, I tried each and I can't get it to work, so it's must be a Noob issue because i just can't see the issue. here is the site i'm creating

http://www.azdaservices.com

See the issue? Because i sure dont

 

[monksnake]

Call me crazy, but it looks like it works to me. The only thing I think you need is a background image in the <li> of a picture of the tabs, so it doesn't flicker as much.



<.

 

[monksnake]

I do see a problem though. Remove the <span> from between the anchor tags.

Depending on what browser you are using, you may not inherit the colors from the anchor tags into the spans.

		<ul id="menu">		
			<li><a href="index.asp" class="menu">[s]<span>[/s]Home[s]</span>[/s]</a></li>
			<li><a href="About_Us.asp" class="menu">[s]<span>[/s]About Us[s]</span>[/s]</a></li>
			
			<li><a href="Contact_Us.asp" class="menu">[s]<span>[/s]Contact Us[s]</span>[/s]</a></li>	
			<li><a href="Doing_Business.asp" class="menu">[s]<span>[/s]Doing Business With AzDA[s]</span>[/s]</a></li>		
		</ul>

<.

 

[TheCandyman]

In IE7 and FF the bottom of the tabs at the top right have the dotted line on them. That is where i want it to not do the dotted line.

I havn't seen the flicked on the tabs, how would you suggest i do the background image in the <li>?

 

[TheCandyman]

I removed the span from the first two, you can see the issue

 

[monksnake]

Can you post your CSS here. I tried to look at it, but it wasn't allowing me to.

If I can get a look at the CSS, I can see what's going on.

<.

 

[TheCandyman]

For you, no problem

/* top elements */
* { padding: 0; margin: 0; }

body {
	margin: 0;
	padding: 0;
	font: .70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
	color: #666666; 
	background: #A9BAC3 url(../images/bg.gif) repeat-x;
	text-align: center;
}

/* links */ 
a.menu:link    { color: #4284B0; background-color: inherit; text-decoration: none;}
a.menu:visited { color: #4284B0; background-color: inherit; text-decoration: none;}
a.menu:hover   { color: #ffc423; background-color: inherit; }           
a:link, a:visited { color: #4284B0; background-color: inherit; text-decoration: none; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}
a:hover { color: #ffc423; background-color: inherit; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}		   
		   


/* headers */
h1, h2, h3 { font: bold 1em 'Trebuchet MS', Arial, Sans-serif; color: #333;	}
h1 { font-size: 1.5em; color: #6297BC; } 
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; }
p, h1, h2, h3 { margin: 10px 15px; }
ul, ol { margin: 10px 30px; padding: 0 15px; color: #4284B0; }
ul span, ol span { color: #666666; }

/* images */
img { border: 2px solid #CCC;}
img.no-border { border: none;}
img.float-right { margin: 5px 0px 5px 15px;}
img.float-left { margin: 5px 15px 5px 0px;}
a img { border: 2px solid #568EB6;}
a:hover img { border: 2px solid #CCC !important; /* IE fix*/
  			  border: 2px solid #568EB6;}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #4284B0; 
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px;
 	padding: 0 0 0 20px;  	
  	background: #FAFAFA;
	border: 1px solid #f2f2f2; 
	border-left: 4px solid #4284B0;   
	color: #4284B0;
	font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; 
}

/* form elements */
form {
	margin:10px; padding: 0;
	border: 1px solid #b3b3b3; 
	background-color: #eeeded; 
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 2px;
	border:1px solid #b3b3b3;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea { 
	padding:2px; 
	font: 1em Verdana, sans-serif; 
	border:solid 1px #eee; 
	display:block; 
	color:#4f7f96; 
	width: 600px; }
input.button { 
	margin: 0; 
	font: bold 1em Arial, Sans-serif; 
	border: 1px solid #CCC;
	background: #FFF; 
	padding: 2px 3px; 
	color: #4284B0;	
}

/* search form */
form.searchform {
	background: transparent;
	border: none;
	margin: 0; padding: 0;
}
form.searchform input.textbox { 
	margin: 0; 
	width: 120px;
	border: 1px solid #4f7f96; 
	background: #FFF;
	color: #333; 
	height: 14px;
	vertical-align: top;
}
form.searchform input.button { 
	margin: 0; 
	padding: 2px 3px; 
	font: bold 12px Arial, Sans-serif; 
	background: #FAFAFA;
	border: 1px solid #CCC;
	color: #4284B0;	
	width: 60px;
	vertical-align: top;
}

/***********************
	  LAYOUT
************************/
#wrap {
	background: #FFF;
	width: 820px; height: 100%;
	margin: 0 auto;	
	text-align: left;
}
#content-wrap {
	clear: both;
	margin: 0; padding: 0;	
	background: #FFF;
}

/* header */
#header {
	position: relative;
	height: 85px;	
	background: #000 url(../images/headerbg.gif) repeat-x 0% 100%;	
}
#header h1#logo {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 2.6em Arial, Sans-serif;
	letter-spacing: -2px;
	text-transform: lowercase;
	top: 0; left: 5px;	
}
#header h2#slogan {
	position: absolute;	 
	top:20px; left: 20px;
	color: #666666;
	text-indent: 0px;
	font: bold 11px Tahoma, Arial, Sans-serif;
	text-transform: none;	
}
#header form.searchform {
	position: absolute;
	top: 0; right: -12px;	
}

/* main */
#main {
	float: left;
	margin-left: 15px;
	padding: 0;
	width: 50%;		
}

#main_100 {
	float: left;
	margin-left: 15px;
	margin-right: 15px;
	padding: 0;
	width: 100%;		
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 15px 0 15px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(../images/clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(../images/comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(../images/page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
	float: left;
	width: 23%;
	margin: 0;	padding: 0; 
	display: inline;		
}
#sidebar ul.sidemenu {
	list-style:none;
	margin:10px 0 10px 15px;
	padding:0;		
}
#sidebar ul.sidemenu li {
	margin-bottom:5px;
	border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
	display:block;
	font-weight:bold;
	color: #333;	
	text-decoration:none;	
	padding:2px 5px 2px 10px;
	background: #f2f2f2;
	border-left:4px solid #CCC;	
	
	min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
	padding:2px 5px 2px 10px;
	background: #f2f2f2;
	color: #4f7f96;
	border-left:4px solid #ffc423;
}

/* rightbar */
#rightbar {
	float: right;
	width: 23%;
	padding: 0; margin:0;		
}

/* Footer */
#footer { 
	clear: both; 
	color: #FFF; 
	background: #A9BAC3; 
	border-top: 5px solid #568EB6;
	margin: 0; padding: 0; 
	height: 50px;	  
	font-size: 95%;		
}
#footer a { 
	text-decoration: none; 
	font-weight: bold;	
	color: #FFF;
}
#footer .footer-left{
	float: left;
	width: 75%;
}
#footer .footer-right{
	float: right;
	width: 30%;
}

/* menu tabs */
#header ul {
	z-index: 999999;
	position: absolute;
    margin:0; padding: 0;
    list-style:none;
	right: 0; 
	bottom: 6px !important; bottom: 5px;
	font: bold 10px Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;	
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(../images/tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(../images/tabright.gif) no-repeat right top;
   padding:6px 12px 3px 5px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}

#header a:hover span { color:#FFF;}
#header a:hover {background-position:0% -42px; }
#header a:hover span {background-position:100% -42px; }
#header #current a {background-position:0% -42px; color: #FFF; }
#header #current a span {background-position:100% -42px;color: #FFF; }


/* alignment classes */
.float-left  { float: left; }
.float-right {	float: right; }
.align-left  {	text-align: left; }
.align-right {	text-align: right; }

/* additional classes */
.clear 	{clear: both; }
.green 	{color: #4f7f96; }
.gray  	{color: #BFBFBF; }
.red  	{color: #f2421a; }
.blue  	{color: #4f7f96; }
.black  {color: #000000; }
.font10 {font: bold 10px Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;}
.font12 {font: bold 12px Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;}
.font14 {font: bold 14px Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;}
.font16 {font: bold 16px Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;}
.font18 {font: bold 18px Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;}

 

[monksnake]

Ok, I'll take a look.

<.

 

[monksnake]

Ok, after looking at it for a while, looks like you will need the <span> in there afterall, cause of the way you have 2 BG images.

Since the span has display:block on it, and the main background pic of the tab is on the span, you will not be able to use a dashed line to go right under the text, unless the text is at the very bottom of the tab.

An option is to give the text-decoration:underline in the span and remove the dashed border from the anchor.

That would be done with the following CSS declarations:

#header a {
   float:left;
   background: url(../images/tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
   [!]border:0px;[/!]  /* Or you can remove the border from above, which is the way I'd do it */
}
#header a span {
   [!]text-decoration:underline;[/!]
   float:left;
   display:block;
   background: url(../images/tabright.gif) no-repeat right top;
   padding:6px 12px 3px 5px;
   color: #FFF;
}

With this setup, you will have white font on the tabs, when you hover over the tabs, they will turn from blue to gold, and there will be a line under each word in the tab.







<.

 

[TheCandyman]

That was it:

 border:0px;

I knew it was something small, those always take time to find. Do you still see flicker on the tabs?

 

[monksnake]

I do, but since I see you do the background shift method on the hovers, you should be ok. The reason I see flicker is cause this computer I use is a complete piece of $h!t (p2 350 mHz). I know on a faster computer, it doesn't flicker, so I wouldn't worry about that.

Thanks for the *.

<.

 

[TheCandyman]

LOL

I kept trying different browsers to see if i could remake the problem you were talking about. Didn't think about hardware speed. A 350MHz? you serious? I'm on a 3gig with 2gig ram with scsi hdd and I dont think of my comp as new LOL. I'll need to keep the computer speed mind i guess, only really thought of bandwith when creating websites.

 

[monksnake]

350 mHz, my work computer. My boss is too stupid to realize he is losing money with me on this computer since I constantly have to wait for stuff.

<.

 

[ChrisHunt]

Sorry, coming in late on this one.

Here's the bit of CSS that controls the look of your links:

[red]#menu a:link    { color: #4284B0; background-color: inherit; text-decoration: none;}
#menu a:visited { color: #4284B0; background-color: inherit; text-decoration: none;}
#menu a:hover   { color: #ffc423; background-color: inherit; }[/red]           
a:link, a:visited { color: #4284B0; background-color: inherit; text-decoration: none; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}
a:hover { color: #ffc423; background-color: inherit; border-width: 0px 0px 1px 0px; border-style: none none DASHED none;}

The first three rules (in red) apply to <a> elements within another element with [tt]id="menu"[/tt]. The other three apply to all <a> elements, including the ones in the menu.

But from what you say in this thread, that isn't what you want. You want all links to have the same colours and not be underlined, and for links outside the menu to have a dotted bottom border. Here's a more succinct way of doing it:

a:link, a:visited {
   color: #4284B0;
   background-color: inherit;
   text-decoration: none;
   border-width: 0 0 1px;
   border-style: dashed;
}

a:hover {
   color: #ffc423;
}

#menu a:link, #menu a:visited {
   border: 0;
}

By not repeating all the rules that apply to each element and just allowing them to cascade, you keep your markup lean, clean and easier to maintain.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd