Solved

placing image to right of text

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

813 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

13 Experts available now in Live!

Get 1:1 Help Now