Scroll d'une div CSS + Saut de ligne imagesRésolu

Question

Bonjour,

J'ai deux petits problèmes à vous soumettre concernant le css, si vous voulez bien prendre une chaise  :

Voila mon premier problème :

J'ai acheté un kit graphique et je veux placer ma page avec un scroll.

#apDiv48 {
 position:absolute;
 left:95px;
 top:270px;
 width:636px;
 height:265px;
 z-index:48;
 overflow:scroll;
}

Voila le code. La page contient une liste générée par PHP, c'est le contenu d'une table d'une base SQL.
Je dispose donc d'un beau cadre déroulant pour afficher ma liste. 
Mais seule une partie de la liste se trouve dans ma page. Le scroll fonctionne bien.
Le reste de la liste est reporté en partie tout en bas de la page (mais vraiment tout en bas ).

Voici mon second problème, peut-être (et sans doute ) en relation avec le premier :

Dans cette division de la page, je désire afficher plusieurs images identiques à coté. Ce sont de petites images (32x21). Mais elle sont affichée l'une à la ligne de l'autre. Illustration :
Je voudrais :

J'ai :

Pas moyen d'empécher le retour à la ligne ? Pourtant j'ai tout essayé au niveau du code HTML. J'ai collé les balises img. Aucun espace ou retour à la ligne n'a pu se glisser entre. En vain...

Pourriez-vous m'aider ?
N'hésitez pas si vous avez besoin de renseignements supplémentaires, je répondrai vite. 
Je vous remercie pour votre patience, et d'avance pour votre courage

ggtry · Accepted Answer

Bonsoir,

Pour ta dernière question, dans ta balise table, tu peux mettre style="display:inline". Ca devrait marcher.
Mais il est probable qu'il y ait dans ton css un endroit qui force tes images à avoir un display:block, par exemple, quelque chose du genre (ce n'est pas forcément cela, mais il faut chercher dans ce sens) : 
.Style8 img {display:block}
(nb. block fait qu'un élément retourne à la ligne, inline qu'il reste sur la même ligne)
En fait, il serait mieux de chercher dans le css ce qui force tes images à revenir à la ligne que de faire un tableau.
Montre éventuellement tout le css.

Cordialement,

GGtry

ggtry · Answer

Bonsoir,

Une question bête : ta liste est bien encadrée par ton div ?
J'ai du mal à visualiser ton première problème.
(au fait, un z-index à 48, ça fait pas mal de superpositions !)
Peux-tu montrer aussi le css, et la div qui lui est en relation où s'affichent tes images ?

Cordialement,

Centauriel · Answer

Merci d'avoir répondu. La liste semble bien encadrée. Voici le code : Voici la déclaration CSS : .Style8 { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align:left; } Pour le z-index, ce n'est pas moi qui l'ai codé, vu que j'ai acheté le kit graphique. Il y a 48 déclarations CSS différentes, avec chacune un z-index correspondant à leur numéro...

ggtry · Answer

Bonsoir, Il y a plusieurs petits problèmes d'html : Une table ne doit pas être mise entre les balises ... . Tu dois fermer ton paragraphe avant d'ouvrir la table. Ensuite, la balise et non avec > seul. Toutefois, cela ne paraît pas vraiment expliquer le problème. Le problème semble être ailleurs dans la page. Cependant, à quoi te sert ta table, puisque tu n'ouvres qu'une seule ligne et une seule colonne dans cette ligne ? C'était un essai pour mettre les images côte à côté ? Dans ce cas, tu dois encadrer chaque image par les balises ... . Pour tes listes qui s'affichent mal, il n'est pas invraisemblable qu'il y ait aussi des problèmes d'html.

Centauriel · Answer

Salut,

La table à une cellule me servait pour la background color...
Je l'ai remplacé par un CSS, ce qui regle la question des balises .
J'ai ajouté les "/" là où il en manquait.
Ca ne fonctionne toujours pas.
J'ai donc fait l'astuce d'insérer les images dans un tableau avec 5 cellules sur une seule ligne. Bon ca fonctionne mais c'est lourd et pas beau du tout.
Le problème est que ce tableau en question est reporté à la ligne.
Est-il possible de le mettre à la suite du texte, sur la meme ligne, quitte à augmenter l'espace supérieur de la ligne de texte ?

Merci

Centauriel · Answer

En effet, la page était truffée de "display:block". J'ai pu donc changer par inline et cela fonctionne.
Mais je trouve néanmoins la synthaxe singulière...


#apDiv48 {
 position:absolute;
 left:95px;
 top:270px;
 width:636px;
 height:265px;
 z-index:48; 
 overflow:scroll;
}td img {display: inline;}



Sinon je n'ai toujours pas résolu mon premier problème :

La liste continue hors de la page en bas.
Cela doit etre un problème de css.
La déclaration css est la meme que ci-dessus.
l'overflow est bien callé sur "scroll"...
Est-il possible que le css du reste de la page, influe sur la partie qui ne fonctionne pas ?
En faisant une recherche, je vois que le "overflow" n'est déclaré qu'ici. C'est donc une autre instruction css qui pose problème ?

Merci pour ta patience

ggtry · Answer

Bonjour,

Le css que tu donnes est correct. Si donc tu as bien 
 ... ta liste ... 
, il est difficile de dire en ne voyant que cela pourquoi tu as ce problème d'affichage.
Eventuellement, tu peux passer ta page au validateur w3c : http://validator.w3.org/
Si c'est une page php et qu'elle n'est pas en ligne, tu peux copier l'html rendu dans le navigateur dans un fichier .htm et l'uploader.
Mais il risque de générer pas mal d'erreur (dans ce que tu donnes au début, par exemple, il y a aussi pas mal de trucs obsolètes...)
Peut-être y a-t-il simplement une erreur de balisage dans ton body. C'est ce que je dirais à vue de nez.
Regarde en tout cas ta page telle qu'elle est rendue en html... et montre éventuellement les endroits pertinents.
Encore une fois, je ne parviens pas exactement à visualiser ce que cela rend dans ta page : une partie de la liste est dans la div, et le reste en dehors ? Mais où en dehors ? Tu dis tout en bas de page. C'est-à-dire que ta liste est coupée en deux en deux endroits différents ?

GGtry

Centauriel · Answer

Salut,

Voila un petit screenshot :

http://img368.imageshack.us/img368/3549/screenshot1lk6.jpg

La partie encadrée en bleu est la division de style apDiv48

Comme tu peux le voir (entouré en rouge), la liste commence dans le cadre, et le scroll fonctionne en partie.
La liste est reportée en bas (entourée en rouge), et la partie entre les deux bouts visibles n'apparait pas du tout.

Le validator indique 691 erreurs sur la page (). Principalement des "alt" non spécifiés pour les images.

Voila la page html de résultat : http://www.gigasize.com/get.php?d=vl0rltoktrd

Merci.

ggtry · Answer

Bonjour, Oui, en effet, il y a beaucoup d'erreurs : mais beaucoup viennent du fait qu'il y a répétition. Mais faire la toilette des alt et des attributs obsolètes ne sera pas du luxe. Cela dit, ton problème vient bien d'un balisage incorrect. Pour commencer, à la toute fin de la page, il y a tout un passage bizarre où l'on retrouve une balise head, html... Il faut bien entendu supprimer (cf. ci-dessous). Pour ta liste, en effet, une petite image vaut mieux qu'un long discours. Le problème vient de ce que le , dans ta table est fermé deux fois : une fois juste après les img, une autre fois juste après la balise fermante de la table. Or, il n'y a qu'un div à fermer à cet endroit ! Comme tu as au tout début le puis un autre (qui eux ne sont pas à répéter), la première fermeture qui est en trop ferme d'abord , puis quand de nouvelles lignes sont générées pour montrer un second enregistrement, le second /div en trop ferme apDiv48. Le résultat est donc que le reste de ta liste n'est plus dans ta div apDiv48 et se promène ailleurs dans ta page. Plus concrétement, voici la fin de ton html avec les problèmes signalés: ---- yjftyjk, , ---- Location : Your location (optional) , ---- tjtfyj, ---- ---- gggggg, , ---- gggggggggg, ---- ~~XML menu.swf~~ Tout ce qui est en rouge barré ne devrait pas y être ! Surtout, pour ton problème, après la fermeture de table () tu as un qu'il faut enlever. A propos, évite de mettre du javascript dans le body, surtout entre tes div (ce n'est pas très commode pour se repérer, et il est en général recommandé, quand c'est possible, de mettre le javascript entre les balises head du document). GGtry

Centauriel · Answer

Ca fonctionne, c'est fantastique 

L'erreur venait je pense d'un copier/coller d'une page d'essai dans la page contenant le reste du site.
Les balises div ont du être coupées et les navigateurs ont interprétés comme ils pouvaient. 

Et bien, je n'ai plus qu'à te remercier chaleureusement pour ton courage de m'avoir aidé jusqu'au bout (de la nuit). Merci

Scroll d'une div CSS + Saut de ligne images

10 réponses

Votre réponse

Discussions similaires