CSS Codes
CSS Layouts
Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: display series of images

  1. 07-21-2008, 08:21 PM #1
    cway
    cway is offline Junior Coders
    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
    Reply With Quote Reply With Quote
  2. 07-21-2008, 09:15 PM #2
    TheJoshMan's Avatar
    TheJoshMan
    TheJoshMan is offline Senior Coders
    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
    Reply With Quote Reply With Quote
  3. 07-21-2008, 09:25 PM #3
    Nile's Avatar
    Nile
    Nile is offline Elite Coders
    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
    Reply With Quote Reply With Quote
  4. 07-21-2008, 09:26 PM #4
    TheJoshMan's Avatar
    TheJoshMan
    TheJoshMan is offline Senior Coders
    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
    Reply With Quote Reply With Quote
  5. 07-21-2008, 10:02 PM #5
    TheJoshMan's Avatar
    TheJoshMan
    TheJoshMan is offline Senior Coders
    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
    Reply With Quote Reply With Quote
  6. 07-21-2008, 11:46 PM #6
    cway
    cway is offline Junior Coders
    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?
    Reply With Quote Reply With Quote
  7. 07-21-2008, 11:48 PM #7
    TheJoshMan's Avatar
    TheJoshMan
    TheJoshMan is offline Senior Coders
    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
    Reply With Quote Reply With Quote
  8. 07-21-2008, 11:59 PM #8
    cway
    cway is offline Junior Coders
    Join Date
    Jul 2008
    Location
    Colorado, USA
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    http://www.theteatable.com/Merchant2...vc?Screen=teas
    Reply With Quote Reply With Quote
  9. 07-21-2008, 11:59 PM #9
    TheJoshMan's Avatar
    TheJoshMan
    TheJoshMan is offline Senior Coders
    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
    Reply With Quote Reply With Quote
  10. 07-22-2008, 12:00 AM #10
    TheJoshMan's Avatar
    TheJoshMan
    TheJoshMan is offline Senior Coders
    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules