Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    NWO Canada
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Post

    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

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    NWO Canada
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Post

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •