28172 sujets

CSS et mise en forme, CSS3

Probleme de positionement de ma barre de menu (float:left buggé)

Bonjour à toutes et à tous.

J'essaie en ce moment intégrer une barre de menu sur mon tumblr. Celui-ci est intégré dans une <div> mais impossible de le coller à droite de cette dernière en utilisant le paramètre float:left !

En effet, un trou d'environ 30px à gauche sépare le bord de ma <div> de son contenu.

Voyez par vous-même : leocabannes.tumblr.com/

Premièrement, voila le code html de mon menu plus de la <div> qui le contient : 

<div id="menu">
 
    <ul id="nav">
     
        <li class="Home"><a href="http://leocabannes.tumblr.com/">Home</a></li>
        <li class="Illustration"><a href="http://leocabannes.tumblr.com/tagged/illustration">Illustration</a></li>
        <li class="Marketing"><a href="http://leocabannes.tumblr.com/tagged/advertising">Marketing</a></li>
        <li class="Webdesign"><a href="http://leocabannes.tumblr.com/tagged/webdesign">Webdesign</a></li>
        <li class="Other"><a href="http://leocabannes.tumblr.com/tagged/other">Other</a></li>
         
    </ul>
             
</div>


Et voila son style correspondant :

#menu {
width: 960px;
height: 40px;
overflow: hidden;
display: block;
margin-top: 0px;
background: #fff;
}
 
#menu ul li {
background:#fff;
list-style: none;
height: 44px;
float:left;
}

#menu ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding: 0px;
color: #898989;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .1s all linear;
-moz-transition: .1s all linear;
-o-transition: .1s all linear;
transition: .1s all linear;
}

#menu ul li a:hover {
color: #fff;
}

#menu li:nth-child(1) a {
border-color: #636393;
}

#menu li:nth-child(2) a {
border-color: #B5222D;
}

#menu li:nth-child(3) a {
border-color: #D4953C;
}

#menu li:nth-child(4) a {
border-color: #609491;
}

#menu li:nth-child(5) a {
border-color: #87A248;
}

#menu li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
}

#menu li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
}

#menu li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
}

#menu li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
}

#menu li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
}


Avez-vous une idée pour bien aligner le menu à gauche ?

Merci d'avance !
Modifié par leocab (31 Aug 2013 - 22:54)
Bonsoir,

À tout hasard la marge interne et/ou externe par défaut de ta liste non-ordonnée ?
Aucun margin, aucun padding, tout est dans la feuille de style

A moins que tu pensais à autre chose ?

En tout cas, même en changeant ces valeurs, rien ne change.
Modifié par leocab (01 Sep 2013 - 00:06)
En gros, certains éléments HTML ont un rendu par defaut, qui varie suivant le navigateur utilisé...

Ce rendu peut être affecté par des marges externes (margin), internes (padding), une taille ou une graisse de la police de caractères.

Ce tableau te donne les valeurs pour les éléments impactés pour chaque navigateur avec lequel tu le consultes.

La liste non-ordonnée (ul) fait partie de ces éléments qui ont des marges par défaut, donc un rendu différent selon le navigateur.

Essaies de mettre ces marges à zéro pour voir si le problème vient de là :
#menu ul {
  margin: 0;
  padding: 0;
}


Je navigue à vue, je suis calé devant un film, sur une tablette...
Si cela ne résous pas ton problème et que personne ne te fournit d'autres pistes de réflexion, je tacherai de repasser demain sur un destock Smiley cligne
super sympa !

je check et je te dis Smiley smile

[EDIT]

Donc aucun changement avec les margin et padding mis à 0px.

Ce qui est curieux c'est que peu importe la valeur que je met, rien ne se passe et ce, peu importe sur quel élément porte le marging/padding (le #menu, le <ul> ou le <li>)

[EDIT n°2]

J'ai trouvé la solution grâce à toi !

j'ai simplement rajouté des paramètres pour le "#menu ul" qui n'en avait pas !

#menu ul {
width: 960px;
float:left;
margin: 0px;
}


Mon problème est don résolu ! merci pour ton implication Smiley smile
Modifié par leocab (01 Sep 2013 - 01:23)
Sujet clos
Aller à