Un overflow et un inline-table
Bonjour a tous, je réalise un tit site perso en local pour le moment mais je suis face a deux problèmes ...
Le 1er : Sous chrome.
J'aligne une table ul avec inline-table et le résultat est ... Que tout les ul sont bien aligné, mais en bas de la div, a la placé de l’être en haut.
Css
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| nav#general {
-moz-transition: all 1s ease 0s;
left: 0;
margin: 0 1%;
position: absolute;
text-align: center;
top: 0;
width: 98%;
opacity: 0.2;
z-index: 3;
}
nav#general:hover + p#media a {
opacity: 0.2;
}
nav#general div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0 0 10px 10px;
height: 0;
overflow: hidden;
padding: 5px;
position: relative;
top: -11px;
-moz-transition: all 1s ease 0s;
}
nav#general div > ul {
border-left: 1px solid #000000;
display: inline-table;
list-style: none outside none;
padding: 1%;
}
nav#general div > ul > a {
color: #FFFFFF;
cursor: default;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
}
nav#general a#accueil {
padding: 1%;
}} |
Html
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <nav id="general" role="navigation" class="actif">
<div id="menu">
<a href="..." alt="Accueil" id="accueil">...</a>
<ul><a href="...">...</a><li class="sm">
<ul><a href="...">...</a></ul>
<ul><a href="...">...</a></ul>
<ul><a href="...">...</a></ul>
</li></ul>
<ul><a href="...">...</a><li class="sm">
<ul><a href="...">...</a></ul>
<ul><a href="...">...</a></ul>
</li></ul>
<ul><a href="...">...</a><li class="sm">
<ul><a href="...">...</a></ul>
<ul><a href="...">...</a></ul>
</li></ul>
......</div>
<h2>Menu</h2>
</nav> |
Pour ce qui est de l'optimisation je m'en occupe plus tard.
Le 2eme :
J'ai des dives que je cache sous cette forme "right:-200" pour utiliser une transition. Mais du coup j'ai un scrool. J'utilise donc "overflow" mais il reste possible de déplacer la page avec les fléches du clavier ... hum embêtant !
Si vous pouviez m'aidez ce serait top. :ccool:
Merci.