6 replies to this topic

[qwerty]

Does anyone know of a good way to use CSS to position an image immediately to the right of a heading tag?

Right now I've got the image inside the <h1></h1>, and I'm not crazy about doing things that way.

[websage]

Place both the headtag and the image in different <div> tags and then apply appropriate positioning to each.

Hope this helps.

[chrishirst]

put them in a sized <div> then use <img> tag before the <hn> tag and set float:right; for the <img>

div.whatever {
position:relative;
top:nnpx;
width:nnpx;
height:nnpx;
}
img.whatever {
position:relative;
float:right;
}

<div class="whatever">
<img class="whatever" src="imagepath" alt="">
<h1>Some text</h1>
</div>


Chris.

[qwerty]

Doesn't that mean that if I want the image to appear a given distance from the last letter, I'll need to resize the div each time I create a header, based on the length of the text?

[Craig B]

<div id="tagline">
   <h1 style="display:inline;">Your Heading Here</h1>
   <img src="/path/to/image" />
</div>

That should do it.

cheers,
Craig

[Craig B]

and if you want to place a set distance between the image and the text, wrap the img tag in a span and set padding. For example:

<div id="tagline">
  <h1 style="display:inline;">Your Heading Here</h1>
  <span class="leftPadding"><img src="/path/to/image" /></span>
</div>

and in your external style sheet add:

.leftPadding{padding-left:185px;}

cheers,
Craig

[qwerty]

That looks like it'll work. Thanks.

I've still got a ways to go before I get to that step, though. I'm trying to redesign the page to get rid of something like three levels of nested tables. Once I've got all the layers positioning properly I can get started on formatting the content.