Solved

How to put a small image inline with the <h1> tag

Posted on 2013-06-12
8
215 Views
Last Modified: 2013-06-13
In the center of this page:http://roofgenius.com/RoofCalcWriter/test.asp
<h1>Usb Flash Drive Backup</h1><img src="../images/USB35x26.gif" width="35" height="26" alt="flash drive" title="">
I think the h1 tag is causing it to drop to a new line.
How can i write this ?
0
Comment
Question by:isnoend2001
  • 4
  • 3
8 Comments
 
LVL 29

Expert Comment

by:Randy Downs
ID: 39243520
Maybe adding this to your h1 css

h1 {
background-image: url(../images/USB35x26.gif);
background-repeat:no-repeat;
0
 

Author Comment

by:isnoend2001
ID: 39243522
Thanks Number-1,but that would not work as many pages are already styled using the h1 tag
0
 
LVL 29

Expert Comment

by:Randy Downs
ID: 39243531
You can have a special H1 just for main page like this

#main-page h1 {
background-image: url(../images/USB35x26.gif);
background-repeat:no-repeat;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:isnoend2001
ID: 39243549
Thanks : Number-1 i had already tried that from your last post and the image does not go at the end of the text, it's at the beginning and behind the text.
I have since got success with this, but need to move the image a little to the right:
<h1 style="display:inline">Usb Flash Drive Backup</h1>                       
<img src="../images/USB35x26.gif" width="35" height="26" alt="flash drive" title=""/>
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39243767
Did you change your page - I cannot see any <h1>Usb Flash Drive Backup</h1> on the link above

I did however notice that you do have multiple <h1> tags on your page - you should consider putting only 1 <h1> tag per page.
0
 
LVL 29

Expert Comment

by:Randy Downs
ID: 39244350
If you just need a little spacing you can try padding like:
style="padding: 4px"

<h1 style="display:inline">Usb Flash Drive Backup</h1>                        
<img src="../images/USB35x26.gif" width="35" height="26" style="padding: 4px alt="flash drive" title=""/>
0
 
LVL 29

Accepted Solution

by:
Randy Downs earned 500 total points
ID: 39244367
You could also just pad the right if you prefer

padding-right: 4px
0
 

Author Closing Comment

by:isnoend2001
ID: 39244598
thanks the padding works
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question