Difference between revisions of "Team:Bordeaux/Template:HomeTop"
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | nav | ||
+ | { | ||
+ | |||
+ | |||
+ | height : 600px; | ||
+ | width : 800px; | ||
+ | position : absolute; | ||
+ | padding-top : 10px; | ||
+ | padding-left : 50px; | ||
+ | background : url('http://image.noelshack.com/fichiers/2015/24/1433938526-raisin.png') no-repeat ; | ||
+ | |||
+ | background-size : 800px 50px; | ||
+ | } | ||
+ | #menu, #menu ul /* Liste */ | ||
+ | |||
+ | { | ||
+ | |||
+ | padding : 0; /* pas de marge intérieure */ | ||
+ | |||
+ | margin : 0; /* ni extérieure */ | ||
+ | |||
+ | list-style : none; /* on supprime le style par défaut de la liste */ | ||
+ | |||
+ | line-height : 21px; /* on définit une hauteur pour chaque élément */ | ||
+ | |||
+ | text-align : center; /* on centre le texte qui se trouve dans la liste */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #menu /* Ensemble du menu */ | ||
+ | |||
+ | { | ||
+ | |||
+ | font-weight : bold; /* on met le texte en gras */ | ||
+ | |||
+ | font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ | ||
+ | |||
+ | font-size : 12px; /* hauteur du texte : 12 pixels */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #menu a /* Contenu des listes */ | ||
+ | |||
+ | { | ||
+ | |||
+ | display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ | ||
+ | |||
+ | padding : 0; /* aucune marge intérieure */ | ||
+ | |||
+ | |||
+ | |||
+ | color : #000; /* couleur du texte */ | ||
+ | |||
+ | text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ | ||
+ | |||
+ | width : 144px; /* largeur */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #menu li /* Elements des listes */ | ||
+ | |||
+ | { | ||
+ | |||
+ | float : left; | ||
+ | |||
+ | /* pour IE qui ne reconnaît pas "transparent" */ | ||
+ | |||
+ | border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* IE ne reconnaissant pas le sélecteur ">" */ | ||
+ | |||
+ | html>body #menu li | ||
+ | |||
+ | { | ||
+ | |||
+ | border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #menu li ul /* Sous-listes */ | ||
+ | |||
+ | { | ||
+ | |||
+ | position: absolute; /* Position absolue */ | ||
+ | |||
+ | width: 144px; /* Largeur des sous-listes */ | ||
+ | |||
+ | left: -999em; /* Hop, on envoie loin du champ de vision */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #menu li ul li /* Éléments de sous-listes */ | ||
+ | |||
+ | { | ||
+ | |||
+ | /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ | ||
+ | |||
+ | border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* IE ne reconnaissant pas le sélecteur ">" */ | ||
+ | |||
+ | html>body #menu li ul li | ||
+ | |||
+ | { | ||
+ | |||
+ | border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #menu li ul ul | ||
+ | |||
+ | { | ||
+ | |||
+ | margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ | ||
+ | |||
+ | /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ | ||
+ | |||
+ | border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */ | ||
+ | |||
+ | html>body #menu li ul ul | ||
+ | |||
+ | { | ||
+ | |||
+ | border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ | ||
+ | |||
+ | } | ||
+ | #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ | ||
+ | |||
+ | { | ||
+ | |||
+ | left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ | ||
+ | |||
+ | { | ||
+ | |||
+ | left: auto; /* Repositionnement normal */ | ||
+ | |||
+ | min-height: 0; /* Corrige un bug sous IE */ | ||
+ | |||
+ | } | ||
+ | </style> | ||
+ | <script type="text/javascript"> | ||
+ | sfHover = function() { | ||
+ | |||
+ | var sfEls = document.getElementById("menu").getElementsByTagName("LI"); | ||
+ | |||
+ | for (var i=0; i<sfEls.length; i++) { | ||
+ | |||
+ | sfEls[i].onmouseover=function() { | ||
+ | |||
+ | this.className+=" sfhover"; | ||
+ | |||
+ | } | ||
+ | |||
+ | sfEls[i].onmouseout=function() { | ||
+ | |||
+ | this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | if (window.attachEvent) window.attachEvent("onload", sfHover); | ||
+ | </script> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | <body> | ||
+ | |||
+ | <nav> | ||
+ | <ul id="menu"> | ||
+ | |||
+ | <li> | ||
+ | <a href="#">Home</a> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="#">Overview</a> | ||
+ | <ul> | ||
+ | <li><a href="#">The Problem</a></li> | ||
+ | <li><a href="#">Our Solution</a></li> | ||
+ | <li><a href="#">The Results</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="#">People</a> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <a href="#">Team Members</a> | ||
+ | <a href="#">Collaborations</a></li> | ||
+ | <a href="#">Media</a></li> | ||
+ | |||
+ | |||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="#">Policy & Practices</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Popularization</a></li> | ||
+ | <li><a href="#">Ethics</a></li> | ||
+ | <li><a href="#">Safety</a></li> | ||
+ | <li><a href="#">Philosophy & Economy</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#">Achievements</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Medals</a></li> | ||
+ | <li><a href="#">Biobrick</a></li> | ||
+ | <li><a href="#">Protocols</a></li> | ||
+ | <li><a href="#">Notebook </a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | </nav> | ||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
<section id="top-section-hero" style="background-image: url('http://www.whats-your-sign.com/images/GrapevineTattooIdeasAndMeanings.jpg');"> | <section id="top-section-hero" style="background-image: url('http://www.whats-your-sign.com/images/GrapevineTattooIdeasAndMeanings.jpg');"> | ||
Revision as of 12:28, 10 June 2015