Grow your CSS skills. Land your dream job.

Combining Equidistant Objects and Text Overlays

  • # February 22, 2012 at 3:12 am

    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.)

    # February 23, 2012 at 4:11 pm

    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?

    # February 23, 2012 at 4:36 pm

    Actually, this exact quest was just asked a couple days ago. Link to thread

    # February 23, 2012 at 9:45 pm

    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.

    # February 23, 2012 at 10:14 pm

    Here you go: http://jsfiddle.net/joshnh/76hGT/

    And here is an alternate solution (I think this looks better): http://jsfiddle.net/joshnh/pEJqn/

    # February 23, 2012 at 11:31 pm

    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?

    # February 23, 2012 at 11:43 pm

    …scrap this, edited the above post…

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".