CSS-Tricks

Forums Get help. Give help.

• FizzBuzz February 22 Permalink

  So, specifically; I'm trying to combine this; Text Blocks and this; Equidistant Objects.
  
  I've tried most of what my very limited knowledge can think of; Floating the text, floating the text and specifying z-indexs aaaand well yeah, that about all I can think of.
  I suspect the issue lies with the fact that the equidistant objects have been floated but it's beyond my knowledge to figure out if this is even possible or not, so hopefully someone here might have some ideas for me.
  
  (The implementation is more or less copy and paste from the above links so I figure you don't need to see any of my code, but I'm happy to post if requested.)
• dfogge February 23 Permalink

  hey fizzbuzz, im not sure what you are trying to accomplish exactly. is there any way you can make a jsfiddle to show what you have so far?
• noahgelman February 23 Permalink

  Actually, this exact quest was just asked a couple days ago. Link to thread
• FizzBuzz February 23 Permalink

  I'm not sure that's going to work properly, the image is a background and the text wrapping is based on the div.
  In my instance, the div is larger than the image in order to control the equidistant spacing, so that wouldn't work unfortunately.
  
  @dfogge, you can check out http://www.baradineholdings.com.au/gallery.php to see what I have so far. The CSS needed for the relevant div's, is taken from the aforementioned links.
• joshuanhibbert February 23 Permalink

  Here you go: http://jsfiddle.net/joshnh/76hGT/
  
  And here is an alternate solution (I think this looks better): http://jsfiddle.net/joshnh/pEJqn/
• FizzBuzz February 23 Permalink

  Hi @joshuanhibbert, I like that! Thanks!
  
  I prefer the first solution, as the images wrap, rather than squash/skew if the page is too small.
  
  3 small problems though;
  1. Doesn't work with different sized images. http://jsfiddle.net/pEJqn/8/
  
  2. It doesn't seem to render properly in IE9, I know I'll have to put in a different setting for opacity, but the images aren't actually lining up properly either, I just get one after the other; http://www.baradineholdings.com.au/galleryTest2.php
  
  3. I'm having trouble centering the text. Basically, I want to centre the text and increase the padding so that the whole image seems "faded" behind the text. Each text is going to be different though, so I'm not sure that setting bottom/left or padding is the correct solution here?
• FizzBuzz February 23 Permalink

  ...scrap this, edited the above post...