0

I'm trying to add an icon inline with the banner text in a CMS static block. So far, all I've been able to do is use relative positioning to move it there on the page, but that is easily affected by my rwd theme's page styles:

<h2 class="thin-banner">This is the banner text</h2>
<img src="{{media url="wysiwyg/image.png"}}" style="width: 20px; height: 20px; position: relative; left: 75%; top: -48px;" />

I've tried using span tags and giving the tag a display:inline style:

 <span>
  <h2 class="thin-banner" style="display:inline">This is the banner text</h2>
  <img src="{{media url="wysiwyg/image.png"}}" style="width: 20px; height: 20px; position: relative; left: 75%; top: -48px;" />
 </span>

But in the admin editor (which I have to use, because the text needs to be editable by a copywriter), the span is dropped around the tag.

  <h2 class="thin-banner" style="display:inline">This is the banner text</h2>
 <span>
  <img src="{{media url="wysiwyg/image.png"}}" style="width: 20px; height: 20px; position: relative; left: 75%; top: -48px;" />
 </span>

Any idea what to try next?

1

Here we go:

<div class="thin-banner" style="display: inline-block; width: 100%;">This is the banner text<img src="{{media url="wysiwyg/image.png"}}" style="width: 25px; height: 25px; display: inline-block; position: relative; left: 10px; top: 5px;" /></div>

The relative positioning and size might not be relevant to your particular projects, but they were the values that worked best for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.