-
I think I still need help with anchors. Here's what I have in my stylesheet:
Code:
a:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
a:close {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
I added the 'close' anchor, hoping it would match my other links. Then, I have this in the doc:
<div id="img1" class="hide"><img src="gs013.jpg"/><a onclick="hideModal('img1');" class="close">Close Window</a></div>
I'm still getting a small hover on the 'close window' text. Clearly, my talent lies elsewhere...but I really want to understand this and this is my only stumbling block right now.
-
OK - here's how you target the link with a "close" class (using your example);
Code:
a.close:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
You can separate multiple selectors with a comma to apply the same CSS to each;
Code:
a.link, a.close:link {font-family: sans-serif; color: #41502c; font-size: 12px;}
a:visited, a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a:hover, a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a:active, a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
Hope that helps
-
I added option one code, as option two code changed all my link font sizes and colors to huge and weird (what?!), but option one doesn't seem to work either. I know you have probably spent more time on this than you care to, but would you please look at my source code for:
http://www.katiebuglove.com/Tutorial...urtaintut.html
and tell me if you see anything from preventing the 'close window' text from displaying correctly? I even cleared my browser cache twice....
Additionally, this is what I have added to my stylesheet for open new window:
Code:
div.close {width:100%; height:100%; display:block; position:absolute;}
and
Code:
.show { position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; margin:0; text-align:center; color:#000; background:rgb(255,204,204); background:rgba(255,204,204,.75);) }
.show img { max-width:100%; max-height:100%; position:absolute; margin:0; top:45%; left:50%;
-webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%)
}
.hide { display:none }
-
My mistake on the close link CSS - it should look like this (no :link needed);
Code:
a.close {font-family: sans-serif; color: #41502c; font-size: 12px;}
a.close:visited {font-family: sans-serif; color: #c94b74; font-size: 12px;}
a.close:hover {font-family: sans-serif; color: #8f0d37; font-size: 12px;}
a.close:active {font-family: sans-serif; color: #3f5a22; font-size: 12px;}
Also, I'm not sure why you have this line - it isn't being applied to anything so you can take it out;
Code:
div.close {width:100%; height:100%; display:block; position:absolute;}
-
Done and done!
Thank you for all your help, I appreciate it so much. Now go do something fun, unless this is fun for you, then, just keep on doing this....
