CSS - Menu de navigation DIV pour remplacer l'ancien menu TABLE, problème de taille d'élément

Question

J'ai pris un peu de temps ces dernières semaines pour mettre à jour mes connaissances en HTML/CSS. En conséquence, j'apprends à réaliser des mises en page que j'aurais précédemment faites avec des tables, avec des DIVs à la place.

Pour la plupart, ça va bien, mais j'ai rencontré quelques obstacles en essayant de reproduire un style de menu de navigation qui utilise le code suivant comme une table :

HTML :

            home
             
            about
             
            music
             
            geeking
             
            contact

CSS :

div.navigation{
    text-align: center;
    color: hsla(200,50%,45%,0.6);
    margin: auto;
    font-family: monospace;
    letter-spacing: 2px;
    position: relative;
    top: -13px;
    margin: 20px auto 20px auto;
    width: 60%;
}

.navigation table{
    height: 70px;
}

th{
text-align: center;
color: hsla(180,50%,45%,0.4);
font-size: 1.1em;
}

table{
border-collapse: collapse;
margin: auto;
margin-top: 0px;
}

table,th{
border: 0px solid black;
padding: 5px;
}    

.navigation a{
    text-decoration: none;
    color: hsla(200,50%,45%,0.6);
    background-color: transparent, white;
    text-transform: lowercase;
    font-size: 1.2em;
    -webkit-transition: all 0.4s linear; 
    -moz-transition: all 0.4s linear; 
    -o-transition: all 0.4s linear; 
    -ms-transition: all 0.4s linear; 
    transition: all 0.4s linear;
    letter-spacing: 0px;
    width: 50px;
    height: 100px;
}

.navigation a:hover{
    color: white;
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    -ms-transition: all 0.2s linear; 
    transition: all 0.2s linear;
    width: auto;
    height: auto;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow:    0 0 20px hsla(180,50%,40%,.6),
                    0 0 40px hsla(200,50%,45%,.8);
}

Vous pouvez voir cette page en direct ici : http://benjaminsherwood.co.uk/index.php Pour être clair - voici le comportement que je souhaiterais pour mon menu - qu'un élément survolé augmente en taille et en espacement des lettres, et pousse les autres éléments vers la gauche et la droite, tout en restant sur le même plan vertical. C'est le plan vertical sur lequel je suis bloqué.

Voici le code que j'utilise pour essayer de créer le même menu avec des DIVs :

HTML :

        Home
        About
        Music
        Geeking
        Contact

CSS :

.menu{
    position: fixed;
    left:0; 
    right:0; 
    top:0;
    margin: auto;
    text-transform: lowercase;
    text-align: center;
}

.navigation table{
    height: 70px;
}

.menu li{
    list-style: none outside none;
    display: inline;
}

.menu a{
    text-decoration: none;
    color: hsla(200,50%,45%,0.6);
    font-size:  1.2em;
    letter-spacing: 0px;
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    transition: all 0.4s ease;
}

.menu a:hover{
    color: white;
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 2px;

    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    -ms-transition: all 0.2s ease; 
    transition: all 0.2s ease;

    text-shadow:    0 0 20px hsla(180,50%,40%,.6),
            0 0 40px hsla(200,50%,45%,.8);
}

Vous pouvez voir cette page en direct ici : http://benjaminsherwood.co.uk/test.php

J'ai essayé de résoudre ce problème tout le week-end - j'ai cherché partout une solution, et appliqué différentes méthodes pour créer cette mise en page de menu horizontal, et j'en suis même venu à demander à un ami qui est plutôt bon en CSS - mais, peu importe ce que j'essaie, je ne parviens pas à comprendre comment obtenir le même comportement du layout basé sur les DIVs que sur le layout basé sur les TABLES.

C'est presque comme si le layout basé sur les TABLES appliquait les changements à l'élément à partir du centre de l'élément TD, tandis que le layout basé sur les DIVs l'applique à partir du coin supérieur. En conséquence, le layout basé sur les DIVs semble seulement grandir vers le bas, au lieu de se propager, et par conséquent, les éléments de chaque côté ne s'écoulent pas vers la gauche et la droite sur le même plan horizontal, comme c'est le cas avec le layout basé sur les TABLES, mais sont plutôt poussés vers la gauche ou la droite, et aussi vers le bas.

Je vais être honnête - je sais que la solution pourrait être simplement d'accepter comment cela fonctionne différemment dans le style DIV, ou de continuer à utiliser le style TABLE... mais je suis convaincu que cela devrait être possible, et que je passe à côté de quelque chose.

Le style TABLE faisait quelque chose de similaire, jusqu'à ce que je définisse :

.navigation table{
    height: 70px;
}

après quoi, il a commencé à fonctionner. Je n'arrive pas à savoir si faire la même chose dans le layout avec DIV quelque part résoudra le problème... J'ai essayé de définir la hauteur de divers éléments, mais rien ne semble faire de différence.

Désolé pour la question très longue. J'ai vraiment évité de devoir poser une question moi-même, mais j'ai vraiment rencontré un mur.

Answer 1

.menu ul {
    display: table;
    text-align: center;
    height: 70px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: auto;
}

.menu li {
    display: table-cell;
    list-style-image: none;
    list-style-type: none;
    text-align: center;
    vertical-align: middle;
    padding-right: 6px;
    padding-left: 6px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
}

http://jsfiddle.net/Nfs46/

Answer 2

Vous n'avez pas défini de hauteur pour les ancres, donc la hauteur est héritée de la taille de la police.

Cela fonctionne presque si vous ajoutez une hauteur et une ligne de hauteur aux ancres; essayez de jouer avec cela:

.menu a {
    hauteur: 50px;
    hauteur de ligne: 50px;
}

Answer 3

.menu a {
  alignement vertical : milieu;
}