28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur mon site, le titre est un texte contenu dans un div.
Si le visiteur réduit la fenêtre de son navigateur à une taille plus petite que mon titre, celui-ci passe sur plusieurs lignes.

Existe-t-il un moyen pour qu'un texte ou un div, reste sur la même ligne ?

Ci-dessous le code css du div concerné :

#header 
{
 height: 130px;
 background-color: #FFFFFF;
}


et un lien vers le site pour un exemple concret :
MyFinder

Merci de votre aide

Mickaël
Salut,

La seule solution serait avec l'overflow, mais tu ne verrais plus la totalité de ton titre, ce qui risque d'être gênant.
De toute manière avec la possibilité d'agrandir le texte sur les navigateurs en plus de la réduction de fenètre, il y a de fortes chances que ton titre passe sur 2 lignes ou plus. Mieux vaut le penser en conséquence et soit éviter les noms trop longs, soit gérer la CSS de sorte que celui ci puisse être élégant sur une ligne comme sur plusieurs. Smiley cligne
Modérateur
Salut,

Je ne comprends pas très bien ta question. Je crois que j'ai quand même la solution à ton problème :


#header { 
  height: 130px;  
  background-color: #FFFFFF; 
  width : 300 px; 
  font-size: 30pt !important;
}


!important ne fonctionne pas avec FF mais avec IE Smiley langue

@+
je ne vois pas l'interet de l'important.
Si tu donnes une largeur a ton titre, il ne passera p^lus a la ligne, il y aura une barre de scroll
Nolem a écrit :
!important ne fonctionne pas avec FF mais avec IE Smiley langue

C'est l'inverse. Firefox comprend le !important, mais cela ne change rien au comportement de ce navigateur qui est de permettre le redimensionnement de tous les textes, même ceux exprimés dans des unités non relatives (pixels, points...).

Internet Explorer 6, lui, ne comprend pas le !important, mais il ne permet pas, par défaut, le redimensionnement des textes en px et en pt.

Sinon, il doit être possible avec des espaces insécables ( ) uniquement de faire que le titre soit considéré comme un mot unique. Par contre, il se pourrait que certains navigateurs coupent tout de même le texte sur, par exemple :
- un tiret ;
- un point ;
- le passage la fermeture d'un <span>...</span>.

Je vois donc deux solutions :
- s'il s'agit du titre (ou logo) d'un site, utiliser une image avec texte alternatif qui va bien ;
- s'il s'agit d'un titre d'article, de page, de rubrique, susceptible de changer... suivre le conseil de Mikachu, et prévoir ce cas de figure (par exemple ne pas donner de hauteur fixe au titre, afin qui repousse le reste du contenu plutôt que de déborder dessus).
Merci à tous,

J'ai testé un peu toutes les solutions, mais généralement, cela provoque d'autres dysfonctionnements.

Je pense que je vais opter pour la solution de l'image, c'est ce qui sera finalement le plus simple à faire.
Si je ne l'avais pas fait jusqu'à présent, c'est que le titre est composé du nom du logiciel (myfinder), de la version ( variable, affiche la dernière version) et du nom de code de cette version ( ici, c'est climb to sky). Et je ne voulais pas refaire mon titre à chaque changement de version.

Mais bon, je vais faire un script php qui me génère cette image à chaque changement.

Merci encore pour vos réponses, et bon week-end

Mickaël