Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Combining Equidistant Objects and Text Overlays

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #36776
    FizzBuzz
    Member

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

    #97320
    dfogge
    Participant

    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?

    #97327
    noahgelman
    Participant

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

    #97349
    FizzBuzz
    Member

    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.

    #97353

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

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

    #97367
    FizzBuzz
    Member

    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?

    #97370
    FizzBuzz
    Member

    …scrap this, edited the above post…

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.