|
CSS - Hover + Empty Link Click
Hi,
I have a pure css menu that uses hover, Kravitz told me it wont work in touchscreens which I searched for and is so, thanks Kravitz. Also one told me to keep the hover and add a class to make it posible to click on li if hover does not work. Problem, cant test this as I dont have any touchscreen. So 1. is there a way to add a code to disable the hover affect? 2, maybe a website where you can test but using mouse.... 3. Dont remember, its validates but are there anything against using <a href="#">? Thanks, Helen Similar Tutorialshttp://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? drlinklove.com/drew/index4.html Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options. Anyone have a guess to how I can make it more stable? Check it out: http://www.wdoucette.com/awards/ Look at the part that looks like this: - link 1 - link 2 You can hover over the empy space after "link 1" and it clicks "link 1"! If I put a space before the "<br>" code after the link, the problem goes away. Know what causes it? (BTW, this is a site I'm creating for my father. It is unfinished.) Hello, The hover link looks good on IE7 and FF but not on IE6 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">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code: Code: #print_category {
position: absolute;
left: 35%;
top: 30%;
font-size: 13px;
text-align: left;
line-height: 2 ;
margin-right: 5em;
}
Properties I want to apply: A:link {color: #000099; text-decoration: underline; } A:visited {color: #000099; text-decoration: none; } A:hover {color: #000099; text-decoration: none; } A:active {color: #000099; text-decoration: none; } How can this be done, Ive tried but to no avail: - A#print_category:active {color: #000099; text-decoration: none; } Thanks! For some odd reason, the link in one of my DIVS is inaccessible. It's styled as a link, so I know it's being recognized, but mouse-over does nothing, and it won't respond to a click. I've tried to bring the DIV to the front via z-index, but no help. The pile of code is below, but the DIV I'm needing help with is "frontcontentbox". You can see an example at www . deepwaterchurch / next Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link href="css/universal.css" rel="stylesheet" type="text/css" />
<link href="css/jflow.css" rel="stylesheet" type="text/css" />
<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.flow.1.2.auto.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "462px",
height: "289px",
auto:true,
});
});
</script>
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
username: "deepwaterchurch",
join_text: "auto",
avatar_size: 0,
count: 5,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
});
</script>
<link href="tweet/jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
<div id="navtabs">
<ul id ="nav">
<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
<li class="faq"><a href="faq">FAQ</a></li>
<li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation-->
<div id="wrap">
<div id="controller" class="hidden">
<span class="jFlowControl">Current Series</span>
<span class="jFlowControl">We're Social</span>
<span class="jFlowControl">Compassion</span>
</div>
<div id="prevNext" class="hidden">
<img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
<img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
</div>
<div id="slides">
<div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
<div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" border="0"></a></div>
<div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
</div>
</div>
<div id="overlay" style="z-index:3; position:relative; top:80px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:absolute; top:110px; left:390px; z-index:5;"><img src="images/tagline.png" alt="Deep Water exists to help people become passionate followers of Jesus Christ" /></div>
<div id="front page content" style="position:relative; top:120px; padding-bottom:140px; padding-right:20px;">
<!--start twitter block-->
<div class="tweet_bird" style="position:relative; top:20px; left:140px; z-index:6;"><a href="http://twitter.com/deepwaterchurch"><img src="images/whatstweetin.png" border="0"></a></div>
<div class="tweet" style="position:relative; left:50px; top:12px; width:380px; padding-bottom:50px;"></div>
<!--end twitter block-->
<!--start theloop block-->
<div id="the loop" style="position:relative; left:50px; width:380px; top:20px; padding-bottom:20px;">
<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
<div id="mc_embed_signup">
<form action="http://deepwaterchurch.us1.list-manage.com/subscribe/post?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background:url(images/blackboardtexture.jpg);color: #ffffff;text-align: left;">
<div align="center"><a href="../theloop"><img src="images/theloop_front.png" border="0" /></a></div>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
If you're not receiving <em>the loop</em> newsletter, then you're... out of the loop. Check out <a href="../theloop">the archives</a> or sign up below.<br /> <br />
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address: </label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;color: #b51b00;"></div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background:#;color: #73bd2b;"></div>
</div>
<div id="counter chicklet" style="float:right; padding-right:40px; padding-bottom:20px;">
<script type="text/javascript" src="http://deepwaterchurch.us1.list-manage.com/subscriber-count?b=7&u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77"></script></div>
<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="width: auto;display: block;margin: 1em 0 1em 5%;">
</div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
</div>
<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[3]='NAME';ftypes[3]='text';fnames[1]='PHONE';ftypes[1]='phone';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[2]='SMALLGROUP';ftypes[2]='dropdown';var err_style = '';
try{
err_style = mc_custom_error_style;
} catch(e){
err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: fff5ee none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: 9C1801;';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready( function($) {
var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} };
var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
options = { url: 'http://deepwaterchurch.us1.list-manage1.com/subscribe/post-json?u=e6c98debd5802cfe5d135bc4d&id=1b9e118a77&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
beforeSubmit: function(){
mce_jQuery('#mce_tmp_error_msg').remove();
mce_jQuery('.datefield','#mc_embed_signup').each(
function(){
var txt = 'filled';
var fields = new Array();
var i = 0;
mce_jQuery(':text', this).each(
function(){
fields[i] = this;
i++;
});
mce_jQuery(':hidden', this).each(
function(){
if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
this.value = '';
} else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
this.value = '';
} else {
this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
});
function mce_success_cb(resp){
mce_jQuery('#mce-success-response').hide();
mce_jQuery('#mce-error-response').hide();
if (resp.result=="success"){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
mce_jQuery('#mc-embedded-subscribe-form').each(function(){
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ',2);
if (parts[1]==undefined){
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]){
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch(e){
index = -1;
msg = resp.msg;
}
try{
if (index== -1){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';
var input_id = '#mc_embed_signup';
var f = mce_jQuery(input_id);
if (ftypes[index]=='address'){
input_id = '#mce-'+fnames[index]+'-addr1';
f = mce_jQuery(input_id).parent().parent().get(0);
} else if (ftypes[index]=='date'){
input_id = '#mce-'+fnames[index]+'-month';
f = mce_jQuery(input_id).parent().parent().get(0);
} else {
input_id = '#mce-'+fnames[index];
f = mce_jQuery().parent(input_id).get(0);
}
if (f){
mce_jQuery(f).append(html);
mce_jQuery(input_id).focus();
} else {
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
}
}
} catch(e){
mce_jQuery('#mce-'+resp.result+'-response').show();
mce_jQuery('#mce-'+resp.result+'-response').html(msg);
}
}
}
</script>
<!--End mc_embed_signup-->
</div><!--end the loop block-->
<!--start social icons-->
<div style="position:relative; top:20px; left:50px; width:380px; background-color:#333333; padding-top:20px; padding-bottom:20px;">facebook link place holder</div>
<!--end social icons-->
<!--start right column-->
<div style="position:absolute; top:81px; left:480px; width:300px;">
<div id="frontcontentbox">
<img src="images/wherewemeetfront.jpg" alt="Where We Meet" />
<p>Deep Water meets Sunday mornings at 10:30 in the Empire Theatres at Park Lane, on the corner of Spring Garden Road and Dresden Row. <a href="wherewemeet">Get more details</a>.</p>
</div>
</div><!--end right column-->
</div><!--end front page content-->
</div><!--end content div-->
<div id="bottom"></div><!--end bottom-->
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->
</body>
</html>
I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is: Quote: .leftblock a{display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #21536A; text-decoration:none; background-color:#CCCCFF; } Quote: .leftblock a:hover{border-top: 1px solid #cccccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none; } I added display:block to the a:hover class as well to try that to no avail. http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks. Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it? I tried setting it as a background image, but it only fills the background of the text. Thanks! I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html However, I wish to have MY OWN font style on each links as it can be seen on: The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact. Code: <li><a title="link six" href="index.html">link six</a></li> <li><a title="link five" href="index.html">link five</a></li> <li><a title="link four" href="index.html">link four</a></li> <li><a title="link three" href="index.html">link three</a></li> <li><a title="link two" href="index.html">link two</a></li> <li><a title="link one" href="index.html">link one</a></li> My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ??? I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website. My CSS code so far is: Code: /* CSS Document */
body
{
background-color:black;
background-attachment:fixed;
}
/* .................................... HEADER & FOOTER ................................... */
#header
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
width:100%;
}
#header a
{
color:yellow;
text-decoration:none;
}
#header a:hover
{
text-decoration:underline;
}
#footer
{
font-family:Georgia, "Times New Roman", Times, serif;
color:white;
text-align:center;
border-top:3px solid fuchsia;
float:left;
background-color:black;
width:100%;
}
#footer a
{
color:yellow;
text-decoration:none;
}
#footer a:hover
{
text-decoration:underline;
}
/* ........................................ BANNER ........................................ */
#banner
{
width:100%;
border:none;
text-align:center;
background-color:none;
}
/* ......................................... TOP MENU .................................... */
#topMenu
{
width:100%;
float:right;
border:none;
}
#topMenu ul
{
float:left;
margin-left:4%;
}
#topMenu ul li
{
display:inline;
width:20%;
}
/* ................................... CONTENT ................................................ */
#leftContent
{
float:left;
width:10%;
border:1px solid red;
background-color:green;
}
#centerContent
{
background-color:white;
width:75%;
margin-left:1%;
float:left;
border:1px solid green;
}
#centerContent ul
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
list-style-type:decimal;
color:black;
}
#centerContent li
{
margin:3% 3%;
line-height:1.5em;
}
#rightContent
{
float:right;
background-color:fuchsia;
border:1px solid red;
width:10%;
}
/* ................................... STYLES ......................................... */
p.first-letter:first-letter
{
color:red;
margin-left:5%;
font-size:xx-large;
}
p
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
line-height:1.5em;
margin:2% 3%;
color:black;
}
h4
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:x-large;
color:green;
}
h5
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
font-size:medium;
margin:2% 3%;
color:blue;
}
h6
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
margin:0;
font-size:medium;
font-weight:normal;
color:red;
}
.italic
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-style:italic;
}
.bold
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:black;
font-weight:bold;
}
.colorTextRed
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:red;
}
.colorTextBlue
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:blue;
}
.colorTextGreen
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:justify;
color:green;
}
/* ................................... TABLE ......................................... */
#contactTable
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
}
#contactTable tr
{
border:none;
}
#contactTable th
{
color:fuchsia;
}
#contactTable td
{
font-size:medium;
color:black;
}
/* ................................... CLASSES ......................................... */
.table
{
background-color:white;
border-spacing:2%;
margin:3% 3%;
font-family:Georgia, "Times New Roman", Times, serif;
border-collapse:collapse;
text-align:left;
}
.tr
{
border:none;
}
.td
{
border:thin solid red;
font-size:medium;
padding:2px;
text-align:center;
color:black;
}
Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background. Heres the CSS: Code:
.link_hover1{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:visited{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:hover{
background-image: url("images/link_img_01b.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
td.link_hover1:active{
background-image: url("images/link_img_01a.jpg");
background-repeat: repeat-n;
cursor: pointer;
width: 170px;
height: 44px;
}
I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem. I have the following code, but the CSS file that I have already defines link and hover to be something else Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link? Thanks for the help Code: div#hdr_ctr { width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}
div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}
div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}
* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }
div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}
I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail: Code: div.headleft {
text-align: right;
width: 100%;
}
div.headleft a:link {
display: none;
}
div.headleft a:visited {
display: none;
}
div.headleft a:hover {
display: block;
background: inherit;
color: #ff0000;
}
div.headleft a:active {
display: none;
}
I have tried a few variations to the above snippet of code and am at my wits end... My gratitude ahead of time... Hello I would like to make a hover effect when my mouse is over a link, as shown in my attachment. What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed). Anyone can help me with this? Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries. I've set up two divs side by side using "float:left;". In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned. The problem only happens in FF not in IE. I have copied the relative code below that is causing the problem. Code:
#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>
I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem. Thanks This is the new site I'm working on: http://animalemergencybloomington.com/Index2.html Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.) Right now I have this in the <head> css Code: Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style> <style type="text/css"> and this for the <body>: <body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF"> adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover. I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo. I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover. Help? Thanks, Ez I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot. I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail. Here is the HTML I am using for this particular container: <div id="fivels"> <div id="classone"> <a class="home" href="#">Home</a> <a class="gallery" href="#">Gallery</a> <a class="about" href="#">About</a> <a class="help" href="#">Help</a> <a class="partner" href="#">Partner</a> </div> </div> And here is my CSS: #fivels { margin-left: auto; margin-right: auto; height: 150px; width: 800px; background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */ } #classone { margin-left: auto; margin-right: auto; width: 800px; text-align: center; } #classone a:link { color: white; text-decoration: none; background-color: black; filter: alpha(opacity=20); } #classone a:visited { color: white; text-decoration: none; background color: black; filter: alpha(opacity=20); } #classone a:hover { color: white; text-decoration: none; background-color: white; filter: alpha(opacity=20); } .home { padding: 3.2em; } .gallery { padding: 3.2em; } .about { padding: 3.2em; } .help { padding: 3.2em; } .partner { padding: 3.2em; } Also, on a side note, is using the padding attribute the most efficient way of seperating the links? I have a block that im trying to change the colour of when a user moves their mouse over it, but it isnt a link. At the moment its a div and the css for the block is simply: .postbitleft { background-color: #0B198C; } (aside from the size attributions which are already defined. What do i need to add to that CSS for it to change colour when someone hovers over it? Can i actually use CSS for that or will i have to use javascript? Regards, James Hi, I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ? Here is the code I have now. <a href="javascript:undefined" id="imageLinkId">GMNA</a> <script language="javascript"> if( ... ) { document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); } else { document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); } </script> Thanks |
|||||||