basic html css design of a box with image and title

Question

Hi. I am not a very good designer. At least not with html and css. I have been using a very simple code like this:

<fieldset style=\"color: #000000; border: 1px solid #000000; width: 225px; text-align: left; padding: 5px;\">
<legend style=\"color: #999999; font-weight: bold;\">Headline.</legend>
<p>text</p>
</fieldset>

To output information in a php online game i am working on. I need something similar, put a little better looking. Can I get some help. I was thinking something like:

<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>

But im not sure what css code i can write to make a similar effect to the fieldset/legend that im currently using. I need a box with a title, an image on the left side and tekst on the right side of the image.

Answer 1

You could try use the div block below.

<div class="fieldset">
<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>
</div>

As styling, first give a border to your fieldset div. Then, you could just position the h2 tag relatively to your fieldset div playing top and left values. and be sure that your body background, filedset div's background and h2 tag's background is the same. Finally float both div entry-content and the image to left.

With a little tweaking you should get a similar looking of tag.