Mobile Friendly Website

CSSPLAY

Doing it with style

image replacement COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

shi:-
thx Stu... works fine...
(05.10.2005, 13:30)

Jo-an:-
@Stu: To fix the 'ability to click' I did the same just put the <em> in the <a>, why not use a span since we use background-images

One problem though, text lurking when enlarging the font-size? any ideas to stop it. When having link text that spans two lines, the text jumps under the background-image, could a z-index perhaps fix this issue?

Also adding margin:0 to the h3.ir prevents any moving of the h3 when eg enlarging font-size.
(14.11.2005, 14:42)

Stu:-
Jo-an, if you look at the text in yellow on my demo page (and my examples) you will find that the answer is to make the image have enough surrounding 'white space' to cover any text resize.
(14.11.2005, 19:41)

Jo-an:-
@Stu: got it! I add enough pixels to bottom and righthand side of my background-images.
(14.11.2005, 22:16)

Stu:-
Jo-an, as easy as that ;o)
(14.11.2005, 22:23)

Jo-an:-
#contentLinks h3 {
position:relative;
width:214px;
height:37px;
padding:0;
overflow:hidden;
margin:0;
font-size:0.99em;
}
#contentLinks h3 em
{
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color: #7399BF; background-repeat: no-repeat;
background-position: top left;
}


Using width:100% and height:100% for em worked too, solved an issue in IE for a sliding nav
(16.11.2005, 01:34)

Stu:-
Jo-an, the only problem I can see with this is that the overflow hidden will cause the h3 text to be hidden when css is on, images are off and the text is resized larger.
(16.11.2005, 08:22)

Jo:-
@ Stu Nicholls:

Wouldn't it be great if we tried the same thing for image rollovers: hide the text under the <a href=""><em></em></a>

Problem: background on <a>s ?
(02.01.2006, 13:31)

Jo:-
Happy New Year! Stu!

your method uses position:relative for the parent element so for <a>s that is better than position:absolute
(02.01.2006, 13:45)

stuart jackson:-
stuart have problems his name e mail cant through by friends e mail from stuart jackson
(29.03.2006, 13:15)

10 of 35 comments (part 2). [ « ] [ » ] [ * ]



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page