• Link us
  • Links
  • TOS
  • Site
  • Gallery
  • Forum
Subscribe

Sliced images and Divs - HTML & XHTML tutorial

Tutorials > HTML & XHTML tutorials > Sliced images and Divs
  • Added: Jan 18th, 2007
  • Level: Easy
  • Author: aurooba
  • Reads: 25,792
  • Description: How to code sliced images using divs instead of tables.
Bookmark Digg del.icio.us

E-mail to a friend

View printable version


In 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?

Tutorial © aurooba. Do not reproduce in any way without previous permission from the author.

  • Members login
  • Register for free

Web layouts

  • Web layouts
  • Aardvark Topsites skins
  • SMF Themes
  • Wordpress Themes

Graphic resources

  • 100x100 Avatars
  • PS and PSP brushes
  • Brush shop
  • Background patterns
  • Web icons and smilies
  • Textures
  • Renders (PNG)

Tutorials

  • Newest tutorials
  • Adobe Photoshop
  • CSS
  • Designs / Layouts
  • HTML & XHTML
  • Miscellaneous
  • Paint Shop Pro
  • PHP & MySQL

Affiliates

  • Ego Box
  • The Jaded Network

Partners

Celestial Star © Melfina 2003-2010. By using this site you agree to our terms of service
Layout credits: Hybrid Genesis, Bittbox, swe3ty
Valid XHTML | Valid CSS | Top of the page