Solved

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

Posted on 2013-06-12
8
211 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…

912 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now