SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Dionysis's Avatar
    Join Date
    Jan 2004
    Location
    Socal
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a way to put multiple images in a div?

    Is there a way to put multiple images in a div? like topleft, topright, bottomleft, bottom right? or for each image does it need its own div? this should be quick questions hopefully!

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #container {
                position: relative;
                width: 150px;
                height: 150px;
               }
    img.TL     {
                position: absolute;
                left: 0;
                top: 0;
               }
    img.TR     {
                position: absolute;
                left: 75px;
                top: 0;
               }
    img.BL     {
                position: absolute;
                left: 0;
                top: 75px;
               }
    img.BR     {
                position: absolute;
                left: 75px;
                top: 75px;
               }
    
    </style>
    </head>
    <body>
    <div id="container">
    <img class="TL" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
    <img class="TR" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
    <img class="BL" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
    <img class="BR" src="http://www.sitepoint.com/forums/images/spavatars/087.gif" />
    </div>
    </body>
    </html>
    You can also use CSS float...but you'll run into problems with rendering quirks, requiring specific hacks to correct. I believe this way is more consistent. Maybe not...

    http://css.maxdesign.com.au/floatutorial/
    ::: certified wild guess :::

  3. #3
    SitePoint Zealot Dionysis's Avatar
    Join Date
    Jan 2004
    Location
    Socal
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,
    i tryed that but the absolute positioning knocked the images out to stick to the corners of my browser, not the corners of the div. so... what am i doing wrong here?

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dionysis
    Thanks,
    i tryed that but the absolute positioning knocked the images out to stick to the corners of my browser, not the corners of the div. so... what am i doing wrong here?
    did you style the container as well ? it needs at the very least the
    Code:
    position: relative;
    rule. basically the container needs to be positioned (even if, as with the example above, you're not actually moving it anywhere...it's position relative, but you're not providing an offset from its normal position).
    the reason being that absolute positioning always refers to the closest parent element which has been positioned. without it, it will always end up referring to the window/document as a whole.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Zealot Dionysis's Avatar
    Join Date
    Jan 2004
    Location
    Socal
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sweet i'll give it a try

  6. #6
    SitePoint Zealot Dionysis's Avatar
    Join Date
    Jan 2004
    Location
    Socal
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can i absolutely position things with respect to the bottom of a DIV. i tryed just

    Code:
    bottom:0;
    but that didn't work

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    bottom should work as long as you have specified a position absolute as well.
    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
     width:300px;
     height:300px;
     position:relative;
     background:#ffffCC;
    }
    #inner {
     position:absolute;
     bottom:0;
     left:100px;
     width:100px;
     height:25px;
     background:red;
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="inner">inner</div>
    </div>
    </body>
    </html>
    Paul


Bookmarks

Posting Permissions

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