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

IGEM Bordeaux 2015