Greetings,
I am a CSS newbie. Is there a way to swap text using CSS, i.e. when you mouse over some original text, the text changes. I figured out how to change the color of text using hover. Thanks for your help!!CSS === Presentation => No (There are things like generated content that IE does not support, but application of it is different)Ok, maybe I'm not asking the right question. What can I use to allow me to swap text?Depends on what kind of effect you are trying to achieve... You can use javascript, or there are ways to use CSS to make it look like the text is swapped.At this point I would like to emphasize Vladdy's point by providing a link to this (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">http://www.meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->).Can someone tell me why it wont work for me?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS All THE WAY!!!</title>
<style>
body {background-color: #660000;
color: #FFFFFF;
font-size: small;
font-family: verdana;
padding: 25px 50px;
}
.navbox {background-color: #333333;
font-family: verdana;
width: 475px;
height: 35px;
border: 1px solid white;
padding: 6px 70px;
position: absolute; top: 25; right: 50px;
z-index: 1;
}
a {color: #FFFFFF; text-decoration: none;}
a:hover {color: #999999;}
.girl {position: absolute; top: 110px; right: 50px; z-index: 2;}
.frame {position: absolute; top: 110px; z-index: 3; border: 1px solid black;}
.bview {font-size: 12px; font-style: italic; position: absolute; bottom: 5px;}
.navbox a span {display: none;}
.navbox a:hover span {display: block;
position: absolute; top: 180px; left: 10; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #FFFFFF; background: white;
font: 10px Verdana, sans-serif; text-align: center;}
</style>
</head>
<body>
<div class="navbox" align="right"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1<span>This is the is totally CSS</span></a> | <a href="#" target="content">Link 2</a> | <a href="#" target="content">Link 3</a> | <a href="#" target="content">Link 4</a></div>
<!--<IFRAME SRC=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" name="content" height="300" width="300" class="frame" allowtransparency="yes" frameborder="0">Your Browser Does Not Support Frames</IFRAME>-->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/girl.gif" border="0" class="girl">
<hr color="#FFFFFF" width="100%" size="1" align="center" noshade style="position: absolute; bottom: 20px"><br>
<div class="bview">Best Viewed in 600 X 800</div>
</body>
</html>I'm just guessing but parhaps it's because you have links (which are inline) and a span inside them (which is a block level element).
Try changing your links to display:block; and then if and when you get the code working I and probably Vladdy will push you towards using a list for those links. (You can still line the links up by setting float:left to them and using clear:both on their containing element.)Sweet ThanksSo I take it that it worked then.
Happy to help.
Originally posted by lavalamp
I'm just guessing but parhaps it's because you have links (which are inline) and a span inside them (which is a block level element).
Span is block level now? Did I miss that memo?He made it block level by doing this:.navbox a:hover span {display: block;
I am a CSS newbie. Is there a way to swap text using CSS, i.e. when you mouse over some original text, the text changes. I figured out how to change the color of text using hover. Thanks for your help!!CSS === Presentation => No (There are things like generated content that IE does not support, but application of it is different)Ok, maybe I'm not asking the right question. What can I use to allow me to swap text?Depends on what kind of effect you are trying to achieve... You can use javascript, or there are ways to use CSS to make it look like the text is swapped.At this point I would like to emphasize Vladdy's point by providing a link to this (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">http://www.meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->).Can someone tell me why it wont work for me?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS All THE WAY!!!</title>
<style>
body {background-color: #660000;
color: #FFFFFF;
font-size: small;
font-family: verdana;
padding: 25px 50px;
}
.navbox {background-color: #333333;
font-family: verdana;
width: 475px;
height: 35px;
border: 1px solid white;
padding: 6px 70px;
position: absolute; top: 25; right: 50px;
z-index: 1;
}
a {color: #FFFFFF; text-decoration: none;}
a:hover {color: #999999;}
.girl {position: absolute; top: 110px; right: 50px; z-index: 2;}
.frame {position: absolute; top: 110px; z-index: 3; border: 1px solid black;}
.bview {font-size: 12px; font-style: italic; position: absolute; bottom: 5px;}
.navbox a span {display: none;}
.navbox a:hover span {display: block;
position: absolute; top: 180px; left: 10; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #FFFFFF; background: white;
font: 10px Verdana, sans-serif; text-align: center;}
</style>
</head>
<body>
<div class="navbox" align="right"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1<span>This is the is totally CSS</span></a> | <a href="#" target="content">Link 2</a> | <a href="#" target="content">Link 3</a> | <a href="#" target="content">Link 4</a></div>
<!--<IFRAME SRC=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" name="content" height="300" width="300" class="frame" allowtransparency="yes" frameborder="0">Your Browser Does Not Support Frames</IFRAME>-->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/girl.gif" border="0" class="girl">
<hr color="#FFFFFF" width="100%" size="1" align="center" noshade style="position: absolute; bottom: 20px"><br>
<div class="bview">Best Viewed in 600 X 800</div>
</body>
</html>I'm just guessing but parhaps it's because you have links (which are inline) and a span inside them (which is a block level element).
Try changing your links to display:block; and then if and when you get the code working I and probably Vladdy will push you towards using a list for those links. (You can still line the links up by setting float:left to them and using clear:both on their containing element.)Sweet ThanksSo I take it that it worked then.
Happy to help.
Originally posted by lavalamp I'm just guessing but parhaps it's because you have links (which are inline) and a span inside them (which is a block level element).
Span is block level now? Did I miss that memo?He made it block level by doing this:.navbox a:hover span {display: block;