28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Dans un menu UL, le texte du lien se coupe automatiquement en 2 (sur 2 lignes) si il est composé de 2 mots.

Ex :

<li><a href="....">Sur mesure</li> ça donne : Sur
mesure

Comment faire pour tout garder aligner sur 1 même ligne ?

Merci
Bonjour xavman,

Tu as peut-être défini une largeur fixe à ton conteneur, à tes listes, à tes liens un poil trop courte non ?
Difficile à dire avec la profusion d'informations que tu nous fournis là... Smiley cligne
Peut-être peux-tu regarder du coté de la propriété white-space associée à la valeur no-wrap (qui empêche le retour à la ligne) mais c'est à utiliser en toute connaissance de cause et avec parcimonie...

Cdt,
Sylvain
Merci de ta réponse,

voici le code css qui contrôle le UL menu, si tu vois un truc à changer dis le moi car je suis pas trop un balèze :

ul#menu { margin: 0pt;
padding: 0pt 120PT;
background: transparent url(/image/fondmenurouge.gif) repeat-x scroll 0pt -35px;
height: 30px;

list-style-type: none;
}

ul#menu li {

float: left;
text-align: center;
}

ul#menu li a { border-right: px solid rgb(255, 255, 255);
border-left: px solid rgb(255, 255, 255);
width: 115px;
line-height: 30px;
font-size: 15px;
font-weight: bold;
letter-spacing: 0px;
color: #ffffff;
display: block;
text-decoration: none;
}

ul#menu li a:hover { background: transparent url(/image/fondmenurouge.gif) repeat-x scroll 0pt 0px;

color: #ffffff;
height: 30px;
width: 115px;
margin-left: 0px;
}

#menu #current { background: transparent url(/image/fondmenurouge.gif) repeat-x scroll 0pt 0px;

color: #ffffff;
}

#menu #current a { background: transparent url(/image/fondmenurouge.gif) repeat-x scroll 0pt 0px;

color: #ffffff;
}
Essaye d'augmenter la valeur des 2 propriétés en rouge ci-dessous :
 ul#menu li a { border-right: px solid rgb(255, 255, 255);
   border-left: px solid rgb(255, 255, 255);
    [#red]width: 115px;[/#]
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0px;
    color: #ffffff;
    display: block;
    text-decoration: none;
    }

  ul#menu li a:hover { background: transparent url(/image/fondmenurouge.gif) repeat-x scroll 0pt 0px;
    
    color: #ffffff;
    height: 30px;
   [#red] width: 115px;[/#]
    margin-left: 0px;
    }


Et puis avant qu'un modérateur n'intervienne, les règles du forum veulent que tu utilises le style code pour un bon formatage... cf FAQ (http://forum.alsacreations.com/faq/faq-80-Comment-presenter-du-code-sur-le-forum-.html)
Modifié par PiR2 (25 Nov 2008 - 11:46)
ok j'essaye ca et je vais voir aussi du côté no-warp comme le disais Sylvain, je sais ce que c'est, mais je vais chercher.

@+
Il y a aussi la possibilité de remplacer les espaces dans les intitulés par des espaces insécables (par exemple avec l'entité HTML &nbsp; ).