Page 1 of 1

Rectangle callout

Posted: Tue Aug 07, 2007 11:36 pm
by rash28
Hi,

How to create a rectangle callout in CSS

Code: Select all

ToolTextHover span{
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#9ff; color:#000;
    text-align: left;
font-size: 28px;
  font-weight: normal;
  color: #000;
I have code which has the border how to convert to rectangle callout from this

Posted: Tue Aug 07, 2007 11:50 pm
by matthijs
What do you mean with callout? Some sort of quote which is placed a bit outside the normal text/column?

Code: Select all

blockquote p { 
   display:block;
float:right;
width:250px;
margin:9px -100px 9px 30px;
font-size:16px;
line-height:22px;
 }

Posted: Wed Aug 08, 2007 12:01 am
by rash28
matthijs wrote:What do you mean with callout? Some sort of quote which is placed a bit outside the normal text/column?

Code: Select all

blockquote p { 
   display:block;
float:right;
width:250px;
margin:9px -100px 9px 30px;
font-size:16px;
line-height:22px;
 }
Rectangular box with the arrow as the auto shapes images used in microsoft word.

Posted: Wed Aug 08, 2007 12:11 am
by matthijs

Code: Select all

#element {
display:block;
width:250px;
background:url(bg-calloutimage.gif) no-repeat top left;
}

Posted: Wed Aug 08, 2007 12:32 am
by rash28
matthijs wrote:

Code: Select all

#element {
display:block;
width:250px;
background:url(bg-calloutimage.gif) no-repeat top left;
}
Without the background image is it not possible to create.

Rectangle with the arrow.

Posted: Wed Aug 08, 2007 2:41 am
by matthijs
Without the background image is it not possible to create.

Rectangle with the arrow.
Sorry, you have to be more clear. What is your question? What do you want to achieve exactly?