Right Floating Callout : q « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. q

Right Floating Callout

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .callout {
  float: right;
  width: 200px;
  padding: 6px;
  margin: 10px 30px 10px 40px;
  position: relative;
  top: 10px;
  background-color: pink;
  border-left: 1px solid red;
  border-right: 1px solid red;
  border-top: 6px solid black;
  border-bottom: 6px solid black;
}
</style>
</head>
<body>
<span class="callout">Wraps under and over</span> 

</body>
</html>








Related examples in the same category

1.Inline quotation
2.q:before {content:open-quote;}
3.q:after {content:close-quote;}
4.q {quotes: '"' '"';}
5.quotes for quote
6.Create quote with float: right
7.Using classes and CSS overrides to create an alternate pull quote
8.Creating pull quotes in CSS
9.Pull Quote with font, border top bottom
10.Quote with thick border
11.Center Callout
12.'q' Example
13.'cite' provides a URL for reference information to a borrowed quotation