Solved

placing image to right of text

Posted on 2007-04-10
5
242 Views
Last Modified: 2010-07-27
I have a div which has a heading for each section on a page.

how do I create a class which adds an image to the right handside (at the end of the text) of each heading.

here is the code for the currnet div

<h2>How The Building Centre can assist you</h2> (need image to go here)

div#content h2 {
      background: #E8EFF3 center;
      margin: 8px 0 0;
      color: #FF7E00;
      font-size: 12px;
      text-decoration: none;
      text-align: left;
      vertical-align: middle;
      padding: 5px;
      font-family: Arial, Helvetica, sans-serif;
}
0
Comment
Question by:Cheryl Lander
5 Comments
 
LVL 8

Accepted Solution

by:
sankarbha earned 500 total points
ID: 18880765
Try this.  You can adjust the position of the image to right by changing the percentage values.

div#content
{
      background: url("/someimg.gif") #E8EFF3 90% 30% no-repeat fixed;
}
0
 
LVL 23

Expert Comment

by:Alan Henderson
ID: 18880878
Or create a class like this:

.right{
      border:0px;
      padding:20px;
      float:right;
}

<h2>How The Building Centre can assist you</h2> <img class="right" src="images/image.jpg" alt="name"/>
0
 
LVL 8

Expert Comment

by:jawahar_prasad
ID: 18880927
Hi...
TRY THIS... Just copy, paste and execute...

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.heading {
      font-family: Thoma, Arial, Verdana;
      font-size: 11px;
      font-weight: bold;
      color: #333333;
      background-attachment: fixed;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: right center;
}
-->
</style>
</head>

<body>
<h2 class="heading">This is the heading</h2>
</body>
</html>
0
 

Author Comment

by:Cheryl Lander
ID: 18882039
Im basing the following on this code.

div#content
{
      background: url("/someimg.gif") #E8EFF3 90% 30% no-repeat fixed;
}

Works fine but I can only see the image through <h2> when I scroll the page. Its almost like the background image is fixed and and that h2 is a window.
0
 

Author Comment

by:Cheryl Lander
ID: 18882050
All ok. it was affected by another div. thanks.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

705 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

18 Experts available now in Live!

Get 1:1 Help Now