CSS change background image (href)

by **maz00** on Wed Sep 23, 2009 1:12 am

Hi,

I have a box with a background image that changes on mouse over. How do I position a text in the box? Please see the code below,

<style>
#someid a {
display: block;
height: 73px; width: 288px;
background: url(/images/image-off.png) no-repeat;
text-decoration: none;
color: #fff;
font-size: 11px;
font-weight: bold;
font-weight:normal;
}

#someid a:hover {
background: url(/images/image-on.png) no-repeat;
color: #000;
}
</style>
<body>
<p id="someid">
<a href="test">This is a test to see how this works. This is a test to see how this works.</a>
</p>

I like to maybe display 50 characters of the text some place in the a href box (30px left and right)? Can anyone help me out?

Thanks
Maz

by **harrierdh** on Thu Dec 17, 2009 7:27 pm

This is not exactly what you want, but it describes the technique.

http://24ways.org/2005/centered-tabs-with-css

sample

http://24ways.org/examples/centered-tabs-with-css/final.html

by **jonweb2009** on Sun Dec 27, 2009 5:42 pm

you can try adding a div tag inside a tag

<a href="test"><div style="padding: 10px 30px 0 30px; " >This is a test to see how this works. This is a test to see how this works. This is a test to see how this works. </div></a>

CSS change background image (href)

CSS change background image (href)

Re: CSS change background image (href)

Re: CSS change background image (href)

Who is online