Images & Text

**Struggling** · Jan 16, 2008 08:06

Images & Text

I was wondering if you look at the following example how he has his picture on top of an image with some text around it. Now I imagine that the main image is a background image and his picture and text are formatted somehow so that it appears how it does.

http://shiflett.org/

Now I have fiddled around in many ways but can’t get it to render exactly how he has done on his website.

This is what I have so far

CSS

Code:

.biography
{
background-image:url(images/picture.gif); 
width: 175px; 
height: 140px;
}

.biographyimage
{
width: 80px;
height: 100px;
}

HTML

Code:

<div class="biography">

<p class="pmenu"><img src="images/simonjohnstone.gif" class="biographyimage" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>

How do I get it so that I can render the words and biographyimage like on the website.

Cheers for any advice

**alecrust** · Jan 16, 2008 08:37

OK I got bored and built it for you

Frankly I couldn't be bothered with the little arrow bit in the middle, but the rest is identical..

All images needed are attached.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Struggling's Biography Box</title>
<style type="text/css">
<!--
.biography {
width:185px;
height:127px;
background:#210 url(biography-bg.png) repeat-x;
border:1px solid #ccccbb;
color:#bbaa99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
padding:14px 11px 0 11px;
}

.biography a {
color:#d60;
text-decoration:none;
}

.biography a:hover {
text-decoration:underline;
}

.biography-img {
float:left;
margin-right:10px;
}
-->
</style>
</head>
<body>

  <div class="biography">
    <img src="biography-img.png" alt="Struggling" width="81" height="99" class="biography-img" />
    <a href="#" title="Struggling">Struggling</a> is an author and speaker who leads the web application practice at <a href="#" title="SitePoint">SitePoint</a>.
  </div>

</body>
</html>

Which will produce this in all browsers: