DÃ©coupe design ajustable

de **Big Baby** le 28 Jan 2009, 01:09

Bonjour à tous,

Je travaille actuellement sur un projet qui touche tout une communauté de passionnés.
Il s'agit d'un design pour une interface web embarqué dans un récepteur satellite.
Il s'agit d'une communauté de développeurs d'un peu tous les coins du monde. Pour ma part je m'occupe de l'interface web alors que eux code en C++.

Une interface web d'origine très basique existe mais j'aimerai la relooker un peu au goût du jour.
Mon problème pour le moment est qu'ayant fait mon design et après ma découpe (que je pensais plutôt bonne) quand la partie de droite s'étend, les colonnes à gauche s'étirent aussi déformant tout le template ;-(

Il me faudrait un peu d'aide pour pouvoir faire ma découpe convenablement et ne pas avoir ce problème.

Je vous poste quelques images:
L'original:

Mon travail:

Bon, pour le moment, rien n'est implanté mais j'aimerai pouvoir agrandir la partie de droite sans déformer les colonnes de gauche. Je suppose que c'est faisable mais là, je ne sais pas faire.

Merci pour votre aide en tous cas. :bravo:

PS: le récepteur ne supporte pas autre chose que le HTML

de **zardoz** le 28 Jan 2009, 06:27

Techniquement la partie de gauche et la partie de droite doivent
être indépendante l'une de l'autre. De tel sorte qu'en redimensionnant
la partie de droite, celle de gauche n'est pas à en subire les conséquences.

Visuellement nous auront donc un aperçu juxtaposer ne formant qu'un
ensemble unifier mais dans son utilisation les parties seront indépendante et autonome.

Toujours penser en terme de conteneurs : Lors de la mise en page.

En C++ comme en Java : On appel çà des Canvas.
En Flash on dit : Containers.
En HTML ce sont les : Div ou les Tableaux.

Mais peu importe le langage ce sont les mêmes principes axés sur des conteneurs.
La partie gauche et droite pourront donc avoir chacun leur conteneur juxtaposer côte à côte,
mais indépendamment l'une de l'autre.

Je ne suis pas un spécialiste du découpage mais tu trouveras sur MSG
des membres capables de te suggérer et de te conseiller sur le sujet.

L'important sera de savoir installer le tout en zone HTML.
Ce qui ne devrais pas poser de problème majeur.

++ ;-)

de **Big Baby** le 28 Jan 2009, 11:34

bonjour,

pour ma part j'utilise ImageReady 7.0 pour faire ma découpe. Il me fais bien un fichir HTML avec un tableau et des cellules mais après pour faire ce dont tu me parle, j'en serais malheureusement incapable.

Si quelqu'un sait m'expliquer cela ca serais super!

de **zardoz** le 28 Jan 2009, 16:58

Assures toi que l'attribut width ne s'adresse pas au tableau.

Voici un exemple :

<table height="650" width='1000'>
<tr>
<td width='200' style='border:solid thin black;'>Partie gauche</td>
<td width='600' style='border:solid thin black;'>Partie droite</td>
</tr>
</table>

La colorisation en bleu : width='1000' : Cet attribut est globale au tableau.
La partie de gauche sera aussi influencé lorsque que tu modifie sa valeur.

Si c'est le cas : Écrit le plutôt comme ceci :

<table height="650">
<tr>
<td width='200' style='border:solid thin black;'>Partie gauche</td>
<td width='600' style='border:solid thin black;'>Partie droite</td>
</tr>
</table>

Écrit ainsi tu créer une indépendance à chaque cellule.

C'est une question d'héritage entre la balise parente : <table> et les balise enfants : <td>
Il en est de même de la balise <tr> : Celui-ci ne doit pas avoir d'attribut width='valeur'
car il est le parent de <td>. Donc Globale.

Globale : Exemple à ne pas faire. Aucune indépendance des cellules.

Code: Tout sélectionner: <table height="650" width='1000'> <tr> <td width='200' style='border:solid thin black;'>Partie gauche</td> <td width='600' style='border:solid thin black;'>Partie droite</td> </tr> </table>

Locale : Exemple à faire. Créer des cellules indépendantes.

Code: Tout sélectionner: <table height="650"> <tr> <td width='200' style='border:solid thin black;'>Partie gauche</td> <td width='600' style='border:solid thin black;'>Partie droite</td> </tr> </table>

Ne place l'attribut width='valeur' qu'aux balises <td>.

++ ;-)