design : menu haut gauche (debut)
authordavin baragiotta <davin.baragiotta@u-db.(none)>
Wed, 6 Oct 2010 22:46:41 +0000 (18:46 -0400)
committerDavin BARAGIOTTA <davin.baragiotta@auf.org>
Wed, 6 Oct 2010 22:46:41 +0000 (18:46 -0400)
auf_savoirs_en_partage/media/css/global.css
auf_savoirs_en_partage/templates/container_base.html
auf_savoirs_en_partage/templates/menu.html

index 41fdcf8..92e07ed 100644 (file)
@@ -26,12 +26,12 @@ a:hover {color:#97012c;}
 a img {border: none;}
 abbr, acronym {border-bottom:.1em dotted;cursor:help;}
 
-h1{font-size:1em;margin:0 0 1em 0;}
-h2{font-size:1em;margin:0 0 1em 0;}
-h3{font-size:1em;margin:0 0 1em 0;}
-h4{font-size:1em;margin:0 0 1em 0;}
-h5{font-size:1em;margin:0 0 1em 0;}
-h6{font-size:1em;margin:0 0 1em 0;}
+h1 {font-size:1em;margin:0 0 1em 0;}
+h2 {font-size:1em;margin:0 0 1em 0;}
+h3 {font-size:1em;margin:0 0 1em 0;}
+h4 {font-size:1em;margin:0 0 1em 0;}
+h5 {font-size:1em;margin:0 0 1em 0;}
+h6 {font-size:1em;margin:0 0 1em 0;}
 
 em{font-style:italic;}
 strong{font-weight:bold;}
@@ -49,19 +49,25 @@ sup{font-size: smaller; vertical-align: 0.5em; line-height: 1px;}
 #fond {padding:0; margin:0; display:block; position:relative; width:100%; height:auto !important; height:100%; min-height:100%; background: url(../img/background-fond.jpg) no-repeat 50% 0; text-align:left;}
 #enrobage {padding:0; margin:0 auto; display:block; position:relative; width:960px; height:auto !important; height:100%; min-height:100%;}
 
-h1 { float:left; width:144px; height:110px; margin-top:25px; margin-left:20px; display:inline;}
+div.sous-menu { float:right; padding-top:1px; color:#fff; }
+div.sous-menu a { display:block; height:19px; padding:5px 10px 1px 10px; color:#fff; font-size:1.1em; text-decoration:none; float:right; white-space:nowrap; background-color:#4c4030;}
+div.sous-menu a:hover { text-decoration:underline;}
+div.sous-menu a.bout-gauche { background:#4c4030 url(../img/sous-menu-top-coin-gauche.gif) no-repeat 0 0; padding-right:5px;}
+div.sous-menu a.bout-droit {  background:#4c4030 url(../img/sous-menu-top-coin-droit.gif) no-repeat 100% 0; padding-left:5px;}
+div.sous-menu span { display:block; height:19px;float:right;padding:6px 2px 0 2px; background-color:#4c4030;}
+
+div.gauche { position:absolute; left:0; }
+div.droite {  }
+
+#logo { float:left; width:144px; height:110px; margin-top:45px; margin-left:20px; }
 h1 a { display:block; width:144px; height:110px; text-indent:-99999px; background:url(../img/logo-agence-universitaire-de-la-francophonie.gif) no-repeat 0 0;border:none; text-decoration:none;}
-#sous-menu { padding-top:1px; margin-right:0; color:#fff; display:inline; height:24px; width:420px; float:right;}
-#sous-menu a { display:block; height:19px; padding:5px 10px 1px 10px; color:#fff; font-size:1.1em; text-decoration:none; float:right; white-space:nowrap; background-color:#4c4030;}
-#sous-menu a:hover { text-decoration:underline;}
-#sous-menu a.bout-gauche { background:#4c4030 url(../img/sous-menu-top-coin-gauche.gif) no-repeat 0 0; padding-right:5px;}
-#sous-menu a.bout-droit {  background:#4c4030 url(../img/sous-menu-top-coin-droit.gif) no-repeat 100% 0; padding-left:5px;}
-#sous-menu span { display:block; height:19px;float:right;padding:6px 2px 0 2px; background-color:#4c4030;}
-h2.slogan { position:absolute; top:33px; left:240px; display:block; font-size:3.4em; color:#3a3125; padding:0;font-family:"Myriad Pro", "Lucida Grande", sans-serif; font-weight:normal; letter-spacing:-1px; line-height:0.8em; z-index:1000; }
+
+#sep-recherche {  }
+h2.slogan { position:absolute; top:53px; left:240px; font-size:3.4em; color:#3a3125; padding:0;font-family:"Myriad Pro", "Lucida Grande", sans-serif; font-weight:normal; letter-spacing:-1px; line-height:0.8em; z-index:1000; }
 h2.slogan span { display:block; margin: .7em 0 0; font-size:0.55em; color:#97012c; letter-spacing:normal; line-height: 1.1;}
-div.boite-recherche { z-index:1000; display:block; position:absolute; top:130px; left:240px; width:390px; height:90px; background: url(../img/recherche-background.gif) no-repeat 0 5px;}
-div.boite-recherche input { position:absolute; top:26px; left:10px; height:16px; margin-top:10px; width:300px; background:none; font-size:1.3em; border:none;}
-div.boite-recherche button { position:absolute; top:22px; right:17px; height:45px; width:45px; background:url(../img/recherche-button.gif) no-repeat 0 0; color:#97012c; border:none;}
+div.boite-recherche { z-index:1000; position:absolute; top:150px; left:240px; width:390px; height:90px; background: url(../img/recherche-background.gif) no-repeat 0 5px;}
+div.boite-recherche input { position:absolute; top:26px; left:10px; width:300px; height:16px; margin-top:10px; background:none; font-size:1.3em; border:none;}
+div.boite-recherche button { position:absolute; top:22px; right:17px; width:45px; height:45px; background:url(../img/recherche-button.gif) no-repeat 0 0; color:#97012c; border:none;}
 div.boite-recherche button:hover { background:url(../img/recherche-button-over.gif) no-repeat 0 0; cursor:pointer;}
 div.boite-recherche h3 { font-size:2em; font-weight:normal; letter-spacing:-1px; margin: 0;}
 div.boite-recherche h3 span { font-size:.6em; font-weight:normal; letter-spacing: normal;}
@@ -69,7 +75,15 @@ div.boite-recherche p { position:absolute; bottom:13px; left: 0; color:#3a3125;
 div.boite-recherche p a { color:#3a3125;}
 div.boite-recherche p a:hover { color:#97012c; text-decoration:none;}
 
-#contenu { width:744px; margin:100px 0px 50px 0px; padding:0; display:inline; float:left;background:url(../img/contenu-bkg-middle.png) repeat-y 0 0; }
+#col-menu { clear:right; float:right; width:190px; margin:30px 20px 0px 0px; background: url(../img/col-droite-background.png) repeat-x top center; font-size:1.2em; line-height:1.2; }
+#col-menu img.bottom { margin-bottom:-7px; }
+#col-menu h4 { padding: 0 25px; margin-bottom:0.4em; font-size:1.8em; font-weight:normal; letter-spacing:-1px; }
+#col-menu ul li { margin:2px 0; padding:0; }
+#col-menu a { margin:0; padding:0; text-decoration:none; color:black; }
+#col-menu a:hover { cursor:pointer; text-decoration:underline; }
+#col-menu .actif a { color:#97012c; font-weight:bold; }
+
+#contenu { width:744px; margin:100px 0px 50px 0px; padding:0; float:left;background:url(../img/contenu-bkg-middle.png) repeat-y 0 0; }
 #tabs { margin-left: 8px; margin-right: 8px; }
 #contenu h4 { padding: 0 25px; margin-bottom:0.4em; font-size:2.2em; font-weight:normal; letter-spacing:-1px; }
 #contenu .zone-texte {padding: 0 25px; font-size: 1.2em; min-height: 375px;}
@@ -89,8 +103,6 @@ div.boite-recherche p a:hover { color:#97012c; text-decoration:none;}
 
 .contenu-wrapper { padding:0 0 0 25px; }
 
-
-
 ul a { text-decoration:none; }
 ul a:hover { text-decoration:underline; }
 
@@ -124,14 +136,6 @@ ul.sous-menu li { display:inline; padding:0px 10px 0px 0px; font-size: 1.1em; }
 .resultatPages span a span.lien-texte span { color:#97012c; text-decoration: none; font-weight: normal;}
 .resultatPages span a:hover span.lien-texte { text-decoration:none;}
 
-#col-droite { clear:right; float:right; display:inline; width:190px; margin-right:0; margin-bottom:50px; background: url(../img/col-droite-background.png) repeat-x top center; }
-#col-droite img.bottom { margin-bottom:-7px; }
-#col-droite ul { margin-top:30px; margin-left:20px; line-height:1.2; }
-#col-droite ul li { margin:2px 0; padding:0; }
-#col-droite ul li a { margin:0; padding:0; font-size:1.2em; color:#3a3125; text-decoration:none; }
-#col-droite ul li a:hover { cursor:pointer; text-decoration:underline; }
-#col-droite ul li.actif a { color:#97012c; font-weight:bold; }
-
 /* Divers */
 
 .clear { clear:both!important; display:block!important; width:0!important; height:0!important; margin:0!important; padding:0!important; visibility:hidden!important;}
index 5541f2a..19af797 100644 (file)
     <body>
         <div id="fond">
             <div id="enrobage" class="clearfix">
-                <h1>
-                    <a href="http://www.auf.org" title="Agence universitaire de la Francophonie">Agence universitaire de la Francophonie</a>
-                </h1>
-
-                <div id="sous-menu" class="clearfix">
+                <div class="clearfix sous-menu gauche">
+                    <a href="" class="bout-droit">Actualités</a>
+                    <span>|</span>
+                    <a href="">Agenda</a>
+                    <span>|</span>
+                    <a href="">Sites</a>
+                    <span>|</span>
+                    <a href="">Ressources</a>
+                    <span>|</span>
+                    <a href="">Chercheurs</a>
+                    <span>|</span>
+                    <a href="{% url savoirs.views.index %}" class="bout-gauche">Accueil</a>
+                </div>
+                
+                <div class="clearfix sous-menu droite">
                     {% if user.is_authenticated %}
                     <a href="{% url django.contrib.auth.views.logout %}" class="bout-droit">Déconnexion</a>
                     {% else %}
                     <span>|</span>
                     <a href="{% url savoirs.views.nous_contacter %}">Nous contacter</a>
                     <span>|</span>
-                    <a href="{% url savoirs.views.a_propos %}">À propos de</a>
-                    <span>|</span>
-                    <a href="{% url savoirs.views.index %}" class="bout-gauche">Accueil</a>
+                    <a href="{% url savoirs.views.a_propos %}" class="bout-gauche">À propos de</a>
                 </div>
-
-                <div id="col-droite">
-                    {% load sep_menu %}
-                    {% sep_menu %}
-                    <img src="{{ MEDIA_URL }}img/col-droite-background-bottom.png" width="190" height="8" alt="bottom" align="bottom" class="bottom" />
+                
+                <div id="logo">
+                    <h1>
+                        <a href="http://www.auf.org" title="Agence universitaire de la Francophonie">Agence universitaire de la Francophonie</a>
+                    </h1>
                 </div>
 
-                <div>
+                <div id="sep-recherche">
                     <h2 class="slogan">Savoirs en partage 
-                        <span>Le portail des ressources scientifiques
-                            <br />et pédagogiques de l'AUF</span>
+                        <span>Le portail des ressources scientifiques<br />et pédagogiques de l'AUF</span>
                     </h2>
 
                     <div class="boite-recherche">
-                        <h3>Recherche <span>dans tous les sites reliés à l'AUF</span></h3>
+                        <h3>Recherche <span>dans les ressources scientifiques</span></h3>
 
                         <form name="fRecherche" id="fRecherche" action="{% url savoirs.views.recherche %}" method="get">
                             <input name="q" id="recherche" type="text" value="{{ q|default:"" }}" />
                         </p>
                     </div>
                 </div>
+
+                <div id="col-menu">
+                    {% load sep_menu %}
+                    {% sep_menu %}
+                    <img src="{{ MEDIA_URL }}img/col-droite-background-bottom.png" width="190" height="8" alt="bottom" align="bottom" class="bottom" />
+                </div>
                 
                 <div id="contenu" class="clearfix">
                     <img src="{{ MEDIA_URL }}img/contenu-bkg-top.png" width="744" height="10" alt="top" align="top" class="top" />
index cc971b2..3ab0a77 100644 (file)
@@ -1,6 +1,35 @@
+{% comment %}
+<h4><a href="">Chercheurs</a></h4>
+<ul>
+    <li><a href="">Répertoire</a></li>
+    <li><a href="">Inscription</a></li>
+    <li><a href="">Espace chercheur</a></li>
+</ul>
+
+<h4><a href="">Ressources documentaires</a></h4>
+<ul>
+    <li><a href="">Rechercher un contenu scientifique</a></li>
+</ul>
+
+<h4><a href="">Sites</a></h4>
+<ul>
+    <li><a href="">Sitothèque</a></li>
+    <li><a href="">Cours en ligne</a></li>
+    <li><a href="">Bibliothèques</a></li>
+    <li><a href="">Revues</a></li>
+</ul>
+
+<h4><a href="">Agenda</a></h4>
+<ul>
+    <li><a href="">Colloques</a></li>
+    <li><a href="">Conférences</a></li>
+    <li><a href="">Appels à contribution</a></li>
+</ul>
+{% endcomment %}
+
+<h4><a href="">Disciplines</a></h4>
 <ul>
     {% for d in disciplines %}
     <li><a href="{% url savoirs.views.avancee %}?type=avancee&operator=or&subject={{ d.nom }}">{{ d.nom }}</a></li>
     {% endfor %}
 </ul>
-