|
CSS - Define Differnt Link Properties To Differnt Text
http://localhost/donkeyshare/content.php?cID=portal
PHP Code: /* page properties */ .properties {background-color: #EEEEEE; margin: 0 px} /* table configuration */ .table1 {border: 1px solid #BBBBBB; color:#333333} .table2 {background-color: #DDDDDD; font-weight:bold; font-variant:small-caps; font-size:12px; font-family:verdana} .table3 {background-color: #EEEEEE; font-size:12px; font-family:"Courier New";} /* link configuration */ A:link {color: #333333; text-decoration:underline} A:visited {color: #333333; text-decoration:underline} A:active {color: #333333; text-decoration:underline} A:hover {color: #333333; text-decoration:overline} What do i do if i want to define differnt link properties to table 3, thats difernt then table 2. please take a look and tell me what you think. Similar TutorialsI have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? Guys I have the following issue regarding links and colours: The colours of links are set thus: a:link : White; a:hover : Blue; a:visited : White; The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...? hi guys, silly question i want to make a certain portion of my text smaller, but when i put a span like this around it: <span style="font-size: 10px;"> then only the plain text, and not the links, decrease in size... what should i add? thanks glog Here is another question. Is there an easy way to excluded images from displaying the link properties I've specified in the stylesheet? Basically on hover the links get a background color and underline. But I also have images that are link that I don't want to do that too. Here is the site. You can see what's happening on the images towards the bottom. Let me know if posting the code would be easier. Thanks. 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; } 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? I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) Hey guys, Me again =( Im having trouble with my CSS links. For my navigation I want the regular text and the links to be the same, but dont know how. When I enter text with a link next to it, it moves the link down. Here take a look: Link Hover over forums. You will see "Help Here" above "Please Login". Here is the CSS: Code: Code:
/*
---------------------------------------------------------------------------------------------
Guilds of WarCraft CSS TEMPLATE
Designed By: Donnerschlag
Version: 1.0 (7/20/05)
Description: Global CSS Styles for Guilds of WarCraft
URL: http://www.guildsofwarcraft.net
---------------------------------------------------------------------------------------------
*/
/****** Global CSS ********/
body {
background-image: url(images/background.png);
font: 10px Trebuchet MS, verdana, tahoma, arial;
color: #000;
margin:5px 0px; padding:0px;
text-align:center;
}
a:link,
a:visited,
a:active,
a:hover {
text-decoration: none;
color: #000;
}
.banner {
background-image: url(images/header-bground.png);
background-repeat: repeat-x;
width: 100%;
}
#container {
width:617px;
margin:0px auto;
text-align: left;
vertical-align: top;
padding:9px;
}
/****** Navigation ********/
#navigation {
position: relative;
margin: 15px 235px 22px 0;
padding: 0 0 0px 0;
height: 2.4em
}
#nav ul { width: 598px; }
#nav li {
margin: 0;
float: left;
display: block;
padding-right: 10px;
}
#nav li.off ul, #nav li.on ul {
display: none;
}
#nav li a {
background: #CFC9A9;
display: block;
line-height: 6px;
width: 8em;
border: 1px solid #8C867A;
padding: 5px;
font-size: 10px;
font-weight: bold;
color: #66737B;
}
#nav li.off ul, #nav li.on ul {
display: none;
position: absolute;
top: 1.5em;
line-height: 5px;
left: 0;
padding-top: 5px;
}
#nav li.on a {
background: #8C867A;
border: 0;
color: #FFF;
}
#nav li.on ul a, #nav li.off ul a {
border: 0;
}
#nav li.on ul {
display: block;
}
#nav li.on ul a, #nav li.off ul a {
float: left;
border: 0;
color: #FFF;
width: auto;
margin-right: 5px;
}
#nav li.on ul {
background: #8C867A;
display: block;
}
#nav li.on:hover ul {
background: #8C867A;
}
#nav li.on:hover a {
background: #8C867A;
color: #FFF;
}
#nav li.off:hover ul, #nav li.sfhover ul {
background: #8C867A;
display: block;
z-index: 6000;
}
#nav li.off:hover a, #nav li.sfhover a {
background: #8C867A;
color: #FFF;
}
#nav li.off ul a:hover, #nav li.on ul a:hover {
background: #8C867A;
color: #E2E6E7;
}
/****** Main Body ********/
#mainbody {
padding: 9px 9px 9px 9px;
border-style:solid;
border-color:black;
border-width:1px;
border-color: #000000;
background-color: #F8F4EB;
}
#news {
padding: 5px 5px 5px 5px;
background-color: #CFC9A9;
width: 579px;
}
/****** Copyright ********/
.copyright {color: #FFFFFF}
/****** Notice ******/
#notice {
padding:2px;
border-style:dashed;
border-color:black;
border-width:1px;
border-color: #000000;
background-color: #F1F6A3;
min-height: 32px;
}
and this is the nav PHP: Code:
PHP Code:
<div id="navigation" >
<ul id="nav">
<li class="on"><a href="#">General</a>
<ul>
<li><a href="index.php" title="Home" accesskey="h"><span class="access-key">H</span>ome</a></li>
<li><a href="" title="About Us" accesskey="a"><span class="access-key">A</span>bout Us</a></li>
<li><a href="" title="Guilds" accesskey="g"><span class="access-key">G</span>uilds</a></li>
<li><a href="" title="Downloads" accesskey="d"><span class="access-key">D</span>ownloads</a></li>
<li><a href="" title="Members" accesskey="m"><span class="access-key">M</span>embers</a></li>
<li><a href="" title="Search" accesskey="s"><span class="access-key">S</span>earch</a></li>
<li><a href="" title="FAQs" accesskey="f"><span class="access-key">F</span>AQs</a></li>
<li><a href="" title="Contact Us" accesskey="c"><span class="access-key">C</span>ontact Us</a></li>
</ul>
</li>
<li class="off"><a href="#">Forum</a>
<ul class="navtext">
<?php include("memberbar.php"); ?>
</ul>
</li>
<li class="off"><a href="#">Guild Masters</a>
<ul>
<li><a href="" title="Login">Login</a></li>
<li><a href="" title="Register">Register New Guild</a></li>
</ul>
</li>
</ul>
</div>
Memberbar.php: PHP Code: Code: <?
/**
* IPB SDK Code Snippet - Member Bar
* Copyright (C) 2003 Global Centre Scripting
* Designed for IPB SDK 1.0
*
* This Code Snippet displays a member bar.
*
* @author Cow <khlo@global-centre.com>
* @date 23/11/03
*/
// Load and Start IPB SDK
require_once "ipbsdk_class.inc.php";
$SDK =& new IPBSDK();
// =====================
// START MEMBERBAR
// =====================
if ($SDK->is_loggedin()) {
// We're logged in. Retrieve member info
$info = $SDK->get_info();
// Generate Bar Content
$member_name = $info['name'];
$extralinks = "";
if ($SDK->is_admin()) {
$extralinks .= '<li><a href="'.$SDK->board_url.'/admin.php">Admin CP</a></li>';
}
if ($SDK->is_supermod()) {
$extralinks .= '<li><a href="'.$SDK->board_url.'/index.php?act=modcp">Mod CP</a></li>';
}
// Display Member Bar
echo '<li>Logged in as '.$member_name.'</li>
'.$extralinks.'
<li><a href="'.$SDK->board_url.'/index.php?act=Login&CODE= 03">Log Out</a></li>';
}
else {
// Display the Guest Bar
echo '<li> Help Here<a href="'.$SDK->board_url.'/index.php?act=Login&CODE= 00">Please Login</a><a href="'.$SDK->board_url.'/index.php?act=Reg&CODE=00 ">or Register</a></li>';
}
// =====================
// END OF MEMBERBAR
// =====================
?>
HI guys, I am working on This website . On the left hand navigation menu I would like anywhere in the li to be a link but at the moment only the text is a link. See below html/css Code: <div class="sideMenu">
<ul>
<li><a href="index.html">Welcome</a></li>
<li><a href="home page/about.html">About SEDDA</a></li>
<li><a href="home page/location.html">Locations</a></li>
<li><a href="home page/contact.html">Contact</a></li>
</ul>
</div>
Code:
.sideMenu ul {
margin-left: 0px;
margin-top: 4px;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.sideMenu li {
list-style-type: none;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 0px;
font-size: 14px;
font-weight: normal;
margin-right: 0px;
background-color: #004054;
white-space: normal;
padding-top: 6px;
padding-bottom: 6px;
padding-right: 0px;
padding-left: 0px;
}
.sideMenu li:hover {
background-color: #CCCCCC;
}
.sideMenu a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 0px;
z-index: 10;
white-space: normal;
width: 100%;
}
.sideMenu a:hover {
margin: 0px;
padding: 0px;
color: #FFFFFF;
white-space: normal;
}
Unless I'm mistaken I 've used the same method successfully before without problem. Can anybody tell me what the problem is please. Thanks James 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! Hello, i am new to css and i am trying to create text links on an image file using css and html my problem is i can create one text link using the css and html code i am about to post. but i need to have 4 or 5 text links on this picture example would be Text Link Text Link Text Link Text Link Text Link here is the css i am using Code:
.imagecontainer {
position:relative;
float:right;
}
.imagecontainer a {
position:absolute;
top:200px;
left:235px;
color:#FFFFFF;
font-weight: bold;
}
here is the html code Code: <div class="imagecontainer"> <img alt="" src="http://durin78.squarespace.com/storage/BLUE_TILE_ROUNDED_CORNERS-2.png" /> <a href="http://durin78.squarespace.com/blogs/category/ranting-and-raving/">Your Saint For Suicide</a> </div> How do I get rid of the blue text and underline ?? Here is my style sheet #page_content { margin-left: 200px; } #container { position: relative; width: 100%; } #background { width: 100%; position: absolute; z-index: -1; top: 0; left: 0; background-color: #000000; } #testbox{ width: 100%; height:100%; position: relative; } #menu li{ display: inline; text-transform: uppercase; font-size: 1.1em; line-height: 1.0em; font-weight: bold; padding: 0 10px 0 10px; color: #FFFFFF; text-decoration: none; } #data{ width: 190px; height: 200px; margin: 20px; position: absolute; bottom: 150px; color: #FFFFFF; font-size:1.3em; } Im looking to make it so when someone rolls over a img i have linked it makes the text (which is also a link) next to it act like it has been rolled over as well. Basically its a list set up like this. Code: <dt><a href="#"><img src="blah"/></a></dt> <dd><a href="#">Text link here</a></dd> I've seen it done a few ways, but none of them work really for my setup. The ones I've seen set up the IMG as a background positioned. Anyone have an answer? i have this error where the links that i put in a padded border the go out of the border i want them to stay in it i need help making it stay in there i did alot to make it work Code: <html>
<head>
<style type="text/css">
<!--
.margcolo{border:medium double gold; width:100px; height:150px;}
.small{font-size:14;}
.pad{padding:65px 10px 65px 10px;background-color:yellow;}
--></style>
</head>
<body class="margcolo">
<p class="pad"><a
href="file:///C:/Documents%20and%20Settings/COMPUTER/Desktop/Example1.html">Example</a></
p>
<p class="small"><a
href="file:///C:/Documents%20and%20Settings/Comp directory/Desktop/Fcrsdhomework.html">Fcrsd
site</a></p>
</body>
</html>
http://shsc.bdigia.com/index1.html http://shsc.bdigia.com/cau1.css As you can see, the link text needs to be repositioned. Margin nor padding work well because it creates unwanted spaces between the background images. Can anyone help me? Going to the far below link and clicking on the top link "projects" of that page brings up a menu with three links. Clicking on one of those links, 'Built' for example, brings up another submenu and at the same time it highlights "Built" as orange. Clicking on "Unbuilt" or "In Progress" has the same effect. What I'm now needing to happen is if say you click on "Block" under the "Built" menu and it goes to the "Block" page I have "projects" and "Block" highlighted as orange but I'm not sure how to have "Built" continually highlighted as orange but when either "Unbuilt" or "In Progress" is clicked on the link "Built" goes to grey and the menu item clicked on turns to orange - as I currently have it. Seems what I need is an CSS class/ID OnLoad for just "Built" (per this example) to where when going to the "Block" page the link "Built" is orange in the beginning but when the other links are clicked on it turns to grey. Would anyone have advice on how to achieve this? This doesn't work in Safari btw: http://www.royseeagleton.com/new/ Thanks!, Wesley Let say you have this: <a href="#"> <img src="some.gif" alt=""> Some text </a> I want to have underline for the text on hover, but not for image. How do I do that for the above A IMG text? I want both the IMG and text within the A tag. Would appreciate a solution that worked in at least: IE, FF, OP, NE, Safari For me it is working in IE and OP but not in the gecko browsers.... FF, NE Regards Issue resolved using forum search. Thanks for having such great resources - I just had to search for a while. I have a page I'm working on, and while my right column appears correctly in IE (for a change) in FF the right column gets pushed out just a little bit too far. How do I define, in css, that if the browser is FF to use a certain style, but if not to use my default setting? Thanks! |
|||||||