Solved

placing image to right of text

Posted on 2007-04-10
5
254 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 24

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

821 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