Forums Développement Multimédia

Aller au contenu

empecher superposition d'item de liste..

CODE HTML CSS

2 réponses à ce sujet

#1 greenshot

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 54 messages

Posté 28 May 2011 - 12:25 PM

Bonjour, j ai un problème avec mon menu ...
lorsque l utilisateur redimensionne la page du naviguateur (ou consulte avec un smartphone)mes elements se supperposent
Quelqu'un aurait il une solution ou des indications pour empecher ça.
voici mon code:
html:
<ul id="nav" class="centred">
    <li><a href="../qui.html" title="rea">A propos</a></li><li><a href="../rea/index.html" title="rea">Réalisations</a></li><li><a href="../forma/index.html">Formations</a></li><li><a href="../labo/index.html">Labo</a></li><li><a href="../contact/demo.php">Contact</a></li>
</ul>
css:
@charset "UTF-8";
/* CSS Document */
body {
        background: #E8EBEC;
        font: 13px/1.4 "Trebuchet MS", Arial, Helvetica, sans-serif;
        color: #595959;}

/*------------------------------------*\
        NAV
\*------------------------------------*/

#nav{
        list-style:none;
        width:100%;
        height: 26px;
        overflow:hidden;
        margin:0 0 1.5em 0;
        padding:0;
}
#nav li{
        float:center;
        display: inline;
        height: 6px;
        /*margin: 0px 10px 0 10px;*/
        padding: 10px 16px;
}

/*

Add a class of centred/centered to create a centred nav.
*/

#nav.centred,
#nav.centered{
        text-align:center;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        background-color: #000000;      /*
personalisation menu general

         -moz-border-radius: 7px 7px 7px 7px;
    background-color: #FAFAFA;
    border: 1px solid #A9A9A9;
    height: 25px;
    padding: 0;*/
}
#nav.centred li,
#nav.centered li{
        display:inline;
        float:center;
        background: white url(../img/glossyback.gif);
        line-height:15px;
        position: relative;

}
#nav.centred a,
#nav.centred a{
        display:inline-block;
         color: #FFFFFF;
    outline: medium none;
    text-decoration: none;
}


#2 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 28 May 2011 - 18:42 PM

Bonsoir.
Pour commencer, je vois que tu as donné la valeur "center" à la propriété "Float" or cette valeur ne fais pas partie des valeurs attribuables à Float qui sont : left, right, none, inherit.
Ensuite, calcule la valeur minimale (totale) de tes items en largeur et indique cette valeur pour la propriété min-width du sélecteur #nav, cela devrait contraindre là liste à ne pas se redimensionner en deça de la valeur que tu auras donné mais infligera au navigateur avec petits écrans à avoir un scroll horizontal !

#3 greenshot

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 54 messages

Posté 29 May 2011 - 08:57 AM

merci beaucoup pour ta reponse, c etait en effet un problème avec float...
Je n ai pas utiliser la propriété min-width car elle ferait l inverse de ce que je cherche:-)
ciao et merci encore.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP