Discussion :

[padouk]

Bonjour,

Je recherche la manière dont je pourrais intégrer une barre de défilement dans mon fichier html ci-joint.

Ma page comporte deux colonnes, une à gauche avec les images et une à droite avec le texte.

Comme je suis complètement débutant, j'ai trouvé le code pour avoir une barre de défilement à droite dans une page ne comportant aucune colonne, cela fonctionne très bien...

Mais dès que ma page est divisée ça devient difficile pour savoir où mettre le code....

=> <div style="width:100%;height:450px;overflow:auto;">

Je souhaite que toute ma page soit contenue dans la barre de défilement si vous voyez ce que je veux dire.. ?

Je vous remercie de votre aide.

[miss_socrates]

Je n'ai pas vu le fichier css mais déjà 2 remarques:
1) Tout s'affiche sur une seule colonne, je ne vois pas où se trouvent les 2 colonnes (ce n'est pas comme en traitement de texte où le texte se met automatiquement dans une 2e colonne s'il arrive au bas de la 1e)
2) Je ne comprends pas bien pourquoi mettre toutes ces div avec des propriétés css (border-left, border-right...) et les images dans des <p> alors que j'aurais plutôt mis les images dans des div alignées en css et non en html.

[padouk]

Bonjour,

À vrai dire, j'ai acheté un template donc pourquoi il y a autant de div je ne sais pas... étant donné mon niveau en HTML je ne me suis pas posé la question...

Mais cela n'empêche pas que le site est très bien mis à part quelques modifs à effectuer.

C'est vrai que sans le fichier css vous ne pouvez pas voir de quoi je parle...

Je joins donc le fichier css à ce message, je joins également le layout.css pour plus de détail.

Je vous remercie par avance de votre aide !

[miss_socrates]

Je souhaite que toute ma page soit contenue dans la barre de défilement si vous voyez ce que je veux dire.. ?

Je visionne bien la structure du site (à part les images qui ne s'affichent pas bien sûr) mais je ne comprends pas où vous voulez insérer une barre de défilement. Car, le texte étant trop long, une barre de défilement se met automatiquement à droite pour pouvoir descendre dans la page.
Voulez-vous insérer une barre de défilement entre les 2 colonnes?
Ou bien vous voulez que tout s'affiche sur un seul écran ? (difficile vu la quantité de texte)
Autre remarque personnelle : ne faudrait-il pas aligner chaque photo à côté de son texte correspondant ?

[padouk]

Je vous joins un capture d'écran d'une autre page qui contient une barre de défilement à droite, sur cette page j'ai pas de problème avec le code, car c'est une page complète (sans division).

Dans la page que je souhaite changer, j'aimerais que la barre de défilement soit à droite et que toute la page (image colonne gauche et texte colonne droite) soit comprise dans le défilement.

Concernant la barre de défilement automatique cela ne fonctionne pas et quand bien même cela fonctionnerait, uniquement le texte serait avec une barre de défilement.

Cela à t-il plus de sens pour vous maintenant ?

[miss_socrates]

j'aimerais que la barre de défilement soit à droite et que toute la page (image colonne gauche et texte colonne droite) soit comprise dans le défilement. Concernant la barre de défilement automatique cela ne fonctionne pas et quand bien même cela fonctionnerait, uniquement le texte serait avec une barre de défilement.

Je ne vois pas mieux le souci. Et la barre de défilement automatique apparait automatiquement à droite dès que le texte est plus long que l'écran et vaut tant pour le texte que pour les images.
Sur base du fichier html joint, la barre de défilement est bien automatique. Dans la page, il y a 2 divisions (div) l'une <div class="col-1"> qui contient les 4 images et l'autre <div class="col-2"> qui contient le texte BURGUNDY WINE GRAPE. Ces 2 div sont contenues dans une div englobante (appelée container bg) ce qui les rend indissociables. Donc, il est inconcevable qu'on puisse faire défiler la div contenant le texte sans faire défiler aussi la div contenant les images. Ce n'est pas la même chose que si on utilise une marge gauche (frame) qui là serait indépendante de la colonne de droite.
Pour ce qui est de la barre de défilement, il est possible de jouer sur le container (à la ligne 14) et d'en ajouter une.
Le code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div.container {	overflow:hidden; width: 100%;}

va cacher automatiquement ce qui dépasse du container. Il est possible d'écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div.container {overflow:auto; width: 100%;}

qui va placer une barre de défilement si nécesssaire ou bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div.container {	overflow:scroll; width: 100%;}

qui fera apparaitre une barre de défilement d'office même si elle n'est pas nécessaire.

J'espère avoir compris sinon pouvez-vous m'envoyer un modèle montrant comment la colonne texte peut défiler sans les images.

[padouk]

j'ai bien compris votre message.

Je n'avais même pas vu dans le fichier css qu'il y avait déjà quelque chose en rapport avec la barre de défilement automatique...

Cependant, je n'ai pas de barre de défilement qui s'affiche... j'ai donc une page assez longue.

Je ne comprends pas pourquoi elle ne s'affiche pas !

Je vais tenter de faire des essais...

merci !

[padouk]

Pour ce qui est de la barre de défilement, il est possible de jouer sur le container (à la ligne 14) et d'en ajouter une.
Le code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div.container {	overflow:hidden; width: 100%;}

va cacher automatiquement ce qui dépasse du container. Il est possible d'écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div.container {overflow:auto; width: 100%;}

qui va placer une barre de défilement si nécesssaire ou bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div.container {	overflow:scroll; width: 100%;}

qui fera apparaitre une barre de défilement d'office même si elle n'est pas nécessaire.

J'espère avoir compris sinon pouvez-vous m'envoyer un modèle montrant comment la colonne texte peut défiler sans les images.

Quelque chose d'intéressant... j'ai dans mon fichier css après modif de ceci : div.container {overflow:scroll; width: 100%;}

Regardez le résultat dans la capture d'écran ci-joint, tout le texte est en bas à droite (le texte est passé sous les images) et j'ai des barres de défilement à droite et en horizontale dans le bas de page assez étrange...

Je n'y comprends rien...

[miss_socrates]

Oui c'est normal, le overflow:scroll insère d'office une barre de défilement verticale et horizontale (même si ce n'est pas nécessaire). En fait, il ne fallait rien changer au code.
Par contre, ce qui n'est pas normal c'est que vous n'ayez pas de barre de défilement verticale... mais peut-être essayer en changeant le overflow:hidden en overflow:auto du container ce qui va créer une barre de défilement automatique dès que nécessaire.
Que le texte soit passé sous les images, cela me semble normal aussi car je ne me rappelle pas avoir vu de propriété display: inline dans les div obligeant les div à se placer côte à côte, ce qui fait qu'elles se placent en colonne par défaut.
En fait, il faut une disposition tableau (mais qui n'est pas conseillée pour les mises en page) qui peut se faire par des div mises côte à côte par la propriété display: inline ce qui donnerait ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
div_container {width="900px"; min-width="350px"; height="auto"}/*la hauteur automatique fait que tout le texte sera affiché avec une barre de défilement dès que nécessaire et le min-width empêche sur des écrans étroits que la div texte ne soit rejetée sous la div image*/
div1 /*div image*/
{style="float: left; display: inline; width:30%; clear: both} /*ceci permet de rejeter la div sous la div précédente et évite qu'elle n'empiète sur le texte de la div précédente*/
div2 /*div texte*/
{style="float:left; display: inline; width:69%; clear:both"}

et ainsi de suite div3{}= div1, div4=div2, ce qui permet d'avoir l'image et le texte en regard comme je le suggérais dans mon message d'hier 22h30.

[padouk]

j'ai changé la div en "auto" mais rien ne se passe...

je vais regarder de plus prêt.

Merci encore pour vos réponse !