Texte trop court pour être justifié

Bonjour,

j'ai essayé divers moyen d'arriver a mes fins, malheureusement... Je bloque.

Je souhaites simplement faire un cartouche présenté comme suivant :

mot 1     mot 2
mot 3     mot 4
Projet / About / Contact

Je souhaite que mes trois lignes débutes et finisses horizontalement de façon identique.

Sachant que Mot 1 et 2 on une taille police et un espacement (letter-spacing) différents de Mot 3 et 4 et que ma liste est plus grande.

code cartouche :

<div id="cartouche" title="xxx">
    <div class="name">Mot1 Mot2</div>
    <div class="work">Mot3 Mot4</div>
    <div class="Menu">
        <a href="projects.php" title="Projects" <?php if ($menu == 'Projects') echo 'class="selected"'?>>Projects</a><span class="espacement">/</span>
        <a href="about.html" title="About" <?php if ($menu == 'About') echo 'class="selected"'?>>About</a><span class="espacement">/</span>
        <a href="contact.html" title="Contact" <?php if ($menu == 'Contact') echo 'class="selected"'?>>Contact</a>
    </div>
</div>

code css :

/**********************/
/***    Cartouche    ***/
/**********************/
#cartouche {
    font-family: Arial Black, Helvetica, sans-serif;
    font-weight: bold;
}
#cartouche .name {
    font-size: 170%;
    text-transform: uppercase;
    color: #666666;
    letter-spacing: 6px;
}
#cartouche .work {
    font-size: 160%;
    color: #999999;
    letter-spacing: 5px;
    text-align: left;
}
#cartouche .menu {
    font-size: 160%;
    margin: 5px 0;
}

J'ai essayé de justifié, mais trop peu de mot pour réussir, j'aimerai éviter de mettre une image car ce sont des termes important pour le référencement, j'ai essayé avec une table bien que ce soit mal...

Salut,

Si tu utilise une image présente dans le code html et que tu renseigne l'attribut alt correctement, les mots clés seront tout à fait pris en compte.

Ok, je pense que c'est ce qu'il y a de plus propre, car la solution actuelle n'est vraiment pas chouette ...

Merci.

Bonjour,

Si ce sont des mots uniques, il y a moyen de faire avec le positionnement flottant (ou du display inline-block) :

<div id="cartouche" title="xxx">
    <div class="name"><span class="motgauche">Mot1</span> <span class="motdroite">Mot2</span></div>
    <div class="work"><span class="motgauche">Mot3</span> <span class="motdroite">Mot4</span></div>
    <div class="Menu">
        <a href="projects.php">Projects</a><span class="espacement">/</span>
        <a href="about.html">About</a><span class="espacement">/</span>
        <a href="contact.html">Contact</a>
    </div>
</div>

#cartouche .name {
    font-size: 170%;
    text-transform: uppercase;
    color: #666666;
    letter-spacing: 6px;
}
#cartouche .work {
    font-size: 160%;
    color: #999999;
    letter-spacing: 5px;
    text-align: left;
}
#cartouche .menu {
    font-size: 160%;
    margin: 5px 0;
}
#cartouche .name .motgauche, #cartouche .work .motgauche{
    display:block;
    width:50%;
    float:left;
}
#cartouche .name .motdroite, #cartouche .work .motdroite{
    display:block;
    width:50%;
    text-align:right;
}

ps. : les titles ne sont absolument pas nécessaire (ils sont même carrement à éviter) s'ils sont juste là pour répéter l'intitulé du lien.
Modifié par Laurie-Anne (11 May 2010 - 11:13)

D'accord, je vire les titles.

Les block sont décalé (verticalement mot 2 et en dessous de mot 1, mot 4 et en dessous de mot 3). Leurs taille s'adapte à la plage et non à la liste.

Bazou a écrit :
Les block sont décalé (verticalement mot 2 et en dessous de mot 1, mot 4 et en dessous de mot 3).

Petite erreur dans l'utilisation des flottants.

On pourrait simplifier en faisant flotter à gauche chacun des 4 SPAN. En reprennant le code HTML de Laurie-Anne:

#cartouche .name, #cartouche .work {
  overflow: hidden; /* Empêche le dépassement des flottants */
}
#cartouche .name > span, #cartouche .work > span {
  float: left;
  width: 50%;
}
#cartouche .name > span + span, #cartouche .work > span + span {
  text-align: right;
}

Me suis pas penché sur la ligne suivante (div.menu).

Remarques en passant:
- sans doute pas compatible IE6 (je ne fais plus de debug IE6 à l'oeil );
- le code HTML pourrait être un peu plus sémantique... il n'y aurait pas des titres dans cette histoire, par exemple?
Modifié par Florent V. (11 May 2010 - 12:25)

Pour que vous vous fassiez une idée : Site

Wahou, c'est la premier fois que je vois des "> span" ou "span + span", qu'est-ce que c'est censé faire ?

Le soucis c'est que, je ne délimite pas la taille. Les floats se trouve donc à l'autre bout du monde du browser.

Effectivement la sémantique est surement à revoir, mais ce cartouche se trouve partout, alors le mettre en h1 serait gênant, sachant que la page project possède ce h1. Si conseil, je suis preneur !
Modifié par Bazou (11 May 2010 - 14:25)

Bazou a écrit :
Wahou, c'est la premier fois que je vois des "> span" ou "span + span", qu'est-ce que c'est censé faire ?

C'est censé t'inciter à apprendre les sélecteurs CSS.
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php

Bazou a écrit :
Le soucis c'est que, je ne délimite pas la taille. Les floats se trouve donc à l'autre bout du monde du browser.

C'est pas l'effet voulu? Sinon, ben il faut limiter la largeur (avec max-width sur un conteneur, par exemple).

Bazou a écrit :
Si conseil, je suis preneur !

Impossible de donner un conseil sans connaitre le contenu (texte) et le contexte (page).
Modifié par Florent V. (11 May 2010 - 22:10)

Tu peux voir le site, pour te faire une idée du contenu.

Cool ce tuto !!! Je le regarderai un peu plus frai que maintenant.

Heu non, le cartouche ne doit pas prendre toute la page, simplement s'élargir par rapport au contenu max, en l'occurrence, c'est la liste la plus longue "case", toutes les lignes doivent se justifier bord à bord de la celle-ci.
Modifié par Bazou (12 May 2010 - 00:27)

Bazou a écrit :
Heu non, le cartouche ne doit pas prendre toute la page, simplement s'élargir par rapport au contenu max, en l'occurrence, c'est la liste la plus longue "case", toutes les lignes doivent se justifier bord à bord de la celle-ci.

Dans ce cas le mieux serait d'utiliser du display:table, display:table-row et display:table-cell. Ou bien de faire un tableau de mise en page si on tient au support d'IE7.

Le problème du tableau, c'est que le letter-spacing génère un espace après la lettre, même en align=right.

C'est la loose !

Sympa le tuto sur les sélecteur, c'est fou ce qui existe qu'on ne connais même pas...

Bazou a écrit :
Le problème du tableau, c'est que le letter-spacing génère un espace après la lettre, même en align=right.

Ah tiens oui, au moins dans Firefox un letter-spacing de 20px va rajouter un espace de 20px à droite de chaque lettre (ou à gauche de chaque lettre si on change la direction du texte, je suppose).
Mais tu devrais pouvoir trouver un moyen d'arriver à un alignement visuel malgré tout, non?

Malheureusement non, l'espace blanc se trouve toujours à droite. Et même en bidouillant au quart de pixel près, suivant le navigateur (ie 7 / ie 8 / Opera / FF / Safari), on voit une différence.

Comme c'est un site pour un designer, et qu'il à l'œil le bougre, ça ne convient pas . C'est bien dommage, mais la solution de l'image reste le moyen le plus efficace.