A profile box is a great way of quikcly giving your visitors information about a person featured on your site. These boxes normally feature a quote or short biography followed by the person’s name, affiliation and maybe a photo and usually are just straight up blockquotes or something similar. In other words they are a bit boring. But there really is no reason why they should be: Text and images on the web can pretty much be displayed in any layout you want. All you need is the creativity to come up with a better way of displaying it and either the knowledge of CSS and HTML to get it done or a tool to help you along the way.
In this tutorial I’ll show you how to build the fancy profile box pictured above and featured on the testimonial page on the Pink & Yellow Media website using Expression Web. If you don’t use Expression Web you can still follow along and use the code so don’t worry. Click here to see a working demo (opens in new tab or window).
Start with a design
The image above is actually the real Photoshop mockup I did for the project (if you look closely you’ll see that Tracy’s photo is blurry because I kept scaling it up and down to get the size right). I mock up all my projects, even if they are just small ones like this, in either Photoshop or Expression Design to have a quick way of altering the layout and design until I find something I like.
The completed design also serves another equally important purpose: With the layout done it’s easier to map out how the HTML and CSS needs to be organized to get the dynamic web content to match the static image. In it’s most basic form HTML works by wrapping content in boxes and CSS styles those boxes. Therefore mapping out what boxes are needed right on the design like below makes it a lot easier to figure out the next several steps.
Building the HTML markup
The boxed out image above gives us a clear indication of how the markup needs to be organized:
- There’s a box that contains everything that has a grey border
- The quote itself has to be contained within it’s own box
- The profile info (name, affiliation, image) needs to be wrapped in its own box
- The name is separate from the affiliation and needs its own box
- The image needs to float on top of other content, namely the blue background banner
From this we can start building the markup. I usually start working with actual content right away but I’ve been told most people get confused by this method so I’m going to recommend building the HTML framework first and then inputting the content. The next steps take place in Code view.
As step zero create a container to simulate the width of your website. This is just to make sure that the box expands and contracts properly when it’s done. To do this go into Code view and create a new line directly under the <body> tag. Type <div id=”container”> and Expression Web creates the end </div> tag for you. Hit Return several times to create space between the beginning and end tag.
A smart tip: To keep track of what tag closes what div insert a comment after each of the closing divs expalining what that is, for example </div> <!– END #container –>
Create a new line under the div you just created and create a new div, this time with the class profile like this <div class=”profile”>. This div is the outer wrap for the actual box. Again hit Return several times to make space between the beginning and end tag and identify the end tag with the comment <!– END .profile –>.
Create a box for the profile text by creating a new div inside the profile div with the class profileText.
Underneath the profileText div (not inside it) create a new box to contain the name, image and affiliation. Give this div the class profileStats.
Inside the profileStats div create two new separate divs with the classes profileName and profileJob respectively.
The framework is now complete and should look like the code example below. Notice how I use tab indents to visually show how elements are nested within eachother:
<body>
<div id="container">
<div class="profile">
<div class="profileText">
</div> <!-- END .profileText -->
<div class="profileStats">
<div class="profileName">
</div> <!-- END .profileName -->
<div class="profileJob">
</div> <!-- END .profileJob -->
</div> <!-- END .profileStats -->
</div> <!-- END .profile -->
</div> <!-- END #container -->
</body>
Insert the content
With the framework all mapped out it’s time to insert some content. In Expression Web go to Split view. You’ll notice that in the Design view portion there are now three boxes with dotted outlines. Clicking on each of these will show you what box you have selected. At the same time you’ll see where you are in the framework structure in the Code view portion so you always know you are typing out content in the right place. Now you can insert your content in the different boxes. The bio, profile, quote or testimonial goes in the profileText box, the name of the person goes in the profileName box and the affiliation stats (position, company, website etc) goes in the profileJob box.
The image in this tutorial is 88px by 88px. To personalize this tutorial you should make your own image to use.
When it comes to the image it doesn’t really matter exactly where you insert it (you’ll see why later). But for structural purposes it should be within the profileStats box. To insert it place your cursor directly after the opening tag of the profileStats div and hit Return to create a new line. Click Insert on the main menu, select Picture and From File to open the Picture dialog. From here select the image you want to display and click Open. This will insert the image into your code. The image to the right shows the markup in Code view and what the cntent currently looks like in Design view (click for full size version). Below is the markup at this point:
<body>
<div id="container">
<div class="profile">
<div class="profileText">
If there was a need for a Word Press Superhero [and there is] Morten
would be your guy.<br />
Pink & Yellow Media took on the Design Schooled Kids website
project because it would push Word Press to its very limits in both
look and functionality. We presented them with a design and it they
made it a reality — BIG TIME!<br />
Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText -->
<div class="profileStats">
<img src="tracyPic.jpg" />
<div class="profileName">
Tracy Sullivan</div> <!-- END .profileName -->
<div class="profileJob">
Principal & Creative Director <br />
<a href="http://www.designschooledkids.com" title="Design Schooled Kids">
Design Schooled Kids</a></div> <!-- END .profileJob -->
</div> <!-- END .profileStats -->
</div> <!-- END .profile -->
</div> <!-- END #container -->
</body>
Styling the content
You now have the complete markup for the page. The next step is to create the styles that will make the box look the way you want it to.
Again step zero is to simulate the width of an actual site: On the right hand side of Expression Web you should have a series of panels, probably Toolbox, Apply Styles and Manage Styles. Close Toolbox and Apply Styles (you can always open them again from Panels on the main menu). I do 99% of my work from the Manage Styles panel. In the Manage Styles panel click New Style to open the New Style dialog. For the Selector type #container (the # sign means ID while a punctuation mark means Class). Go to Position and set the width to whatever width you are going to work with. In my case it is 506px. Click OK to apply the style. You should now see that the box is narrower than it was before.
.profile
The .profile class is the outer box that wraps the content. From the image at the top of the article we see it is supposed to have a grey border. If you want to, Expression Web will help you assign selector names to your styles. Click on any of the content in Design view and use the Tag Selector up at the top to highlight the <div.profile> tag. Now click on New Style in the Manage Styles panel and Expression Web will automatically set the Selector name to .profile. All you have to do here is go to Border and set all four sides to solid, 1px and #CCCCCC. Click OK to apply the style and you’ll see the content now has a grey border around it.
.profileText
You may have noticed you didn’t add padding to the .profile box to give the text some breathing space. This is because that padding would have affected the blue bar at the bottom of the box. You’ll see later. To create some breathing space for the profile text and set the font family create a new style with the selector .profileText. Under Box set Padding for all four sides to 10px. Under Font set the font-family to Arial, Helvetica, sans-serif and font-size to o.8em. Click OK and the text will indent and change font family.
.profileStats
The name and position in the design is a serif font and aligned to the right. This can be done in the respective styles for the individual elements or as we do it here in the overall style: Create a new style with the selector .profileStats, set the font-family to Georgia, Times New Roman, Times, serif and font-style to italic. To change the text alignment go to Block and set text-align to right.
.profileStats img
Right now the image appears above the rest of the profile stats. The design calls for it to appear in the bottom right corner. To do this we’re going to use absolute positioning. Create a new style with the selector .profileStats img. This style will only target the image. Go to Position and set Position to absolute, right to 0px and bottom to 0px. The absolute positioning ‘lifts’ the affected content out of the regular stream and positions it based on XY coordinates within the page, in this case 0px from the right and 0px from the bottom so the bottom right corner. But when you click on OK you’ll see that the image places itself in the bottom right coner of the page, not the box. This is because an absolutely positioned element will relate itself to the first containing element that has a position value set to something other than static which is the default value. Since there are no such elements it relates itself to the window itself. To fix this we need to change the Position value of the .profile box. To do this go to the Manage Styles panel, right click the .profile style and select Modify Style from the pop up menu. In the Modify Style dialog go to Position and set position to relative. Click OK and the image now appears in the bottom right hand corner of the box. But now it overpals the name and affiliation text. So that’s what we’ll fix next.
.profileName
To shift the profile name out from under the image create a new style with the selctor name .profileName, go to Box and set padding-right to 98px (88px for the image widht plus 10px for some breathing space). At the same time set padding-bottom to 5px. Under Font set font-size to 1.2em, font-weight to bold and color to #2e4672. Click OK to apply the new style.
.profileJob
This is where that blue stripe in the design comes in. The blue is actually a tiny .gif image tiled to the right and used as a background. Create a new style with the selector .profileJob. Let’s fix the text first: Set font-size to 0.8em, color to #FFFFFF and under Box set padding-right to 98px and padding-top to 5px. To add the blue background go to Background, set background-image to testimonialBlue.gif (image file) and set background-repeat to repeat-x. Finally because the design calls for the blue banner to be 50px tall go to Position and set height to 45px. It’s set to 45 rather than 50 because the padding is added on to the height and you already added 5px earlier. Setting height to 50px would mean the box is actually 55px tall.
.profileJob a
Finally to style the link create a new style with the selector name .profileJob a. Set font-weight to bold, color to #FFFFFF and check none under text-decoration.
Final thoughts
This box is fairly easy to implement in both static and dynamic sites. I have it running under WordPress on our company website though I had to create a special style for the paragraph tag to get that to work properly. The box is stested against all major browsers and works properly. The only divergence is a 1px shift of the image in Internet Exprlorer 6 which I think is acceptable.
Final HTML Markup
<body>
<div id="container">
<div class="profile">
<div class="profileText">
If there was a need for a Word Press Superhero [and there is] Morten
would be your guy.<br />
Pink & Yellow Media took on the Design Schooled Kids website
project because it would push Word Press to its very limits in both
look and functionality. We presented them with a design and it they
made it a reality — BIG TIME!<br />
Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText -->
<div class="profileStats">
<img src="tracyPic.jpg" />
<div class="profileName">
Tracy Sullivan</div> <!-- END .profileName -->
<div class="profileJob">
Principal & Creative Director <br />
<a href="http://www.designschooledkids.com" title="Design Schooled Kids">
Design Schooled Kids</a></div> <!-- END .profileJob -->
</div> <!-- END .profileStats -->
</div> <!-- END .profile -->
</div> <!-- END #container -->
</body>
Final CSS markup
>
#container {
width: 506px;
}
.profile {
border: 1px solid #CCCCCC;
position: relative;
}
.profileText {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 10px;
}
.profileStats {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
text-align: right;
}
.profileStats img {
position: absolute;
right: 0px;
bottom: 0px;
}
.profileName {
padding-bottom: 5px;
padding-right: 98px;
font-size: 1.2em;
font-weight: bold;
color: #2e4672;
}
.profileJob {
font-size: 0.8em;
padding-right: 98px;
padding-top: 5px;
background-image: url('testimonialBlue.gif');
background-repeat: repeat-x;
height: 45px;
color: #FFFFFF;
}
.profileJob a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}