Sliced images and Divs (HTML & XHTML) tutorial
- Added: Jan 18th, 2007
- Level: Easy
- Author: aurooba
- Reads: 9746
- Description: How to code sliced images using divs instead of tables.
Bookmark
E-mail to a friend
View printable versionIn table layouts, you can slice an image and output it perfectly, but you haven’t been able to do it with div’s. Now you can!
The basic code HTML code to do so is as follows:
<div style="width: 348px; float: left;"><img src=" image " alt="" /></div>
<div style="float: left; width: 330px;"><img src=" image " alt="" /></div>
<div style="width: 348px; float: left;"><img src="image" alt="" /></div>
<div style="float: left; width: 352px;"><img src="image" alt="" /></div>
<div style="width: 348px; float: left;"><img src="image" alt="" /></div>
<div style="float: left; width: 352px;"><img src=" image " alt="" /></div>
<div style="width: 348px; float: left;"><img src=" image " alt="" /></div>
<div style="float: left; width: 352px;"><img src=" image " alt="" /></div>
You have to replace the width with the width of your image, put the link to your image where it says “image” and if your layout is based to the right, then you need to change “float: left;” to “float: right;” I’ve organized it in bunches of two, because my particular image had 2 columns, it helps me “see” my image better as I code.
Now what about those layouts that are centered? How to do those? Well, here is the CSS properties for those you want to center:
{
display: block;
width:100px;
margin:0 auto;
}Hope this tutorial helped! Have fun!!
If you like this tutorial why not 
digg it or 
add to del.icio.us? You can also comment this tutorial or ask for help on 
its forum topic.
Tutorial © aurooba. Do not reproduce in any way without previous permission from the author.
