Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Expanding Content Box
Your Ad Here

Expanding Content Box


1. Begin with a new file, with #666666 as your background color, the size is up to you to decide. ( I choose 300x300 for this tutorial. ) Now create a new layer in the layers palette, and then take the Rounded Rectangle Tool and draw out a shape similar to the one below.

2. Now go to the layers palette and right click on layer 1, choose Blending Options, then apply this settings.

And now should it look something like this.

3. Now create a new layer, then set your foreground color to black #000000, and then take the Rounded Rectangle Tool and draw out a shape similar to the one below.

4. Then once again create a new layer and take the Rounded Rectangle Tool and draw out a shape like the image below shows.

And that's it you are done with the content box. This is what I came up with.

Now take the Slice Tool and start to slice your content box. Below can you see how I sliced my content box.

And this is the code to make it expand.

<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="/img_articles/4444/01.gif" width="300" height="60" alt=""></td>
</tr>
<tr>
<td background="02.gif" width="21"></td>
<td background="03.gif" width="258"><p>All content goes here!!!</p></td>
<td background="04.gif" width="21"></td>
</tr>
<tr>
<td colspan="3"><img src="/img_articles/4444/05.gif" width="300" height="33" alt=""></td>
</tr>
</table>

That's it, you can see an example below.

Expanding Content Box Tutorial: Final Result

All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here.

Expanding Content Box Tutorial: Final Result


Author's URL: SweDesignz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Expanding Content Box"

Only registered users can write comment

Reader's comments