By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,745 Members | 1,897 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,745 IT Pros & Developers. It's quick & easy.

blockquote in a speech buuble?

P: n/a
hi,

can anyone tell me how to use CSS, whether using blockquote or a CSS
class, to allow me to show quotes in a speech bubble?

thanks.

Oct 11 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Carter Brandon schrieb:
can anyone tell me how to use CSS, whether using blockquote or a CSS
class, to allow me to show quotes in a speech bubble?
What is a speech bubble?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Oct 11 '06 #2

P: n/a
Johannes Koch <ko**@w3development.dewrites:
Carter Brandon schrieb:
can anyone tell me how to use CSS, whether using blockquote or a CSS
class, to allow me to show quotes in a speech bubble?

What is a speech bubble?
_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk
Oct 11 '06 #3

P: n/a
Jón Fairbairn schrieb:
Johannes Koch <ko**@w3development.dewrites:
>What is a speech bubble?
_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \
I wondered whether the OP really meant this.
Which looks like the sort of thing that could be done with a
border and some images covering up the corners.
and the little triangle pointing to the speaker's mouth.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Oct 11 '06 #4

P: n/a
"Johannes Koch" <ko**@w3development.dewrote in message
news:45***********************@authen.yellow.readf reenews.net...
Jn Fairbairn schrieb:
>Johannes Koch <ko**@w3development.dewrites:
>>What is a speech bubble?
_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

I wondered whether the OP really meant this.
>Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

and the little triangle pointing to the speaker's mouth.
Can you do backgrounds on the pseudo elements before and after?

If so you might be able to do a fixed-width, variable height speach bubble,
with square edges and rounded corners...

300px wide example...

blockquote {width: 300px; border-left: 1px solid black; border-right: 1px
solid black}
blockquote:before {width: 300px; height: 10px; background:
url("300x10pxImageOfRoundedCornersAndTopBorder.png ")}
blockquote:after {width: 300px; height: 20px; background:
url("300x20pxImageOfRoundedCornersTriangleBitAndBo ttomBorder.png")}

However, I suspect that backgrounds aren't supported in the before and after
pseudo elements. If not, these might be a good addition to a future css
spec.

Martin
Oct 16 '06 #5

P: n/a
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote in message
news:12*************@corp.supernews.com...
"Johannes Koch" <ko**@w3development.dewrote in message
news:45***********************@authen.yellow.readf reenews.net...
>Jn Fairbairn schrieb:
>>Johannes Koch <ko**@w3development.dewrites:
What is a speech bubble?
_______
/ \
| this is |
\ ______/
//
'
O_/
/|
|
/ \

I wondered whether the OP really meant this.
>>Which looks like the sort of thing that could be done with a
border and some images covering up the corners.

and the little triangle pointing to the speaker's mouth.

Can you do backgrounds on the pseudo elements before and after?

If so you might be able to do a fixed-width, variable height speach
bubble, with square edges and rounded corners...

300px wide example...

blockquote {width: 300px; border-left: 1px solid black; border-right: 1px
solid black}
blockquote:before {width: 300px; height: 10px; background:
url("300x10pxImageOfRoundedCornersAndTopBorder.png ")}
blockquote:after {width: 300px; height: 20px; background:
url("300x20pxImageOfRoundedCornersTriangleBitAndBo ttomBorder.png")}

However, I suspect that backgrounds aren't supported in the before and
after pseudo elements. If not, these might be a good addition to a future
css spec.

Martin
A little experimentation, and it appears to work in firefox 2 RC 2 (but
unsuprisingly, not IE6) with a slight modification

You need to add this to the css off the pseudo elements

content: ''; display: block;

Martin
Oct 16 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.