Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: display series of images

  1. #1
    Join Date
    Jul 2008
    Location
    Colorado, USA
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default display series of images

    I am trying to display a series of images, side-by-side and on top of each other, with a little text below each image.
    Just like how image would display without any css at all.
    I do not want to use a table, because then the images would not wrap upon browser width change.
    Does anybody have any ideas?
    Thanks,
    Cway

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    The CSS:
    Code:
    <style type="text/css">
    .container{
    position:relative;
    top:0px;
    left:0px;
    width:800px;
    background:#404040;
    padding:15px;
    margin:0 0 0 0;
    }
    
    .container ul li{
    display:inline;
    list-style-type:none;
    padding:0 0 0 0;
    margin:0 0 0 0;
    }
    
    .container img{
    border:2px;
    border-style:solid;
    border-color:white;
    padding:4px;
    }
    </style>
    The HTML
    Code:
    <div class="container">
    <ul>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    <li><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></li>
    </ul>
    </div>
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    He also wants text below the images Nyne Lyves.
    Jeremy | jfein.net

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    ah, oops! My bad, I guess I missed that little snippet eh?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. #5
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Cool

    Ok, so let's try it again shall we?

    The CSS:
    Code:
     <style type="text/css">
    body{
    margin:0;
    padding:0;
    background:#404040;
    font-family:georgia;
    color:#E1D1BB;
    }
    
    dl {
    text-align:center;
    font-size:.95em;
    margin-top:25px;
    }
    
    dt,dd {
    width:10.5em;
    float:left;
    }
    
    dt {
    margin-bottom:5.5em;
    }
    
    dd {
    margin:90px 0 0 -10.5em;
    }
    
    img {
    vertical-align:bottom;
    border:1px;
    border-style:solid;
    border-color:#909090;
    padding:2px;
    background:white;
    }
    
    em {
    display:block;
    font-weight:bold;
    margin-bottom:5px;
    }
    
    dl a:hover img,dl a:active img,dl a:focus img {
    background:#ff0000;
    }
    
    </style>
    The HTML:
    Code:
    <dl>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    <dt><a href="#"><img src="http://www.m-pulsedesigns.com/Testing/me.jpg" /></a></dt>
    <dd><em>Photo Name</em> Caption Text</dd>
    </dl>;)
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  6. #6
    Join Date
    Jul 2008
    Location
    Colorado, USA
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    First of all, thank you very much for the insanely quick action.
    We are really close, here.
    If I could just get the text below each image centered and, when you slowly resize your browser window, there's some funky stuff happening - the text get separated from the image and is way out in left field.
    Any ideas here?

  7. #7
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    link to page in question?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  8. #8
    Join Date
    Jul 2008
    Location
    Colorado, USA
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

  9. #9
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    what browser are you viewing it in? I've tested it in IE 7 and FF 3 and neither are showing the problems you mentioned. The text is centered directly beneath the images, and the text stays there and doesn't jump around on resize. May I see a link to the page you're using it on?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  10. #10
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    sorry, disregard last post. Didn't realize you'd already posted while I was typing.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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
  •