Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-06-12
8
Medium Priority
?
220 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 30

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 30

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 59

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 30

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 30

Accepted Solution

by:
Randy Downs earned 2000 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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... …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

597 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