Forums

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

Home Forums CSS Floating border around div

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #156521
    jknetdesign
    Participant

    http://jknetdesign.com/images/bluopal-concept.jpg

    How would I approach a design like this where the designer wants the border around the widgets?

    #156526
    wolfcry911
    Participant
    #156534
    wolfcry911
    Participant

    you might want to show us a link to what you’re referring to…

    #156541
    Merri
    Participant

    FYI: the solution wolfcry911 provided does not allow text to be selected or links to be clicked in the widgets.

    #156577
    wolfcry911
    Participant
    #156591
    noahgelman
    Participant

    I would be wary of woldcry911’s example in older browsers. If they don’t support the :before property you’re left with a super ugly border that’s very off-center.

    Here is a slightly tweaked version that uses the nice blue background as the main widget and the border as the :before. If :before isn’t supported, you still have a nice looking widget.

    EDIT: Now updated to make sure links inside are clickable. Backwards compatibility gone but screw it.

    http://codepen.io/anon/pen/FDkId

    #156620
    wolfcry911
    Participant

    in my example in older browsers you only lose the background color – the border is very much relative to the widget. your example performs no better in older browsers and is more complex?…

    #156626
    wolfcry911
    Participant

    did you look at the updated pens?

    #156913
    noahgelman
    Participant

    @wolfcry911, when you lose the background color, the border looks very off center in regards to the content.

    In my pen you only lose the border and the background stayed evenly spaced around the content.

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