How to insert text in the button?

[Truman]

I follow the book Step-by-step HTML5 and I think I did everything properly but still I can't figure out why there is no text in the button.

This is the first sequence that I wrote: <a href="index.htm"><img src="button.jpg" style="border:none"></a>

There is no text here which is illogical to me but I only follow the book.

What should I do? Please help.

[dsonesuk]

What text did you expect to see? Index.htm? As used for anchor href attribute, the only text that would be seen with current html is the text that would be shown on the image itself.

[Truman]

According to this book I can put text to the button. I'd like to know how to do that. In this example it should be ''Home''.

[dsonesuk]

Using anchor with image, the text will only show if it is in image, or you make anchor position: relative; and set height/width the same size as image and with image use position: absolute; top:0; left: 0; and add text 'Home'Normally you would use anchor on its own with text 'Home' with display block; setting height and width, THEN use image as bacground-image using css.EditOR you could be referring input type image where you use image as background of button add use value="home" to add text to input button.

Edited July 17, 2015 by dsonesuk

[COBOLdinosaur]

If you actually need that button instead of just styling the link to look like a button an you want to inject text into it then put the link and a span containing the text inside a common wrapper with position relative, an give the link and span position:absolute;top:0;left;zero;

 

I don't know what "book" you are referring to, but the code as written is not going to do anything but display the buttin as an image link.

[Truman]

I'm a bit confused to be honest. Can you just give me an example starting from tags that I wrote in the first text? I have a button image ( button.htm ) and a link to some index.htm page. How should I input text ''Home''.

[dsonesuk]

button.htm is not a image media type, it is a webpage extension.

[Ingolme]

If the image is the background of the button, you can put text in front of it. You will need CSS for that. Here are the basics:

HTML:

<a href="index.html" class="button">Home</a>

CSS:

a.button {  /* Not using shorthand background property just for illustration */  background-image: url(button.jpg);  background position: top left;  background-repeat: no-repeat;  display: inline-block; /* Allows me to specify a height for the button */  width: 100px; /* Width of button image */  height: 60px; /* Height of button image */  line-height: 60px; /* Line height same as height so that the text will be vertically centered */  text-align: center;}

If you haven't learnt CSS yet, be sure to check out the W3Schools.com CSS tutorial.

[dsonesuk]

button.jpg image width 100px height 30pxYour current setupCSS

.button_link {position: relative; display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; font-weight: bold;} .button_link img {border:none; position: absolute; top: 0; left: 0;}

HTML

<a class="button_link" href="index.htm"><img src="button.jpg" alt="">Home</a>

As background image

.button_link {display: block; width: 100px; height: 30px; text-align: center; line-height: 30px; font-weight: bold; background: url('button.jpg') no-repeat 0 0; } .button_link img {border: none; }

HTML using background image

<a class="button_link" href="index.htm">Home</a>

[Truman]

button.htm is not a image media type, it is a webpage extension.

my mistakes, I was talking about button.jpg

 

OK, thanks everybody for previous posts, now I need to work on that.

Edited July 18, 2015 by Truman

[Truman]

I tried with those two advice. After I opened class and used stylesheet the image button.jpg is above ''Home''.

[dsonesuk]

Try

.button_link img {border:none; position: absolute; top: 0; left: 0; z-index: 0;}

If z-index: 0; does not work try z-index: -1;

[Truman]

I doesn't work again. Now in the left top corner of a page I see button image and next to it text ''Home''

And 5 buttons are also on their old places...

[Truman]

This was my last ( and pathetic ) effort:

[Truman]

by the way ( maybe I should emphasis this from a beginning ), I'm a noob, started learning html5 and css ~25 days ago and I hope that one day I will become a web developer. That's why my questions may sound naive.

Edited July 18, 2015 by Truman

[dsonesuk]

        <a class="button_link" href="index.htm"><img src="http://www.prodraw.net/button/rounded_rectangle/rounded_rectangle_0501.jpg" alt="">Home</a>        <a class="button_link" href="index.htm"><img src="http://www.prodraw.net/button/rounded_rectangle/rounded_rectangle_0501.jpg" alt="">About Us</a>        <a class="button_link" href="index.htm"><img src="http://www.prodraw.net/button/rounded_rectangle/rounded_rectangle_0501.jpg" alt="">Blog</a>        <a class="button_link" href="index.htm"><img src="http://www.prodraw.net/button/rounded_rectangle/rounded_rectangle_0501.jpg" alt="">Contact Us</a>

            .button_link {position: relative; display: inline-block; width: 190px; height: 35px; text-align: center; line-height: 35px; font-weight: bold; color: #000; font-size: 14px; }            .button_link:hover {text-decoration: none;}            .button_link img {border:none; position: absolute; top: 0; left: 0; z-index: -1;}

Notice that anchor element line-height:: width: height matches width and height of image. which is 190px width x 35px;