|
CSS - Css Problem With Link Styles
hi guys,
I'm sure this is an easy fix but it's driving my little non-technical mind nuts... I have an external style sheet for a site, and it appears to be linked correctly as altering it does affect the text in my site. HOWEVER, the elements I've included to keep web links displaying as normal text aren't working (visited, hover, active, etc etc) Please help. Code below. .main { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; link {text-decoration: none; visited {text-decoration: none; hover {text-decoration: none; active {text-decoration: none; } Similar TutorialsNewbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.) In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally. Right now I've got Code: .leftnavtext A:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext A:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: underline;
}
.leftnavtext A:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks. Hi, I am having trouble setting up different link styles in my site. My code is: Code:
.menu {
font-family: Helvetica;
font-size: 18px;
color: #FFFFFF;
}
a.menu:link {
color : #FFFFFF;
text-decoration : none;
}
a.menu:visited {
color : #FFFFFF;
text-decoration : none;
}
a.menu:hover {
color : #FFFFFF;
text-decoration : underline;
}
a:link {
color : #FFFFFF;
text-decoration : underline;
}
a:visited {
color : #FFFFFF;
text-decoration : underline;
}
a:hover {
color : #FFFFFF;
font-weight : bold;
text-decoration : underline;
}
From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class. So when I use the following code: <div class="menu"><I>01</I> <a href="">HOME</a></div> .. I would have thought the link would follow the style for .menu But it doesn't. It takes the style of the default links as well. How do I properly setup an alternate link style?? Hi all. I am in the process of re-coding some beautiful email templates that were pure CSS layouts into nasty HTML nested tables so our clients can still see our newsletter when viewing them in Web based email browsers like Yahoo, GMail, etc. (since these often strip out our CSS sections) Typically we would define our link styles in CSS using something like: PHP Code: a, a:link, a:visited { color: #BF28B2; text-decoration: none; font-weight: bold; } I just realized I am not sure how to represent the same style when using inline styles such as <span style='...'>text</span>. Just what can I do to modify the link styles using inline styles? Thanks I have 2 content areas. One with id sidebar2 and another with id maincontent. I want the links in these separate content areas to have different hover colors and possibly other characteristics. My problem is, the styles for sidebar2 are being overwritten by the styles in maincontent as it is below it in the style sheet (cascade). The hover of the words "Good Game" in this example is green which clashes with the background of the sidebars content. It should be a blue color. Why does a completely separate id overwrite the styling in a previous id? How can I improve this code to get the desired results. Line numbers eg (line 140) are just referencing where the code appears within the stylesheet and are not actually in the css sheet. HTML example: <div id="sidebar2"> <h1>Daily Content</h1> <ul> <li> <a href="(URL)">Good Game</a> </li></ul> </div> #sidebar2 li a:link, li a:visited (line 140) { text-decoration: none; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #336699; } #sidebar2 li a:active, li a:hover (line 148) { text-decoration: none; color: #2986aa; text-indent: 5px; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; } #mainContent a:link, li a:visited (line 157) { text-decoration: none; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #003366; } #mainContent li a:active, li a:hover (line 166) { text-decoration: none; color: #99cc66; text-indent: 5px; font-weight: bold; font-family: Arial,Helvetica,sans-serif; font-size: 12px; } Hi there, If i have a css class called td.header_menul how do i change the link colour for this class? I know how to change normal link colours but how do i change them to that specific one? Thanks! Does anyone know if there is a css property that applies to links that are linked to anchored tags on the page? Can there be a selector just for links that go to an anchor tag? I don't want to use a seperate class for only those links. thanks My link hover style isn't happening consistently in either browser. It seems to work better in FF than in IE7. Does anyone have a clue as to what I could look at to see what is causing this? All my navbar links behave just fine... URL removed Thanks! Hi there, Is it possible to have the same name for a link style to a text style? For example: a.small:link{.... and .small{... Many thanks! I am trying to use the following in my external style sheet for my links: Code: a:link, a:visited{
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.big {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.big:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.bigger {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
a.bigger:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
My problem is that I can't get big & bigger to work properly in Internet explorer. When I hover over the link it goes to its proper size but when not hovering it stays at 11px. I need to create signature files for (Outlook) for my group. Until 2 days ago I knew nothing about css but I am learning. Coz Outlook only picks up the body from an html file I cannot use external css sheets, so all coding must be done inline. Only thing I can't figure out is the style for a weblink. Here's s snip of the relevant line: <a href="http://www.blabla.com.au" style="font: bold 8pt arial,sans-serif"> <span style="color:#ef812a; font-decoration: underline">www.blabla.com.au</span></a> The code (probably shabby) renders fine in Dreamweaver, but the sig in Outlook the underline shows blue - I want the underline for any link (visited, not visited) to show as #ef812a which is sort of orange. I can't figure out how to insert the a:link etc stuff. Thanks James Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) Is it possible to set link styles that are defined inside of a heading tag... for example, h1 a:link{bleh} h1 a:visited{bleh} h1 a:hover{bleh} I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution Hey all, So i have two files my html file: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<a href="#">this is a test</a>
</body>
</html>
And my css file: Code:
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me? thanks! - legit Edit, whoops sorry, I had the wrong name for my css file I need some really rediculous link styles, like all of the cool fading/pixelating ones that work on IE - but I can't find any for Firefox. Does anyone know if they exist, or where to find them? I wrote a simple page using an external style sheet. It works fine on my home computer on both IE and NS but when I look at it from the server NS ignores the external link. Can someone please tell me what is going on. I used an embeded syle and that seemed to work but I would like it to work externally. JG Thanks for taking the time to read my question. I have a main container that has a sub container which holds another sub container. I would like them to grow as the most sub container grows. I have achieved this, but in Fire Fox the width grows as well, and I don't know how to fix that. You'll see what I mean if you scroll to the bottom of the page and look at the right hand side. Example: www.pierced.ca/pierced-reviewsWithCSS.htm Thanks for the help. Brad if you see on http://www.ipan.be/dev/index.php?page=about in FF it is nice but in IE it put borders around some links of my class inhoudstafel... Does anyone know a solution? hey just got a small problem i dont know hw to fix, take a look at my site http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Hi i am using to different styles to preview my links but i want when a link is being visited to return to his starting point.For example it is black and when is being visited i want it again when the second time the user come's to the page to see it black again.I tried a lot of methods but when i put the visited pseudo class it blocks and the the hover pseudo class is not working.Plz help ****the class that i have the problem is "boxes" Code: A:link {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:active {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:visited {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:hover {
COLOR: #ffffff; TEXT-DECORATION: none
}
TD {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
hr{
color: #96A097;
height: 0px;
width: 150px;
}
#title{
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
COLOR: #000000;
}
.mainbox{
FONT-SIZE: 10px; COLOR: #727C8E;
padding-top:5px;
padding-bottom:3px;
}
.boxes {
FONT-SIZE: 10px; COLOR: #000000;
padding-top:3px;
padding-left:3px;
padding-right:3px;
padding-bottom:3px;
}
.boxes a:link {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:active {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:hover {
FONT-SIZE: 10px; COLOR: #FFFFFF;
}
.boxes a:visited {
FONT-SIZE: 10px; COLOR: #000000;
Hi there, I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE. Any ideas what I have wrong? This is my CSS: PHP Code: #tools{ text-align:right; padding-right: 20px; } #add_business{ background-image: url('images/add_business.png'); height: 21px; width: 156px; float:right; text-align:center; padding-top: 4px; } #add_business a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:underline; } #add_business a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:none; } #com_tools{ text-align: right; margin-right: 200px; margin-top: 0px; float:right; } #menu ul .item{ display:none; list-style:none; list-style-image:none; } #menu ul:hover .item{ display:block; list-style:none; list-style-image:none; } #menu{position:absolute; list-style:none; list-style-image:none; } and this is my HTML: PHP Code: <div id="tools"> <div id="com_tools"> <div id="menu"> <ul id="item1"> <li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div> </div> <div id="add_business"><a href="#">Add Your Business!</a></div> </div> |
|||||||