|
CSS - Css Link Question
You're probably not going to fully understand what I'm asking, because I can't describe things well, but just try. Okay?
I've seen websites that have the navigation on the left side in a panel. And when you click a link on there, the page loads in the bigger panel on the right. But, the whole page doesn't reload (in other words only the big right panel reloads). I'm pretty sure they use CSS for that, not frames. Because when I look at the code on those certain pages, I can see that they use style sheets. Are you still following? My question to you is, how do you target the link to shoot into that panel??? I can't figure it out. Maybe you can. Feel free to ask any questions. Later, a fellow geek (and proud of it!) ~Sam~ Marvelgirl@ameritech.net http://www.x-mencharacters.com Similar TutorialsI have one link on a web page that I want the default colors to appear on. How do I turn off A:link, A:visited, A:active, & A:hover styles for one single link? I want all the other links to remain as they are presently set with CSS. Also, I want the font attribute(s) to remain set for the link in question. Thanks, Thad I want to create a schema for different colored links. I'm stumped because I am pretty sure my syntax is correct, but it's not working correctly. I have created a class called "add" but my links in add are still showing up as the default. A portion of my css: Code:
a.add:link{
color: #FFFFFF;
text-decoration: none;
}
a.add:visited {
color: #0000FF;
}
a.add:hover {
color: white;
text-decoration: underline;
}
My link using "add": Code:
<a class="add" onclick="window.open('add_tnosc_password.jsp', 'window_one');" style="cursor:hand">Add</a>
Hey all, I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here! Notes: I'm a bit of a css beginner and I'm using Wordpress on my site. I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website). Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post. So how can I style the link without creating a link class?? Appreciate anyone's thoughts on this, Cheers! Hello, I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page... ------------------------ A:LINK {font-family: Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; font-size:12pt; font-weight:bold;} ----------------------- but how can i make it so each class has a differnt a:link, a:visited, ect. 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? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. Hi I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css". Code: <!--[if IE]> <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css"> <![endif]--> <LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css"> Just tested and it doesn't work... it only calls "menu.css" Tried it with "if IE7" and "if IE6" with no avail. -------------- IE Style: Code: #menu * {margin:0;}
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px}
All Others Style: Code: #menu * {padding: 0;margin:0}
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px}
Anyone know how this is done? I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different. How do i reference the sublinks? I did this which has no effect. <a href='".$mypath."' id='catsub2'>"; //these settings override it still. #blanksideboxContent.sideBoxContent a{ color: #000000; font-size:1em; font-family:verdana; font-weight:bold; text-decoration: none; border:2px outset #000000; background-color:#5ec82a; width:125px; display :block; margin-left:2%; } #catsub2 a{ width:80px; } hi everyone, im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers. what its suppossed to look like is: a:link.2{ color: white; text-decoration: none; font-weight: bold; } a:visited.2{ color:white; text-decoration: none; font-weight: bold; } a:hover.2{ color: #85ADC0; text-decoration: none font-weight: bold; } a:active.2{ color:white; text-decoration: none; font-weight: bold; } sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a> any help is greatly appreciated! thanks... 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? is there a way to style a <ul><li>nav link</li></ul> so that each item in the list has a dashed bottom border? from this: <ul> <li>nav item 1 link</li> <li>nav item 2 link</li> <li>nav item 3 link</li> </ul> to this: nav item 1 ---------- nav item 2 ---------- nav item 3 ---------- Can you use a stylesheet to effectively disable the link, so that you can't click on it; that it will appear simply as text? Thanks Hello all I need help please :-) I have a website I am making that will have various boxes and each box has to have a different link color and hover over color. My issue is that teh css does not work in terms of making all the links display the correct color as outlined in the css file. here is my css file maybe someone can tell me what is wrong (I will comment in the file also whats not working Code:
<style type="text/css">
body {
background-image: url(./images/pgbg.gif);
color: #000000;
/*the below link attributes does not work */
visited: color:#000000; text-decoration: none;
link: color:#000000; text-decoration: none;
focus: color:#000000; text-decoration: none;
active: color:#000000; text-decoration: none;
hover: color: #CC0000;
}
.header{
background-image: url(./images/header.png);
background-color:#E6E6E6;
position:absolute;
width: 900px;
height: 100px;
left: 50px;
top: 5px;
}
.navbox1{
/*General Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 115px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.navbox2{
/*Users Links Navbox*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 310px;
padding-left: 5px;
/*the below link attributes does not work */
visited: color:#E6E6E6; text-decoration: none;
link: color:#E6E6E6; text-decoration: none;
focus: color:#E6E6E6; text-decoration: none;
active: color:#E6E6E6; text-decoration: none;
hover: color: #CC0000;
}
.loginbox{
/*Login Box*/
background-image: url(./images/navbg.png);
position:absolute;
background-color:#E6E6E6;
width: 170px;
left: 60px;
top: 400px;
padding-left: 5px;
}
.content{
background-color:#E6E6E6;
position:absolute;
width: 700px;
height: 455px;
left: 250px;
top: 115px;
padding-left: 10px
}
.footer{
position:absolute;
width: 700px;
left: 100px;
top: 585px;
color: #D6E7D3;
}
</style>
Hello, Why does some link moved when I hover over a link? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {font:normal 8pt Verdana, Arial, Helvetica, sans-serif}
ul li {display: inline;margin:0 5pt}
a {text-decoration:none;color:#333}
a:hover {color:#000;font:bold 8pt Verdana, Arial, Helvetica, sans-serif}
#content {margin:0 0 0 30pt;border:1px solid #333;width:550pt;height:350pt}
p {padding:15pt 0 0 10pt;margin:0}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="default.asp">[Home]</a></li>
<li><a href="about_me.asp">[About Me]</a></li>
<li><a href="blog.asp">[Blog]</a></li>
<li><a href="gallery.asp">[Gallery]</a></li>
<li><a href="contact.asp">[Contact]</a></li>
</ul>
</div>
<div id="content">
<p>Content</p>
</div>
</body>
</html>
Hi, Im having problems with a link. when I click on the link a grey dotted border appears around the element, and remains there until i click somewhere else on the page (the link is actually a JS onclick event) Any ideas? Xaphan edit: tried the :active and :focus pseudo-classes, but to no avail. Newbie 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. |
|||||||