Hi,

I want to add a custom "info bubble" to a Google Maps web app. Because the content of the bubble differs in length I would like to have it flexible. So I've cut the bubble image in pieces resulting in 4 corner images (A, C, G, I) and 4 "sides" (B, D, G, H). "E" is the content div and is simply plain white.

+-----+-----------+-----+
|  A  |     B     |  C  |
+-----+-----------+-----+
|     |           |     |
|  D  |     E     |  F  |
|     |           |     |
+-----+-----------+-----+
|  G  |     H     |  I  |
+-----+-----------+-----+

The meaning is to have a fixed width on A, C, D, F, G, I and a fixed height on A, B, C, G, H, I. So the width and height of E is flexible.

Anyone suggestions on how to get this accomplished?

Kind regards,
Niels R.

Bubble

  • [url=http://www.acidrefluxcure.co]GERD Acid Reflux[/url] [url=http://www.oraltech.com.au]bad breath cure[/url] Richard Kroon over 5 years ago

4 answers

2
points
This was chosen as the best answer

The CSS3 solution for this is border-image:

div.bubble {
    border-width: 32px 32px 135px 32px;
    -moz-border-image: url('bubble.png') 32 32 135 32 repeat repeat;
    -webkit-border-image: url('bubble.png') 32 32 135 32 repeat repeat;
    -o-border-image: url('bubble.png') 32 32 135 32 repeat repeat;
    border-image: url('bubble.png') 32 32 135 32 repeat repeat;
}

It lets you slice up a background image - the four numbers are an offset from the top, left, bottom and right edges respectively. Also note IE doesn't support it, and the browsers that do support it have implemented an older version of the specification, but for all that it's quite a neat solution if you're not worried about any of that. Here's an example using your image above (so the red lines are still there).

Answered over 5 years ago by Rob Crowther
  • epic solution :) danwellman over 5 years ago
  • Agreed. +1 for nice, clean CSS3 solution! Ktash over 5 years ago
3
points

The drop shadow and arrow at the bottom of the speech bubble is also achievable with a simple CSS3 technique. You shouldn't use a table for styling unless the data inside is tabular data.

For a 3 column fluid center with fixed width sidebars layout using divs see The Holy Grail article on AListApart.

Answered over 5 years ago by Artistic Abode
  • I've already played around with the examples given in the article you suggest, but I don't seem to get the shadow working properly (I liked the simple green border version). Maybe I'll have to let it rest awhile before I try it again. I'm a programmer with some CSS skills, but there is always some voodoo in it for me :p Niels R. over 5 years ago
  • Ah, and just for clarification: I don't want to use tables, but divs. I'm aware of the fact that table based designs are so 90s. Niels R. over 5 years ago
  • Ah ok, sorry it looked like a table from the ASCII art =). I believe what you're after is a fluid 3 column layout. Please take a look at this article from AListApart: http://www.alistapart.com/articles/holygrail Artistic Abode over 5 years ago
  • +1 to get you over the 500 reputation point barrier, Artistic Abode. Abinadi Ayerdis over 5 years ago
Ktash 1851
2
points

There are quite a few tutorials that came up with a simple Google search, but if you don't mind looking a little different in IE, and older browsers, I would recommended using CSS 3 rounded borders as they are cleaner, and more forward looking.

Update

So, what you're looking for is the bubble look. You can still use the technique above with some relative ease actually. But I'll run you through both. I prefer the non-table one, as I despise table based layouts, but it really is what works best for you.

HTML

<div class="round_wrap">
    <div class="rounded_content">Content Here</div>
    <div class="round_bubble_pointer"></div>
</div>

CSS

.round_wrap {
    position: relative; /* or for you, absolute since you'll want to place it on the page */
}
.rounded_content {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position: relative;
    z-index: 3;
}
.round_bubble_pointer {
    margin-top: -1px; /* this will be the negative size of the shadow */
    background: transparent url('bubble-image-triangle.png') scroll no-repeat center top; /* transparent image which is the pointer */
    width: 100%;
    height: 16px; /* height of the background image */
    z-index: 4;
    position: relative;
}

This pure div approach is one that I've used before. Now for the table one:

HTML

<table>
    <tr class="top">
         <td class="left"></td>
         <td></td>
         <td class="right"></td>
    </tr>
    <tr class="middle">
         <td class="left"></td>
         <td>Content Goes here</td>
         <td class="right"></td>
    </tr>
    <tr class="bottom">
         <td class="left"></td>
         <td></td>
         <td class="right"></td>
    </tr>

CSS

.top td, .bottom td {
    height: 16px; /* height here */
}
.left, .right {
    width: 16px; /* width here */
}
.top td { /* image goes here as background */ }
.bottom td { /* image goes here as background */ }
.top .left { /* image goes here as background */ }
.top .right { /* image goes here as background */ }
.bottom .left { /* image goes here as background */ }
.bottom .right { /* image goes here as background */ }
Answered over 5 years ago by Ktash
  • Hi Ktash, Thanks for the suggestion, but I was aware of this solution and that's not what I'm looking for. As I have a designed bubble that I want to use. I've added the image to the question, so it becomes more visible. Cheers, Niels Niels R. over 5 years ago
  • Got it, I'll update my post then with techniques for that :) Ktash over 5 years ago
  • With the box shadow, you'll need to tweak the div version. You can use CSS3 box shadow as @Artistic Adobe suggested, but I like the description at http://www.css3.info/preview/box-shadow/ Ktash over 5 years ago
  • Oh, actually just looked at the examples given by the link @Artistic Adobe provided. Those are a lot more relevant for you and are well done. Ktash over 5 years ago
1
point

You need a lot of nested divs for this and float nearly everything (use overflow:hidden for shrink-wrapping)

First a wrapper for the whole lot.

Then a wrapper for the top section, which will have an expanding background image much wider than needed and contain two divs, one floated left one floated right which will carry the corners.

The middle section is again a wrapper round three divs, left, content and right - you could float these or use a three column negative border trick, but as the content has to make the whole lot grow, I'd say float left and right either side of the content. the left and right need very tall images as backgrounds.

The bottom section is similar to the top.

depending on browser support required you could probably do it much easier with display:table techniques.

to create images, make B and H very wide and center them, make D and F very tall

the corner pieces can be fixed.

I'd estimate half a day's work to get the code working cross browser and you're still going to have issues with too wide content or too narrow windows.

CSS3 might have some assistance for you if you can let go of the older browsers, and there's a tutorial here that is very similar...

http://www.stunningcss3.com/samples/stunningCSS_c2thru72.pdf

Answered over 5 years ago by Tony Crockford