Nav problème [Résolu]

Bonjour !

j'ai un petit pb



voila ma navigation actelle

        <div id="nav">
            <ul>
                <li><a target="_blank" href="http://anoo.rh.francetelecom.fr/rh/default/EN/all/hd/index.htm" title="handicapaction (nouvel onglet)">handicapaction</a></li>
                <li><a href="pk_cmt.html">FAQ</a></li>
                <li><a target="_blank" href="http://interview.si.francetelecom.fr/itw/int0213.nsf/Interviews/le%20saviez-vous%20Orange%20et%20le%20handicap%20SH?OpenDocument" title="Quiz (nouvel onglet)">quiz</a></li>
                <li><a href="pictogramme.html">types de handicap</a></li>           
				<li><a href="video.html"> campagne de <br />communication</a></li><
                <li><a href="carte.html">activit&eacute;s</a></li>
            </ul>
        </div>

j'ai eu comme consigne que le titre " témoignages" change par "campagne de communication"



comment faire pour que cela soit sur deux lignes, un simple </br> ne suffit pas , avez-vous une solution ?

svp
Modifié par JETUEDESBICHES (01 Oct 2013 - 14:39)

Salut et bienvenue sur le forum

Normalement, l'utilisation de <br /> devrait permettre un retour à la ligne. Peut-on avoir les styles CSS appliqués à l'ensemble des éléments du menu STP ?

—
Sinon, les target="_blank"dans un menu, ce n'est pas souhaitable du tout : en dehors des problèmes bien connus d'accessibilité et d'utilisabilité intrinsèques à cet attribut, rien ne permet ici au visiteur de distinguer que ces liens auront un comportement différent les uns des autres sur son navigateur

voila le css de ma nav

    #nav li{
    margin-left:25px;
    display:block;
    float:left;
    height:35px;
    line-height:35px;
    text-decoration:none;
    text-align:center;
    color:#000;
    }

    #nav li a:link, #nav li a:visited {
    display:block;
    float:left;
    height:35px;
    line-height:35px;
    text-decoration:none;
    text-align:center;
    padding:0 23px;
    color:#000;
    }

    #nav li a:hover, #nav li a:active {
    float:left;
    height:35px;
    line-height:35px;
    text-decoration:none;
    text-align:center;
    padding:0 23px;
    color:#FF6600;
    border-bottom:#FF6600 solid thin;
    }

Re,

Je t'ai fait quelques corrections dans ta feuille de styles et j'ai passé l'affichage de tes items de liste en table-cell ce qui permet d'utiliser la propriété vertical-align :

#nav li{
    margin-left:25px;
    display:block;
    float:left;
    height:35px;
    line-height:35px;
    text-decoration:none;
    text-align:center;
    color:#000;
    }

    #nav li a:link, #nav li a:visited {
    height:35px;
    line-height:1em;
    text-decoration:none;
    text-align:center;
    padding:0 23px;
    color:#000;
    display: table-cell;
    vertical-align: middle;
    }

    #nav li a:hover, #nav li a:focus, #nav li a:active {
    text-decoration:none;
    color:#FF6600;
    border-bottom:#FF6600 solid thin;
    }

Sur mon test, le résultat à l'air correct et de correspondre à ce que tu cherches à obtenir :
> http://jsfiddle.net/audrasjb/ujY99/1/embedded/result/

Cela dit, vu que nous sommes sur une communauté prônant l'usage des standards et des bonnes pratiques, mes remarques à propos des target="_blank" sont toujours d'actualité…

Par ailleurs, j'ai ajouté le pseudo-sélecteur :focus dans la règle CSS qui gère l'effet survol des liens pour permettre aux personnes qui visitent le site sans pointeur souris (notamment à l'aide de la tabulation clavier) de pouvoir également profiter de l'effet de l'effet de survol des éléments du menu
Modifié par audrasjb (30 Sep 2013 - 18:25)

merci beaucoup , sa fonctionne à merveille !!

C'est un plaisir, "JETUEDESBICHES"

Dans l'idéal, tu peux maintenant marquer le sujet comme résolu