Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <!-- Chargement des feuilles de style BluePrint. -->
- <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
- <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
- <!-- Chargement des librairies JavaScript. -->
- <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
- <script type="text/javascript" src="jquery.corner.js"></script>
- <script language="javascript">
- $(function()
- {
- // We create rounded corners for all divisions that have the attribute "box".
- $("[box]").corner("10px");
- // We create the rounded border.
- $('div.inner').corner("round 8px");
- $('div.outer').corner("round 10px");
- });
- </script>
- <style type="text/css">
- .padding10 { padding:10px; }
- .padding11 { padding:11px; }
- .padding15 { padding:15px; }
- .padding20 { padding:20px; }
- .border1 { border-width:1px; border-style:solid; border-color:#000000; }
- .bigdiv { width:920px; }
- .gradient {
- background-image: url("sectionLrgBack.jpg");
- background-repeat: no-repeat;
- color: #000000;
- width: 100%;
- text-align: left;
- }
- .green { background-color:#BDFFB2; }
- .blue { background-color:#B2E3FF; }
- .orange { background-color:#FFAE80; }
- div.outer {
- float:left;
- background: #c82;
- padding-left:5px;
- padding-right:5px;
- padding-top:4px;
- padding-bottom:5px;
- width:940px;
- }
- div.inner {
- padding-left: 30px;
- padding-right: 30px;
- padding-top: 10px;
- padding-bottom: 10px;
- margin-left:5px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>Introduction</h1>
- <div class="span-24 last">
- <p>This page shows how to add rounded corners with BluePrint and JQuery.</p>
- <ul>
- <li>BluePrint: http://blueprintcss.org</li>
- <li>JQuery: http://jquery.com/</li>
- <li>JQuery plugin for rounded corners: http://jquery.malsup.com/corner/</li>
- </ul>
- </div>
- <h1>Using the JQuery Plugin to create rounded corners</h1>
- <div box="yes" class="orange bigdiv padding15 large clear">
- This is not a "BluePrint division".<br/>
- Total width = width + padding-right + padding-left = 920+15+15 = 950px.<br/>
- Please note the use of the class "clear": The current division will place itself underneath all divisions previously declared in the document.
- </div>
- <h1>Using the JQuery Plugin with BluePrint classes</h1>
- <h2>Imbricated divisions</h2>
- <div class="span-12">
- <div box="yes" class="green padding15 large">
- Rounded borders division, inside a BluePrint's division.
- </div>
- </div>
- <div class="span-12 last">
- <div box="yes" class="blue padding15 large">
- Rounded borders division, inside a BluePrint's division.
- </div>
- </div>
- <h2>Rouded corners on BluPrint divisions</h2>
- <div box="yes" class="orange padding20 span-23">
- <b>BluePrint outer division (roange):</b>
- <ul>
- <li>padding-left=20px</li>
- <li>padding-right=20px</li>
- <li>Nomimal width=910px (span-23)</li>
- <li>Total width of the outer BluePrint division=910+20+20=950px</li>
- </ul>
- <p>And:</p>
- <b>Inner divisions (green and blue):</b>
- <ul>
- <li>Gap between the 2 inner BluePrint divisions (the green and the blue): 10px</li>
- <li>Width of the inner green BluePrint division: 450px.</li>
- <li>Width of the inner blue BluePrint division: 450px.</li>
- <li>Total width: 450 + 450 + 10 = 910px (that is: The size of the outer division - span-23)</li>
- </ul>
- <div box="yes" class="span-11 padding10 green">
- <b>BluePrint inner left division.</b>
- <ul>
- <li>padding-left=10px</li>
- <li>padding-right=10px</li>
- <li>Nomimal width=430px (that is: span-11)</li>
- <li>Total width=430+10+10=450px</li>
- </ul>
- </div>
- <div box="yes" class="span-11 padding10 blue last">
- <b>BluePrint inner right division.</b>
- <ul>
- <li>padding-left=10px</li>
- <li>padding-right=10px</li>
- <li>Nomimal width=430px (that is: span-11)</li>
- <li>Total width=430+10+10=450px</li>
- <li>Trick: Make sure to set the CSS class "last"!</li>
- </ul>
- </div>
- </div>
- <h1>Using JQuery to create rounded borders on BluePrint's divisions</h1>
- <div class="outer">
- <div class="inner span-22 orange">
- <b>Outer division:</b>
- <ul>
- <li>Total width = width + paddin-left + padding-right = 940 + 5 + 5 (that is: span-24)</li>
- </ul>
- <b>BluePrint inner division:</b>
- <ul>
- <li>Total width = span-22 + paddin-left + padding-right = 870 + 30 + 30 = 940px</li>
- <li>Trick: BluePrint's class defines a right margin of 10px. But, there is nothing to the right of the division. Therefore, this space is not included in the calcul of the total width.</li>
- <li>Position of the right border: margin-left + Total width = 5 + 940 = 945px (from the left).
- <li>Position of the left border: margin-left = 5px (from the left).</li>
- </ul>
- </div>
- </div>
- <hr class="space"/>
- </div> <!-- .container -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement