I need help adding text to the Image CSS

aside from that, how’s the code look to you, good?

This is what I see now. Is this your intended layout?

Put the code into here: I see something different.
http://htmledit.squarefree.com/

Why does yours look different than mine?

Because I don’t have that font on my computer and you’ve provided no way for me to access it, so my browser shows the text in my default font.

You don’t have: Times New Roman?

 .topmiddle{
    position: absolute;
    top:  63px;
    left: 165px;
    font-family:'Times New Roman';
    font-weight: bold;
   font-size:24px;
color:#01FF70;

Yes, I have Times New Roman. I don’t have the fancy font in your text over the image (the area which appears different to yours).

Some of the text colours are not showing, because they are not coded correctly. e.g. color:01FF70;.

I saw that and fixed it.
#01FF70;

But the way I have it set up looks fine?

Did you find and fix the other instance where your code was missing a #?

The code looks OK. There is probably a better way to do it with fewer divs, but if you’re happy with the result, it’s fine.

Some important points to think about, though.

Anybody who doesn’t have AR DELANEY on their system will not see the fancy font you have chosen, and will instead see whatever their system has set as the default. You have no control over this. Either serve the font as a web font, if it’s available with a suitable licence, or set a fallback font of similar proportions (the whole point of using font families).

Your text colour and your background image are very similar. This could cause real difficulties for anybody with poor vision. If you’re building a site for public use - especially an online store - you don’t want to exclude potential customers by making your site unusable for them. Try this handy tool: http://webaim.org/resources/contrastchecker/

Some of your choices of class name could be improved. hr3 doesn’t tell us anything about the element it applies to. .topleft, .topright and .topmiddle may seem like a good idea now, but what if you give the site an overhaul in a year’s time and want to reposition things? A class of .topmiddle will be very confusing if you’ve now moved that text to the bottom right. Choose class names which are not based on appearance, and which will make it easier to find and edit rules for an item at a later date. .stock, .price, .shipping, perhaps.

3 Likes

I’m using this for mainly screenshot images to post. On like fb, twitter, pinterest, etc, etc.

There’s no brighten setting.

What if you want a neon color.

Try Googling for neon hex colours, or something similar, and find a reference. Or use a colour picker tool to get the colour from an image. Or just experiment.

https://www.google.co.uk/search?q=neon+hex+colours&safe=active&client=ubuntu&hs=UDv&channel=fs&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwjT85zzv4rSAhULLcAKHd1IDxwQsAQIMw&biw=1280&bih=800

1 Like

If you only want to create images, wouldn’t it be easier to learn how to use Photoshop, GIMP or something similar which is designed for creating images?

1 Like

I like a challenge, you never know when this will come in handy, and it doesn’t hurt to learn something.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.