?
Solved

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

Posted on 2013-06-12
8
Medium Priority
?
226 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 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 

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 62

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

589 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