Desing cassé après insertion du texte dans les cases....

[clampin]

Salut,

J'ai décidé que pour janvier, mon site sera un peu changé. Alors voilà je vous explique ce que je veux faire.

Donc voilà... je prépare mon desing dans photoshop (voir la figure ci dessous) :

Ensuite je l'exporte dans imageReady pour définif les zone ou le texte devra se rendre...

Et après c'est là que ca se complique, parce que comme j'utlise Spip forcément la taille du texte varie en lageur et en hauteur en fonction des rubrique et du nombre de lignes par cases....

Donc forcément ca casse tout le graphisme dans firefox...

Ma question, comment faire ? quelle tactique employé pour que la taille des cases puisse être "dynamique" en fonction de la taille du texte ?

Merci.....

 

[Nephou]

Oulà, y'a du boulot

personnellement j'en profiterait pour passer au couple xhtml / css mais, en résumé l'idée de base c'est de découper plus finement ton image.

pour le menu : une élément haut reprenant l'arche, une élément bas reprennt l'arche inversée et une petite tranche du cadre reprenant les deux bords (je supose que la largeur est fixée).
je mettrai chaque menu en liste (<ul>) avec margin et padding à 0, un text-indent nul (none) et un background de couleur blanche et avec l'image des deux montants bleu eu répétition verticale (y-repeat). Je rajoute une class début et une classe fin pour les éléments (<li>) de la liste avec respectivement pour image de fond l'arche supérieure et l'arche inférieure ?


:heu: je parle pas trop chinois là ?

 

[Nephou]

trois heures ayant passées :heu: je complète sans éditer.

Comme il semblerait que ma réponse ne soit pas claire voici ma proposition :

le code html d'un menu :

<div id="contenu">
   <ul class="menu">
      <li class="deb">haut du menu</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li>élément</li>
      <li class="fin">bas du menu</li>
   </ul>
</div>

et le morceau de feuile de style

<style>
#contenu {text-align:center;}
ul.menu {
text-indent:none;
margin:10px auto;
width:150px;
padding:0
;text-align:left;
background-color:#fab166;} [color=green]ajouter ici l'image de background[/color]

ul.menu li{list-style-type:none;margin:0;padding: 0 1em;}

ul.menu li.deb {background-color:#fabfab;} [color=green]ajouter ici l'image de background[/color]

ul.menu li.fin {background-color:#fabfab;} [color=green]ajouter ici l'image de background[/color]

</style>

note : la div "contenu" sert de hack pour l'alignement centré quelque soit le navigateur

dans la feuille de style définir une image de fond se fait ainsi:

background: 'couleur' / 'image' url("url de l'image") / 'répétition' [no-repeat|repeat|repeat-x|repeat-y] / 'positionnement' / attachement

 

[clampin]

Bon, ce matin j'ai du m'absenter... me revoilà avec mes questions....

Ce qui veut dire que mes "cases" (je sais pas vraiment les appeler différement, ne pourrons pas avoir de taille différentes en hauteur.. (la largeur elle est fixe) ? (ou alors j'ai rien compris).

Tu parle dans ton premier message, de mieux découper mon image dans imageready.. comment ? en faisant encore de plus petit morceaux ? En fait j'avais tout simplement, pris l'outil tranche et "découpé" mes cases pour y placer l'endroit ou il y aurait mon texte. (évidemment je n'avais pas pensé que mon dit texte serait plus grand que mon cadre (dans l'exemple illustré dans mon premier message).

Je vais donc examiné ta proposition cette après-midi.... et peut être que plus tard j'aurais encore des questions.... En tout cas je te remercie de m'expliquer un peu...

 

[Nephou]

Il est vrai que ma réponse ets surtout adaptée à la partie gauche de ton site, à savoir le menu si je ne m'abuse. La largeur est donc fixée. pour le contenu, la même solution est envisageable* (largeur fixe donc) mais pas obligatoire.

je te conseille la lecture de cet article : http://www.alistapart.com/articles/customcorners2/

pour les images, pour le menu il en faut trois :
--- la partie supérieur du cadre ;
--- la partie inférieure du cadre ;
--- une image de un ou deux pixels de haut et de la largeur de ton menu (dans mon cas 150px) contenant les deux montanst du cadre

* en remplaçant <ul> par une <div> et en définissant par exemple un <p> de début et un <p> de fin.

 

[clampin]

Bon, je continue mes test... alors j'ai vu que imageready on peut faire une sortie en CSS au lieu que par une table...

Mais ca ne change pas grand chose à mon problème (mon texte dépasse toujours du cadre qui lui est réservé. Et moi ce que je voudrait c'est que le cadre soit à dimension en hauteur... et c'est cela que je ne parviens pas à faire.. j'ai beau suivre les différents tutoriels... ca ne vas pas


Bon je continue mes tests d'abord sur une simple boite... centrée aux centre de la page... lorsque j'aurais compris, je passerai à mon site... je crois que j'ai vu trop grand d'un coup....