Skip to content

Instantly share code, notes, and snippets.

@nhoizey

nhoizey/index.html

Created September 13, 2011 12:47
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save nhoizey/1213727 to your computer and use it in GitHub Desktop.
Save nhoizey/1213727 to your computer and use it in GitHub Desktop.
Download ZIP
Un affichage de numéro vert avec Microformat et mise en forme en CSS
Raw
index.html
<!-- Live demo : http://bl.ocks.org/1213727 -->
<html>
<head>
<title>Un affichage de numéro vert avec Microformat et mise en forme en CSS</title>
<link rel="stylesheet" media="all" href="numero_vert.css" type="text/css" />
</head>
<body>
<span class="vcard numerovert">
<span class="fn">Nom de la société</span>
<span class="tel">
<span class="type"><abbr title="Numéro">Nº</abbr> Vert</span><span class="value">0&nbsp;800&nbsp;123&nbsp;456</span>
</span>
</span>
</body>
</html>
Raw
numero_vert.css
body {
margin: 1em;
}
.numerovert {
font-family: sans-serif;
display: inline-block;
font-weight: bold;
}
.numerovert .fn {
display: none;
}
.numerovert .type {
color: white;
background: green;
padding: 0 .4em;
margin: 0;
border: 1px solid green;
-webkit-border-top-left-radius: .5em;
-webkit-border-bottom-left-radius: .5em;
-moz-border-radius-topleft: .5em;
-moz-border-radius-bottomleft: .5em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
}
.numerovert .value {
color: green;
padding: 0 .4em;
margin: 0;
border: 1px solid green;
-webkit-border-top-right-radius: .5em;
-webkit-border-bottom-right-radius: .5em;
-moz-border-radius-topright: .5em;
-moz-border-radius-bottomright: .5em;
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
}
@nhoizey
Copy link
Author

nhoizey commented Sep 13, 2011

  • espaces insécables sur une suggestion de @Nissone
  • arrondis en em sur une suggestion de @lespacedunmatin
  • abbr et bon caractère º sur une suggestion de @htmlzg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment