begin process at 2012 02 05 03:34:28
  Trouver un code source :
 
dans
 
Accueil > Forum > 

ASP / ASP3

 > 

Web 2.0

 > 

CSS

 > 

Scroll d'une div CSS + Saut de ligne images


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Scroll d'une div CSS + Saut de ligne images

samedi 28 juin 2008 à 18:56:35 | Scroll d'une div CSS + Saut de ligne images

Centauriel

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

samedi 28 juin 2008 à 22:53:51 | Re : Scroll d'une div CSS + Saut de ligne images

ggtry

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,
lundi 30 juin 2008 à 18:20:08 | Re : Scroll d'une div CSS + Saut de ligne images

Centauriel

Merci d'avoir répondu.
La liste semble bien encadrée.
Voici le code :

<div class="Style8">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
  <p> Name :
<input name="pseudofield" type="text" id="pseudofield" size="20" />
    Notation :
    <table bgcolor="#C9DD0A">
    <tr>
    <td>
    <img src="images/etoile_orange.png" name="tick1" width="23" height="21" onclick="note1();">
    <img src="images/etoile_orange.png" name="tick2" width="23" height="21" onclick="note2();">
    <img src="images/etoile_orange.png" name="tick3" width="23" height="21" onclick="note3();">
    <img src="images/etoile_white.png" name="tick4" width="23" height="21" onclick="note4();">
    <img src="images/etoile_white.png" name="tick5" width="23" height="21" onclick="note5();">
    </td>
    </tr>
    </table> 
   <input name="notefield" type="hidden" id="notefield" value="2" />
    <center><textarea name="messagefield" id="messagefield" cols="80" rows="5"></textarea>
    <input type="submit" name="boutonenvoyer" id="boutonenvoyer" value="Send" /></center>
  </p>
  <input type="hidden" name="MM_insert" value="form1" />
</form>
</div>

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...

lundi 30 juin 2008 à 19:00:58 | Re : Scroll d'une div CSS + Saut de ligne images

ggtry

Bonsoir,

Il y a plusieurs petits problèmes d'html :
Une table ne doit pas être mise entre les balises <p> ... </p>. Tu dois fermer ton paragraphe avant d'ouvrir la table.
Ensuite, la balise <img ... doit se fermer avec /> 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 <td> ... </td>.
Pour tes listes qui s'affichent mal, il n'est pas invraisemblable qu'il y ait aussi des problèmes d'html.
lundi 30 juin 2008 à 20:38:44 | Re : Scroll d'une div CSS + Saut de ligne images

Centauriel

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 <p>.
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

lundi 30 juin 2008 à 21:00:54 | Re : Scroll d'une div CSS + Saut de ligne images

ggtry

Réponse acceptée !
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
mardi 1 juillet 2008 à 23:42:45 | Re : Scroll d'une div CSS + Saut de ligne images

Centauriel

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

mercredi 2 juillet 2008 à 13:01:26 | Re : Scroll d'une div CSS + Saut de ligne images

ggtry

Bonjour,

Le css que tu donnes est correct. Si donc tu as bien <div id="apDiv48"> ... ta liste ... </div>, 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
vendredi 4 juillet 2008 à 15:53:25 | Re : Scroll d'une div CSS + Saut de ligne images

Centauriel

Salut,

Voila un petit screenshot :

[ Lien ]

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 : [ Lien ]

Merci.

vendredi 4 juillet 2008 à 17:12:17 | Re : Scroll d'une div CSS + Saut de ligne images

ggtry

Réponse acceptée !
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 <div align center>, 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 <div id="apDiv48"> puis un autre <div class="Style8"> (qui eux ne sont pas à répéter), la première fermeture </div> qui est en trop ferme d'abord <div class="Style8">, 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:
  
        <table width="500" border="0" align="center"  heigth="100">
      <tr bgcolor="#E9E9E9">
        <td><span class="Style7">&nbsp;yjftyjk</span></td>
        <td width="150">
          <div align="center">
                  <img src="images/tick_orange.png" width="23" height="21">
                  <img src="images/tick_orange.png" width="23" height="21">
                  <img src="images/tick_orange.png" width="23" height="21">
                  <img src="images/tick_white.png" width="23" height="21">
                  <img src="images/tick_white.png" width="23" height="21">
          </div>       </td>
      </tr>
              <tr>
        <td bgcolor="#C9DD0A"colspan=2>
        <span class="Style8">Location : Your location (optional)</span>
        </td>
        </tr>
              <tr>
        <td colspan=2><span class="Style8">tjtfyj</span></td>
      </tr>
      <tr></tr>
     </table>
               </div>       </td>
  
        <table width="500" border="0" align="center"  heigth="100">
      <tr bgcolor="#E9E9E9">
        <td><span class="Style7">&nbsp;gggggg</span></td>
        <td width="150">
          <div align="center">
                  <img src="images/tick_orange.png" width="23" height="21">
                  <img src="images/tick_orange.png" width="23" height="21">
                  <img src="images/tick_orange.png" width="23" height="21">
                  <img src="images/tick_white.png" width="23" height="21">
                  <img src="images/tick_white.png" width="23" height="21">
          
       
          </div>       </td>
      </tr>
            <tr>
        <td colspan=2><span class="Style8">gggggggggg</span></td>
      </tr>
      <tr></tr>
     </table>
               </div>       </td>
  
      
  </div>


</td>
</tr>
</table>
</div>
</div>
<div id="apDiv2">
<html>
<head>

<title>XML menu.swf</title>

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

</body>
</html>

  </div>
</body>
</html>

Tout ce qui est en rouge barré ne devrait pas y être !
Surtout, pour ton problème, après la fermeture de table  (</table>) tu as un
</div>       </td> 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

1 2

Cette discussion est classée dans : images, ligne, page, liste, scroll


Répondre à ce message

Sujets en rapport avec ce message

évenement sur liste modifiable [ par loulou ] Bonjour,Je programme en asp.J'ai crée un tableau en asp dont la 2eme colonne est constituée de listes modifiables au niveau de chaque ligne. Je veux q Upload et affichage d'images [ par nephiled ] Bonsoir à tousContexte :J'ai un script d'upload de fichier qui fonctionne très bien.Je veux uploader des images dans un répertoire "rep".Aprés, je dés Upload et affichage d'images [ par nephiled ] Bonsoir à tousContexte :J'ai un script d'upload de fichier qui fonctionne très bien.Je veux uploader des images dans un répertoire "rep".Aprés, je dés Export vers Excel à partir de page ASP ???? [ par tipnic ] Bonjoiur, j'aimerais savoir si il est possible d'exporter une liste vers une feuille Excel à partir d'un page ASP ?exemple: la requête sur ma page ASP [ASPX]Problème avec les images dans la page de login.aspx [ par Jeankiki ] Bonjour à tous,J'ai un fichier Web.Config dans le dossier "/" du site et quand je démarre la page login.aspx je vois sur la page web dans la barre d'é récupérer les données d'une liste dans une autre page [ par foofur ] Bonjour a tous et à toutes,Je dispose de 2 listes : une contenant les champ d'une table et l'autre permettant de choisir comment l'ordre de ces champs Pagination d'une liste avec N° de page [ par gils58 ] Je suis à la recherche d'un code ASP qui permettrait de se déplacer directement sur une page en plus de SUITE ou RETOUR. un peu comme sur ce site lo Comment afficher une liste d'images classées [ par Caps ] Bonjour, je souhaiterais faire afficher les images d'un repertoire (ça, j'y arrive) mais classées par ordre de création et non par ordre alphabetique, probleme de formulaires + affichage multipages [ par zincben ] AU SECOURS!!!!!. Voila j'ai un probleme. J'ai une table avec des champs de type case à cocher(Moules,Metiers,Maquettes,Modeles). J'ai une premiere pa liste deroulante / tableau [ par julevosgien ] J'ai une page permettant de selectionner un nom parmi une liste deroulante, en validant cela m'affiche une nouvelle page avec un tableau recapitulati


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,090 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales