1 pièce(s) jointe(s)
Barre de défilement dans une page avec deux colonnes
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.
Barre de défilement dans une page avec deux colonnes
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.
Barre de défilement dans une page avec deux colonnes
Citation:
Envoyé par
padouk
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 ?
Barre de défilement dans une page avec deux colonnes
Citation:
Envoyé par
padouk
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:
div.container { overflow:hidden; width: 100%;}
va cacher automatiquement ce qui dépasse du container. Il est possible d'écrire
Code:
div.container {overflow:auto; width: 100%;}
qui va placer une barre de défilement si nécesssaire ou bien
Code:
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.
Barre de défilement dans une page avec deux colonnes
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:
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.
