CSS - Css Text Effects

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.

Hey,

I have a problem with IE and my CSS.

I have a table with a background-image and I wan that to change to a certain color on rollover.

div.special {background-image: url(../images/pinkfade_bg.gif);}
div.special:hover {
background:#F8F8F8;
}
div.normal {
background:#FFFFFF;
}
div.normal:hover {
background:#F8F8F8;
}

Now this works fine in Mozilla, Safari etc. Just not IE

Any ideas?

Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing.
I have two different rollover effects on my page but only one part is working.
The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file
Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help

here is my site: chrisziebarth dot com/test
My css file is located in /style.css

Hi - i have forgotten how to assign different link "effects" to different links, so if someone could remind me i would be extreeeeemely greatfull !!!

Cheers

Jackson

I need to put tables in my website that I am designing but thought about using css instead. The tables I wanted were similar in design to these ones :http://www.visionman.com in the middle of the page (about 300px down) but I wanted them to change color when the mouse pointer goes over them also. I would appreciate someone showing me how to do this please.

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!

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.)

i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text.

I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway.

I want to know how to use CSS on just a little text.

For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time.

As another example, I want to render the following two lines

Johnny G. Doe
123 West South Street

in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>.

I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it.

I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know.

Thanks.

--Johnny

Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution.

Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word?

Thanks.