JavaScript and client side scripting.
Moderator: General Moderators
-
rash28
- Forum Commoner
- Posts: 38
- Joined: Wed Aug 01, 2007 1:21 am
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?