Tableaux scrollbar, textarea,

Bonjour,

Bonjour

J'ai une question à vous poser. Vous y connaîtriez-vous en création de tableaux avec le logiciel Golive. Je pense que ça doit être proche de Dream, mais bon je ne l'ai pas pour l'instant.

Cela fait plusieurs moi que je m'arrache les cheveux, et je pense être arrivée au bout. Je vous explique la situation.

Pour mon plaisir personnel, j'ai créé un site Web (qui se trouve encore sur mon disque dur).

J'utilise le logiciel 'Golive" version 7.0.2
J'ai acheté l'unique livre que j'ai pu trouver, mais hélas, ce n'est que la version 6. Du coup, il y a parfois une grande disparité entre ce que je peux voir sur mon écran, (ne serait-ce que niveau présentation) et les explications que j'ai dans mon ouvrage.

J'ai déjà passé beaucoup de temps sur divers forum. J'y ai appris tout un tas de chose tel que : Textarea, scrollbar horizontale & verticale. Changer la couleur de textera.

Mais ce qui m'embête (en parlant très poliment) .... est que même si j'arrive à faire à peu prés ce que je recherche (en piquant par ci, par là des bouts de codes provenant du Web), cela me fait néanmoins, (passez-moi l'expression), :"une belle jambe:"

En effet, je ne sais pas où chercher dans mon logiciel (au niveau du tableau : définition de la feuille de style). Si vous ne connaissez pas Golive, c'est là que j'ai : (h1, ... h6, ... Ol Ol ... UL UL .... td, .... a:link).p ... création d'un style de (.classe), ... (Element < >) ... ect.

Le truc vraiment débile dans ce logiciel, c'est que pour attribuer les valeurs à mes balises, les termes (A CHOSIR) son en français. En revanche, quand je clique sur le récapitulatif, les NOMS ainsi que les VALEURS sont en anglais.

Et, et !!!! Vu que sur le Web, les balises & valeurs sont en anglais (dés le part), du coup, lorsque j'essaie d'apporter de nouvelles valeurs dans ma feuille de style, je ne sais pas comment m'y retrouver, vu que encore une fois, je PARS de l'anglais, pour ensuite me retrouver sur du français, et le récapitulatif est en anglais. Si seulement tout était en anglais au niveau de ma rubrique CSS, eh bien je ne serais pas aussi perdu.

Moi, je rêve d'arriver à créer le tableau suivant :

1 TR & 3 TD.

- Première colonne, j'y insère une photo.
- Deuxième colonne (la + étroite), j'y insère un textarea (colorié, afin de se fondre dans la masse).
Je voudrais pouvoir y insérer une DIV, un titre : en gras & sous ligné, des <UL> et LI </UL>. (Mais déjà pour commencer, je ne comprends pas trop quel valeurs donner à ma DIV) ? ... question hauteur et largeur. Je ne sais pas trop où aller au niveau de ma rubrique feuille de style. UNE SCROLLBARE VERTICAL & HORIZONTALE.

- 3 ème colonne, il s'agit de la plus large. Je souhaite y insérer la même chose qu'au niveau de la 2 ème colonne. La seule différence est la suivante : <OL> LI </OL>. Et bien sûr SCROLLBAR HORIZONTALE & VERTICALE.

J'ai pu trouver sur le Web des textareas qui donnaient des tableaux (en apparence) mais qui ne comportent pas de TABLE, TR, et TD.

Vu que mon tableau doit impérativement comporter 3 colonnes, j'ai donc essayé de dupliquer cette sorte de (tableau sans TABLE). Le problème est que ça me crée des colonnes placées les unes à côté des autres, ce qui n'est nullement mon but. C'est avant tout une question de cohérence et d'esthétique !

En fait, il s'agit d'un tableau qui doit recevoir une recette.

- Première colonne : la photo
- Deuxième colonne : la liste des ingrédients, d'où mon besoin d'une <UL> LI <UL> (liste non ordonnée)
- Troisième colonne : déroulement de la recette, d'où mon besoin de <OL> LI <OL> (liste ordonnée).

Au niveau de Golive, lorsque je fais glisser l'icône d'un tableau, j'ai toujours plus de lignes et de colonnes que nécessaire. Je supprime donc tout ce qui est en extra.

Quand je clique dans la première colonne (avec les valeurs que j'ai auparavant établit au niveau de la feuille de style), rien ne se passe.
Ce n'est qu'une fois que j'actionne le le navigateur que je vois la bonne taille s'afficher, mais pas seulement. J'ai une sorte de médelé d'un grand tableau à trois colonne, et en haut, je vois ce même tableau en mini en haut à gauche.

Et tout s'aggrave lorsque je coche sur Insérer un style : block, .... td .... p, body. Je pensais qu'il suffisait que je clique sur TD, mais il semblerait que selon mes actions, j'ai d'autres cadres qui apparaissent dans les premiers cadres. Le livre ne m'aide pas beaucoup, vu que ce n'est pas un livre de cours. Juste une sorte de pense-bête, ... je présume, pour les personnes qui s'y connaissent déjà : ( ! Ce qui n'est pas vraiment mon cas.



VOICI LE CODE SOURCE DE MA FEULLE DE STYLLE CSS

(Pour l'instant, je n'ai pas attribué de valeur à aucune DIV, vu que je ne sais pas trop comment m'y prendre).


body { font-family: Arial; background-color: #f5f2aa; text-align: center; width: 1000px }
p { color: black; font-size: 9pt; text-align: justify; text-indent: 0.5cm; margin-right: 8px; vertical-align: top }
.center { text-align: center }
.justify { text-align: justify } h1 /* Bonjour et bienvenue au paradis des gourmands */ { color: maroon; font-size: 36pt; font-style: italic; font-weight: bold; margin: 0.67em 0 } h2 { } h3 /* Retour ˆ la page d'accueil */ { color: black; font-size: 20pt; font-style: oblique; font-weight: bold; text-transform: uppercase }
h4 /* IngrŽdients */ { color: black; font-size: 12pt; font-style: italic; font-weight: bold; text-decoration: underline; text-align: center; text-indent: 0; margin: 1.33em 0 }
h5 /* Titre de la recette */ { color: black; font-size: 14pt; font-style: italic; font-weight: bold; text-decoration: underline; margin: 1.67em 0 }
h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0 }
a:link /* Lien non visitŽ */ { color: blue; text-align: center }
a:hover /* Le pointeur de la souris survole le lien. */ { color: #ffd940; font-style: italic; font-weight: bold; font-stretch: extra-expanded; text-align: center; letter-spacing: 10px }
a:active /* Cliquez ici en gardant le bouton appuyŽ. (Lien qui est activŽ) */ { color: #ffff00; text-align: center; text-transform: capitalize; letter-spacing: 12pt }
div { }
div1 { }
div2 { }
div3 { }
div4 { }
div5 { }
ol ol { list-style-type: upper-roman; margin-top: 0; margin-bottom: 0 }
ul ul { list-style-type: square; margin-top: 0; margin-bottom: 0 }
.td1 { width: 350px; height: 400px; vertical-align: top; border: solid thin black }
.td2 { text-align: justify; visibility: visible; padding: 2mm; position: absolute; width: 250px; height: 400pt; overflow: scroll; clip: auto; vertical-align: text-top; border: solid thin black }
.td3 { text-align: justify; visibility: visible; padding: 2mm; position: absolute; width: 570pt; height: 400px; overflow: scroll; clip: auto; vertical-align: text-top; border: solid thin black }
.p2 /* Texte de couleur marron */ { color: maroon; font-size: 12pt; font-style: italic; text-align: justify; vertical-align: text-top }


VOILA UN EXEMPLE DE CE QUE J'AI PU OBTENIR POUR L'INSTANT : (Mais mon plus gros souci, est que je n'ai pas la SCROLLBARE HORIZONTAEL dans la colonne 2 et 3, or, j'en ai vraiment B.E.S.O.I.N) !!!


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>ASCENCEUR2</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body bgcolor="#ffffff">

<p>
<table width="457" border="1" cellspacing="2" cellpadding="0">
<tr valign="top" height="400">
<td valign="top" width="350" height="400">
<p></p>
<p></p>
<p><img src="file:///Users/argiosipt/Desktop/Les-iles-gourmandes-01-09-08-015h35/web-content/Tania-images/Sales/Courgettes/courgetteTOMATE6.jpg" alt="" height="400" width="350" border="0"></p>
</td>
<td height="400">


<textarea style="background: #f5f2aa;" rows="5"; cols="20"> <!-- Le cols, c'est la longueur du champ... -->




bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n
n

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn




<!-- Le rows, c'est le nombre de lignes.... -->
</textarea>




</td>
<td height="400">


<p> <textarea style="background: #f5f2aa;" ="5" rows="24" cols="18"> <!-- Le cols, c'est la longueur du champ... -->


bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla
b
b
b
b
b
b
b
b
b
b
b
b
b
b

b
b
b
b
b
b
b
b
b
b
b
b
b
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb




<!-- Le rows, c'est le nombre de lignes.... -->
</textarea>

</td>
</tr>
</table>
<p>

<p>
<p>
</body>

</html>


DANS L'EXMPLE SUIVANT (c'est ce que j'appelle un faux tableau sans TABLE), je ne suis satisfaite qu'à 80%. Certes, j'ai ma fameuse SCROLLBARE HORIZONTALE + VERTICALE, mais je tiens vraiment à avoir une BORDURE NOIRE fine, il me manque encore 2 colonnes (et si je duplique, les colonnes se dispose de gauche à droite), avec un espace.

Par ailleurs, je ne sais pas à quel niveau saisir dans ce (tableau sans table pour obtenir hauteur du tableau 400 PX, 1 ère colonne 350 de largeur, 2 ème colonne 280 PX de largeur, et 570 PX de largeur.

Vu que ce n'est pas un tableau (engendré) par la feuille de style CSS, je n'ai pas ce petit cadre qui apparaît est qui me demande d'insérer un stye, bloc, body, p ect...


J'ai vraiment essayé, et je suis sur le point de baisser les bras. Mais ce serait dommage car cela fait des mois que je bosse dur.

Je dois, et veux vraiment régler un maximum de chose dans grâce à la feuille de stye CSS, et non me contenter de (voler) des bouts de code depuis le Net.



Au mois d'août dernier, on m'avait bien aidé. Grâce à ça j'ai pu avancer. Dans ce dernier exemple, il n'y a ni scrollbar, ni textarea. Mais je vous le met tout de même, ainsi, vous aurez une idée très claire de ce que je désire une fois que mon histoire de scrollbar, & Div seront réglés.


VOICI L'EXEMPLE :




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Poulet aux amandes</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body bgcolor="#ffffff">

<table width="800" border="1" cellspacing="2" cellpadding="0">
<tr valign="top">
<td>
<img src="Tania-images/Sucrees/Divers/Flan-mangue1.jpg" alt="" height="400" width="350">

</td>
<td class="Ingredients">
<h2>Ingrédients</h2>
<ul>
<li>Tomate</li>
<li>Oignon</li>
</ul>

<p>(Je ne vois pas les puces carrées s'afficher, pourquoi ?)</p>
<p>=> Parce qu'il n'y avait pas de <ul>.</p>
<p>Tout ce texte apparaissait souligné parce qu'il est contenu dans
un <td> qui a la classe "Ingredients", ce qui fait que tout
le texte compris dans ce <td> était souligné, gras et italique.
J'ai modifié le CSS.</p>
<!--Il fallait retirer la classe "Ingredients" du td, et la
mettre seulement sur le titre. Pour ça, j'utilise une balise
conçue spécialement pour faire des titres, h2 (il y en a 6 en tout,
je crois que tu connais déjà h1), et je lui mets la classe.-->
<br>
<br>

<br>
</td>
<td class="titrerecetteetsonderoulement">
<h2>Poulet aux amandes grillées</h2>
<p>1er pb, je voudrais qu'après le titre de la recette, le
déroulement étape par étape ne soit plus en souligné. Par
ailleurs, je voudrais que des chiffres romains apparaissent sur
la gauche, mais bien que j'aie sélectionné cela dans la feuille
de style, ça n'apparaît pas. Pourquoi ?</p>
<p>=> Pour le souligné, même problème que la 2e colonne, donc même
solution : regarde le CSS ^^</p>
<p>=> Pour les chiffres romains, la règle que tu as mise n'était
pas au bon endroit : elle doit s'adresser à une <ul>.
Voir CSS. Je résouds du même coup l'histoire des puces !
Exemple :</p>

<ul>
<li><div>
<h2>blabla</h2>
<p>Et voilà une puce "interrompue" lol</p>
</div></li>
<li><div>
<h2>bla</h2>

<p>Pareil</p>
</div></li>
<li>blabla</li>
<li><div>
<h2>Aie !</h2>
<p>Ça dépasse...
Il existe une solution simple à ce genre de
problème : utiliser la propriété CSS "overflow"
por ajouter des barres de défilement. Sauf que...
Ça ne marche pas avec les tableaux.
J'attends ton avis pour savoir comment adapter
la page.</p>

<p>J'en profiterai pour t'expliquer le coup des
puces interrompues paske là j'ai un peu la flemme...</p>
</div></li>
</ul>
</td>
</tr>
</table>

<br>

</body>
</html>

<!--modifications :
* J'ai changé l'encodage en utf-8 : plus de problèmes d'accents !

* Pas besoin de préciser la hauteur du <tr> car elle est précisée pour les <td>

* J'ai retiré les règles CSS qui n'étaient pas utiles ici.
De toute façon, tu peux préciser plusieurs fichiers CSS en rajoutant une balise
<link> à chaque fois.

* J'ai rajouté des <ul> : c'est la balise pour les listes.
<ul> doit contenir uniquement des <li>. Regarde l'exemple.
Le style de puce est défini par le CSS.
Ton histoire d'interrompre le code : il suffit de fermer la <ul>
et d'en rouvrir une autre après quand c'est nécessaire !

* J'ai remplacé les pargraphes vides par des sauts de ligne (balise <br>).

* J'ai supprimé les classes p18 : comme je ne vois pas de règle correspondante,
je me suis dit qu'elles ne servaient à rien. Ca arrive parfois avec les
éditeurs WYSIWYG...

* J'ai supprimé les <span>. <span> et <div> sont des balises dont la particularité
est qu'elles ne servent à rien toutes seules (on leur met souvent des class ou des id)

* J'ai supprimé la balise <div> qui entourait les ingrédients :
elle ne servait à rien.

* J'ai rajouté un <h2> sur le titre de la liste des ingrédients pour le rendre
italique+gras+souligné sans que le reste le soit. (détails : voir plus haut)

* Idem pour la 3e colonne et le problème de soulignement.

* Supprimé les attributs valign="top" des <td>. Ces attributs sont obsolètes,
ils ne devraient pas être utilisés par les éditeurs wysiwyg !!

* J'ai supprimé l'attribut border de l'image, il est obsolète aussi.
Remplacé par un joli "border:none;" dans le CSS.

* Supprimé les attributs height et width des <td>. Ils sont remplacés,
eux aussi, par des règles CSS.
Si tu regardes bien tu verras que la 1ere colonne n'a plus de largeur définie,
cependant elle contient une image qui, elle, a des dimensions précises.

~~~~~~~~~~~~~

Notes :
* Pour vérifier la "propreté" du code, utiliser le (tatsaaaan) Validateur !
=> http://validator.w3.org/
NB : si tu vérifies, tu verras que tout ce que j'ai qualifié d'obsolète ne
l'est pas forcément. C'est parce que ta page est déclarée en HTML 4.01 transitionnel.
Si tu veux la faire passer en HTML 4.01 Strict, c'est là que ça va coincer.

* Pour apprendre toujours des tas de trucs sur le code, je te conseille d'utiliser
le mode "mixte" de Golive (je ne connais pas Golive mais je pense qu'il y en a un)

* Petit conseil, les unités de polices en pixels (12px par exemple) peuvent
causer des problèmes car elles dépendent de la résolution d'écran.
Les navigateurs savent s'adapter mais ce n'est pas conventionnel, il vaut mieux
utiliser l'unité adaptée pour les tailles de polices : le point (pt).
Il y a une règle de proportionnalité je crois, en tout cas 12px = 9pt.
-->




********************************************************************************************



Voilà, donc si vous pouvez m'aider, ou bien m'indiquer le nom du ou de plusieurs personnes qui seraient susceptible de m'aider, eh bien je ne dis pas non.

Un grand merci : )