|
CSS - Differnet Link Style
i want to have two seperate styles for links on my page - how can i do this. i am using dreamweaver.
i can only work out how to use one link style, i.e. the a:hover etc.. Similar Tutorialshello all. Got a prob, i have got a stylesheet with a load of divs on but one of them has the following structure Code:
#logodiv {
float: left;
margin-left: 20px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
The problem i am having is that i need this in the center of a LHS bar...however the above setting is correct for IE but not for MozFF and Netscape Is there anything i can do to fix this? If anyone has any ideas that would be really great, thanks in advanced RF p.s. here is the complete CSS if needed Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFDD;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#FFFFDD;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#FFFFDD; font: Georgia;}
a:visited {color:#FFFFDD; font: Georgia;}
a:hover {background-color:#A6AE62; font: Georgia;}
a.greenlink {
color:#A6AE62;
font-size:13px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.greenlink:link {color:#667138; font: Georgia;}
a.greenlink:visited {color:#A6AE62; font: Georgia;}
a.greenlink:hover {background-color:#A6AE62; color:#ffffdd; font: Georgia;}
#logodiv {
float: left;
margin-left: 20px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
height:137px;
background-color:#A6AE62;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
text-align: center;
padding:15px;
border: 0px solid #000000;
background-color:#ffffdd;
z-index:0;
}
#header {
height: 137px;
background-color: #A6AE62;
}
#Menu {
float: left;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A6AE62;
border-top:0px solid #A6AE62;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
#randomcontent {
margin:10px 62px 62px 200px;
padding:0px;
border: 1px solid #c0c0c0;
background-color:#FFFFDD;
}
#errormessages {
margin:10px 62px 0px 200px;
padding:10px;
border: 1px solid #c0c0c0;
background-color:#FFFFDD;
}
#adminMenu {
margin:14px 62px 0px 200px;
padding:10px;
border: 1px solid #c0c0c0;
background-color:#FFFFDD;
}
Thanks hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles. Code: <style type="text/css">
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;
width: 200px;
display:block;
}
a:visited
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:hover
{
text-decoration:none;
color:#000000;
width: 200px;
background: #A2D389;
display:block;
}
</style>
Any ideas? I know how to use the class etc but i can't get he link part right. Thanks I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? I have a webpage that has a Link tag that links to a style sheet Code: <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" /> </head> <body> Test 0.0.1 </body> </html> However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet Code: <html> <head> <style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style> </head> <body> Test 0.0.1 </body> </html> This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally. I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag. I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings. You can see an example of this here madaboutbrighton.net/test This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings. I am baffled. All ideas most welcome, or even just let me know if you are having the same problem. Cheers!!! I have one css file which is linked to all my html pages That css file defines a style for all my <a> tags ie - a:link, a:visited, a:hover etc. Theres one html file where i need a different style for some of the <a> tags ive set a sepecific class on these tags ie: <a class="set1" etc and in my css file ive tried the following .set1 a:link { etc } but for some reason this doesnt override the style on the generic a tags ie it seems to keep using a:link { } ignoring the .set1 a:link { etc } help! I have a menu where the submenu li's have a blue/darker blue background color and hover color. I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up Here's the part of my styles for the list that I'm trying to change.. Code:
/* original backgrounds for the menu */
ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
Is it the way I tried to rename the style? Code:
/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
background: #afe4bf;
color: #000;
padding-left: 20px;
}
.green ul.menu li ul li a:hover {
background: #88b796;
border-left: 5px #000 solid;
padding-left: 15px;
}
thanks in advance for any help, Kathy Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link? Thanks, HeadElf I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set; Code:
a {
color: #005D93;
text-decoration: none;
}
a:hover {
color: #990000;
text-decoration: underline;
}
#thumb {
position: relative;
float: left;
padding-left: 21px;
padding-bottom: 10px;
}
#thumb img {
width: 96px;
height: 145px;
}
#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}
#thumb img a:hover {
border-color: #990000;
}
An example image tag is as follow; Code: <div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div> With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated. Regards, JT Hello, My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all. I see this happenning with IE 6.x and FireFox 1.5 and netscape 7 Example HTML code where the unvisited link appears in Red and it should be in Grey: Code: <div class=medGray> <a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records). </div> Here's my snippet from my CSS file: Code:
a.medGray:link {
text-decoration: underline;
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }
this is what i got: a menuBox Code:
<tr align="center" valign="top" height="120">
<td height="120">
<div class="menuBox">
<div class="menuBoxHeader">Menu</div>
<p><a href="blah-blah4">4.</a></p>
<p><a href="blah-blah5">5.</a></p>
<br>
<p>some text>
</div>
</td>
</tr>
I use for the links Code: a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}
for the menuBox Code:
.menuBox { color: #c36;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 2px; font-family: Verdana;
background-color: #fef;
border: solid 1px #c36 }
and for the menuBoxHeader Code: .menuBoxHeader {
color: #efe;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 13px;
font-family: Verdana, Arial, Helvetica;
background: #c36 0px 0px;
margin: 1px 0px 0px;
position: relative;
top: 0px;
left: 0px;
width: 130px;
height: 16px }
So now my two questions. 1. What do I have to do to let it look in all the browsers the same? In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ). 2. The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right? I hope that someone can help me? When viewing my website, the font is too small in IE/Opera/Crazy Browser. I am a Firefox user and the site looks the way I want when viewed in Navigator & Firefox. I don't want to change that. I'm thinking that I can use java script to make a page link to a specific style sheet, based on the user's browser. Unfortunately, I'm not a scripter and I haven't managed to find one that suits my purpose. Is there a simpler way to accomplish this? Thanks Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Hi, I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line. I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other! My page code: <div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1> </div> My stylesheet code: #garden-designer-title { position:relative; left:0px; top:0px; padding: 0; margin: 0; width:526px; height:51px; z-index:7; } #garden-designer-title a { position:relative; font-size: 46px; font-family: verdana, arial, helvetica, sans-serif; color: #009999; font-weight: normal; text-decoration: none; } #garden-designer-title h1 a { display: inline; font-size: 29px; font-family: verdana, arial, helvetica, sans-serif; color: #9482A4; font-weight: normal; text-decoration: none; } Does anyone know what I'm doing wrong?! Many thanks! I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? |
|||||||