Truman Posted July 17, 2015 Share Posted July 17, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2015 Share Posted July 17, 2015 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. Link to comment Share on other sites More sharing options...
Truman Posted July 17, 2015 Author Share Posted July 17, 2015 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''. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2015 Share Posted July 17, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted July 17, 2015 Share Posted July 17, 2015 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. Link to comment Share on other sites More sharing options...
Truman Posted July 17, 2015 Author Share Posted July 17, 2015 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''. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2015 Share Posted July 17, 2015 button.htm is not a image media type, it is a webpage extension. Link to comment Share on other sites More sharing options...
Ingolme Posted July 17, 2015 Share Posted July 17, 2015 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. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2015 Share Posted July 17, 2015 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> 1 Link to comment Share on other sites More sharing options...
Truman Posted July 18, 2015 Author Share Posted July 18, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
Truman Posted July 18, 2015 Author Share Posted July 18, 2015 I tried with those two advice. After I opened class and used stylesheet the image button.jpg is above ''Home''. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2015 Share Posted July 18, 2015 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; 1 Link to comment Share on other sites More sharing options...
Truman Posted July 18, 2015 Author Share Posted July 18, 2015 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... Link to comment Share on other sites More sharing options...
Truman Posted July 18, 2015 Author Share Posted July 18, 2015 This was my last ( and pathetic ) effort: Link to comment Share on other sites More sharing options...
Truman Posted July 18, 2015 Author Share Posted July 18, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2015 Share Posted July 18, 2015 <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; Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now