CodingForums.com - Arranging Images in a Div

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Arranging Images in a Div (http://www.codingforums.com/showthread.php?t=273573)

Arranging Images in a Div

So I am working on a project and need some help, I need to figure out how to arrange images in a div using anything possible, javascript, html, css whatever. So I have a div with a background image of this template http://us.battle.net/d3/static/image...arian-male.jpg now what I have is php code that generates images and puts them in the div, as you would expect there is a helmet image, a chest armor image, weapon etc etc. but they are all just aligned left to right. Now currently they are just images but I can change it so that they are all divs or anything, I just have no idea how to do it, the closest I have come to having success was using literal page breaks and spaces to move the images in the correct area but it didnt exactly work. Not sure what I can do here, any help would be great! Thanks

You could use absolute positioning :

Wrap it all up with :

Code:

* {

        margin: 0;

        padding: 0;

}

html

{

      height: 100%;

  margin: 0;

  padding: 0;

}





body 

{

 height: 100%;

  margin: 0;

  padding: 0;

        font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

  background: 000000;

 

        

}



#content {

  position:relative;

  z-index:1;

 

}





a {

        color: blue;

        outline: none;

        text-decoration: underline;

}

a:hover {

        text-decoration: none;

}

p {

        margin: 0 0 18px

}

img {

        border: none;

    margin: 0 0 18px;

    text-align: center;

        vertical-align: middle;

        z-index:-1;

}

Then make individual locations for each image like:

Code:

#mainstay2

{

    position: absolute;

    top: 16em;

    margin-left: 50%;

    width: 400px;

        padding-left: 10px;

        padding-right: 10px;

    height: 280px;

    background-color: White;

    border-radius: 6px;

    border-bottom-left-radius: 4px;

    font: 16px Tahoma, Arial;

    z-index: -2;

}

Also though, Remember if you are jsut tthrowing images out into divs, you may want to make image containers for themselves , And ALSO sometimes when you throw images out to div it will be Reverse to the way you want it to come out. duno if this helps,

if you really had to you could just make old HTML4 TABLES and partition in but i'd realy suggest using div ABSOLUTE positioning

or yeah just add an images div:

Code:



#HelmetSpec

{

    position: absolute;

    top: 2em;

    padding-left: 220px;

}

#ShouldersSpec

{

    position: absolute;

    top: 4em;

    padding-left: 180px;

}



#headerimage

{

    position: absolute;

    top: 2em;

    padding-left: 220px;

}

and could have it in page like

Code:

html





<div id="header"><img src="headerLogo1.jpg" id="headerimage" border="0" alt="Header image you can move around with absolute" ><img src="Helmet.jpg" id="helmetSpec" alt="Users Helmet"><img src="SHoulders.jpg"",,, etc etc.

</div>