<!-- Masque la DTD stricte à IE, sinon le script du "tableau" ne marche pas -->
<!-- ne sert qu'à Gecko-->
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { /* définition de la page */
margin:0 ; /* marge extérieure */
padding:0 }/* marge intérieure */
.container {/* encadre le tableau */
width:100% ; /* largeur du tableau */
height:1% ; /* hauteur minimale du tableau */
margin:0 ; padding:0 ; /* marges intérieures et extérieures du tableau */
border:3px solid black ;/* bordure du tableau */
background-color:#E7E4E4} /* couleur fond du tableau (colonne droite en pratique) */
.gauche { /* définition de la colonne gauche */
float:left ; /* flotte à gauche */
width:30% ; /* largeur : 24% de .container */
background-color:#FFD5AA ; /* couleur de la colonne */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding:0} /* marges */
.centre {/* définition de la colonne centre */
float:left ; /* flotte à gauche */
width:50% ; /* largeur : 50% de .container */
height:100% ; /* hauteur : 100% du .container */
margin:0;padding:0 ; /* marges */
background-color:#CCCCCC ; /* couleur de la colonne */
border-left:3px solid black ; /* bordure gauche */
border-right:3px solid black} /* bordure droite */
.droite { /* colonne droite */
float:left ; /* flotte à gauche */
width:23% ; /* largeur : 23% de .container */
height:100% ; /* hauteur : 100% du .container */
margin:0 ; padding-left:20px }/* marges */
.spacer { /* force au retour à la ligne après des fenêtres float */
clear:both}
</style>
</head>
<body>
<p>Flux normal de la page, avant le "tableau" CSS</p>
<div class="container"> <!-- début du tableau -->
<div class="gauche">
<p>Colonne de gauche</p>
</div>
<div class="centre">
<p>Colonne du centre<p>
<p>La colonne la plus longue n'a pas d'importance dans ce script</p>
<p></p>
<p></p>
</div>
<div class="droite">
<p>Colonne de droite</p>
</div>
</div> <!-- fin container -->
<div class="spacer"></div>
<p>Flux normal de la page APRES le tableau CSS</p>
</body>
</html>
xasxaxaxaHetotototo: ;
Output
This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account
Dismiss xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |