Rectangle callout

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
rash28
Forum Commoner
Posts: 38
Joined: Wed Aug 01, 2007 1:21 am

Rectangle callout

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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;
 }
rash28
Forum Commoner
Posts: 38
Joined: Wed Aug 01, 2007 1:21 am

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Code: Select all

#element {
display:block;
width:250px;
background:url(bg-calloutimage.gif) no-repeat top left;
}
rash28
Forum Commoner
Posts: 38
Joined: Wed Aug 01, 2007 1:21 am

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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?
Post Reply