Demarrage integration HTML-CSS
authorRaphael Velt <raph.velt@gmail.com>
Tue, 25 Oct 2011 18:14:00 +0200
changeset 210 76a76267a1c1
parent 209 fd567adb774e
child 211 7d0146012cd5
Demarrage integration HTML-CSS
.DS_Store
crea/.DS_Store
crea/inte-crea/.DS_Store
crea/inte-crea/css/ldt-commun.css
crea/inte-crea/home.html
crea/inte-crea/img/annot_icon.png
crea/inte-crea/img/bulle_annot.png
crea/inte-crea/img/main_bg.png
crea/inte-crea/img/placeholder.png
crea/inte-crea/img/search_icon.png
crea/inte-crea/img/sep_title.png
Binary file .DS_Store has changed
Binary file crea/.DS_Store has changed
Binary file crea/inte-crea/.DS_Store has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/css/ldt-commun.css	Tue Oct 25 18:14:00 2011 +0200
@@ -0,0 +1,158 @@
+/* Browser-reset CSS */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+table {
+    border-collapse: separate; border-spacing: 0;
+}
+
+body {
+	font-family: "DIN-Light", Helvetica, Arial, sans-serif; color: #484848; background: url(../img/main_bg.png) repeat-x #f8f6f7;
+}
+
+/* usual selectors */
+
+a {
+    color: #484848; text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+b {
+    font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-weight: 800;
+}
+
+h2 {
+    font-size: 21px; color: #0068c4; margin: 4px 2px;
+}
+
+p {
+    margin: 2px 0; font-size: 13px;
+}
+
+/* Grid widths */
+
+.full_width {
+    width: 960px;
+}
+
+.cols_2 {
+    width: 140px; margin: 10px; /* Total : 160px */
+}
+
+.cols_4 {
+    width: 300px; margin: 10px; /* Total : 320px */
+}
+
+/* Frequently-used classes */
+
+div.pad {
+    padding: 10px;
+}
+
+ul.floatlist {
+    float: left; list-style: none;
+}
+
+.floatlist li {
+    float: left;
+}
+
+.fl {
+    float: left;
+}
+
+.clear {
+    clear: both;
+}
+
+.li_h2 {
+    width: 100%; border-bottom: 1px solid #484848; margin: 5px 0;
+}
+
+a.under {
+    text-decoration: underline;
+}
+
+a.under:hover {
+    text-decoration: none;
+}
+
+a.pink {
+    color: #ff3b77;
+}
+
+.bulle_annot {
+    float: right; width: 17px; height: 10px; font-size: 9px; margin: 3px 0 0; padding: 0 0 3px 11px; color: #ffffff; background: url(../img/bulle_annot.png); text-align: center; overflow: hidden;
+}
+
+/* General container */
+
+#general_container {
+    width: 960px; margin: 0 auto;
+}
+
+/* Barre de titre */
+
+#title_bar {
+    height: 50px; font-size: 22px;
+}
+
+#title_bar a {
+    color: #ffffff;
+}
+
+#title_bar li {
+    height: 38px; margin: 0; padding: 10px 20px 0; background: url(../img/sep_title.png) right no-repeat;
+}
+
+li#li_h1 {
+    padding-left: 0; width: 210px;
+}
+
+#form_search {
+    position: relative; width: 378px; margin: 2px 0; height: 20px; border: 1px solid #000000; background: url(../img/search_icon.png) left no-repeat #ffffff;
+}
+
+#search_text {
+    position: absolute; top: 0; left: 25px; width: 250px; height: 20px; border: 0; padding: 0;
+}
+
+#search_submit {
+    position: absolute; top: 0; right: 0; height: 16px; width: 100px; font-size: 12px; color: #ffffff; background: #0068c4; border: 0; margin: 2px; padding: 0; text-align: center;
+}
+
+#annot_icon {
+    margin: 3px 10px 0 0;
+}
+
+/* Footer */
+
+#footer {
+    float: right; list-style: none; border-top: 1px solid #484848; margin: 5px 0 0; padding: 10px;
+}
+
+#footer li {
+    font-size: 12px; float: right; padding: 5px 20px; border-right: 1px solid #484848;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/home.html	Tue Oct 25 18:14:00 2011 +0200
@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Plateforme LDT : Home</title>
+    <link rel="stylesheet" href="css/ldt-commun.css" type="text-css" />
+</head>
+<body>
+
+    <div id="general_container">
+
+<!-- BARRE DE TITRE COMMUNE -->
+
+        <ul class="floatlist" id="title_bar">
+            <li id="li_h1">
+                <h1><a href="#"><b>Lignes</b> de temps</a></h1>
+            </li>
+            <li id="li_search">
+                <form id="form_search">
+                    <input id="search_text" name="q" value="" />
+                    <input id="search_submit" type="submit" value="Rechercher" />
+                </form>
+            <li id="li_annotation">
+                <div class="fl">
+                    <a href="#"><img src="img/annot_icon.png" id="annot_icon" /></a>
+                </div>
+                <div class="fl">
+                    <a href="#">Annoter</a>
+                </div>
+            </li>
+            <li id="li_connexion">
+                <a href="#">Connexion</a>
+            </li>
+        </ul>
+
+<!-- DERNIERS MEDIAS -->
+
+        <ul class="floatlist full_width" id="derniers_medias">
+            <li class="li_h2">
+                <h2>Derniers médias</h2>
+            </li>
+            <li class="cols_4">
+                <img src="img/placeholder.png" width="300" height="225" />
+                <div class="bulle_annot">250</div>
+                <p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
+                <p>par <a class="under" href="#">IRI</a> | 1h30</p>
+            </li>
+            <li class="cols_4">
+                <img src="img/placeholder.png" width="300" height="225" />
+                <div class="bulle_annot">250</div>
+                <p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
+                <p>par <a class="under" href="#">IRI</a> | 1h30</p>
+            </li>
+            <li class="cols_4">
+                <img src="img/placeholder.png" width="300" height="225" />
+                <div class="bulle_annot">250</div>
+                <p><a href="#"><b>ENMI 2011 - La confiance : Bernard Stiegler</b></a></p>
+                <p>par <a class="under" href="#">IRI</a> | 1h30</p>
+            </li>
+        </ul>
+
+<!-- FOOTER COMMUN -->
+
+        <ul class="full_width" id="footer">
+            <li>
+                <a href="#">V.01.15</a>
+            </li>
+            <li>
+                <a href="#"> © &nbsp;2011 IRI</a>
+            </li>
+            <li>
+                <a href="#">Contact</a>
+            </li>
+            <li>
+                <a href="#">A propos</a>
+            </li>
+        </ul>
+        <div class="clear"></div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
Binary file crea/inte-crea/img/annot_icon.png has changed
Binary file crea/inte-crea/img/bulle_annot.png has changed
Binary file crea/inte-crea/img/main_bg.png has changed
Binary file crea/inte-crea/img/placeholder.png has changed
Binary file crea/inte-crea/img/search_icon.png has changed
Binary file crea/inte-crea/img/sep_title.png has changed