code HTML pout un noob SVP

Forum de discussions « XHTML - HTML - CSS »

Retrouvez les publications relatives à ces discussions dans nos rubriques CSS, HTML, XHTML.

Encodage UTF-8 publié par crocxx
Créer des tableaux avec N cellules par ligne (modulo) publié par telnes

code HTML pout un noob SVP

liste des forums liste des discussions Participer à la discussion

Message publié le lundi 22 février 2010 - 19h38 par archag.

Bonjour,

Imaginez un panel d'images en nombre couvrant la page du browser
Ce que je voudrais bien savoir c'est quand on réduit à la souris la fenetre du browser les images, qui ont tendance à partir hors champ , comment faire pour qu'elles passent automatiquement à la ligne pour rester le plus longtemps possible visible quand on réduit la fenetre

participer

Message publié le lundi 22 février 2010 - 19h43 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

en faisant un code 'propre' ... :D ...

Non, je déconne, peux tu mieux expliquer ce que tu cherches à faire, ainsi que la base que tu as déja réalisé, et nous te dirons comment l'optimiser pour obtenir ce que tu souhaites ... une page en ligne à la limite ??

t'as testé de faire une div contenant tes images ?? en réduisant la div, les images passent automatiquement à la ligne ... ^^

participer

Message publié le lundi 22 février 2010 - 19h59 par archag.

je ne sais pas c'est pour un site en wiki et je peux ajouter du code wiki ou html
je peux donner un lien mais c'est une page qui pourrait émuler des opinions et ce n'est pas aproprié ici sur le forum

participer

Message publié le lundi 22 février 2010 - 20h08 par archag.

quand on redimensionne une fenêtre d'un dossier Windows avec des images en vignettes, il y a un agencement automatique qui redispose les images pour qu'elles soient le plus possible visualisables. Elles passent à la ligne pendant le mouvement de rapetissement. Avec un tableau standard en HTML ce n'est pas le cas. Les images restent alignées en rang d'oignons quitte à disparaitre hors cadre en mesure du rapetissement opéré sur la fenetre du browser.

Sur google images par exemple le réagencement dans la mise en page est comme avec le dossier Windows expliqué plus haut. Donc c'est possible pour une page Web.

participer

Message publié le lundi 22 février 2010 - 20h22 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Avec un tableau standard en HTML ce n'est pas le cas. Les images restent alignées en rang d'oignons quitte à disparaitre hors cadre en mesure du rapetissement opéré sur la fenetre du browser.

C'est bien ce que je disais en rigolant, Un tableau est fait pour gérer des données, et non pas pour gérer un design !...

testes ceci :


<style type="text/css">
.viewFrame img{
  margin:10px;
}
</style>
<div class="viewFrame">
  <img src="monImg01.png" />
  <img src="monImg02.png" />
  <img src="monImg03.png" />
  <img src="monImg04.png" />
  <img src="monImg05.png" />
  <img src="monImg06.png" />
</div>

Et dis moi si ça ne conviens pas mieux à tes besoins !??

participer

Message publié le lundi 22 février 2010 - 20h38 par archag.

merci pour le div que j'ai fait en html en local et ça fonctionne bien. Je dois encore essayer sur mon site wiki. J'espère que ça ira car je suppose qu'il n'y a pas d'équivalent...

participer

Message publié le lundi 22 février 2010 - 20h51 par archag.

dès que je place le div viewframe dans un tableau wiki les images s'alignent les unes en dessous des autres en ligne droite au milieu de la page mais c'est normal je suppose car mes images sont elles même déjà dans des div

j'utilise des div parce que les agrémentations graphiques sont pauvres sur wiki...

je vais illico essayer de te transmettre en MP un exemple de code que j'utilise

participer

Message publié le lundi 22 février 2010 - 20h57 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

et en mettant des span !? pour contenir tes imgs ??

participer

Message publié le lundi 22 février 2010 - 21h15 par archag.

je dois faire un nouvel article (une page web sur wiki c'est un article traitant d'un sujet) qui met en ligne les pages d'un manuel scolaire de géographie élémentaire. Chaque page est une illustration colorée en format jpg.
D'ou ma question sur le forum pour afficher une collection de vignettes. Quand on clique sur une vignette la page du manuel (jpg) vient en grand. Tout ça ça va mais c'est la dynamique de l'ordre de rangement des previews qui doit s'adapter selon les grandeurs d'écran, la résolution d'affichage des visiteurs et des redimensionnements de fenêtre du browser avec la souris.

le div viewframe répond à ces questions si je peux l'adapter à un wiki

pour le span par moi même je passerai ma journée de demain à tester...

participer

Message publié le lundi 22 février 2010 - 21h30 par coeos. coeos.pro

Bonsoir, à mon avis (si j'ai bien compris l'effet souhaité), il suffit de mettre toutes les images en float:left;
On peut définir un div et ensuite les images :
<div id="collection_vignettes">
<img src="monImg01.png" />
<img src="monImg02.png" />
<img src="monImg03.png" />
<img src="monImg04.png" />
<img src="monImg05.png" />
<img src="monImg06.png" />
</div>

et dans le css :
#collection_vignettes img
{float:left;}

Vous en pensez quoi?

participer

Message publié le lundi 22 février 2010 - 21h32 par archag.

participer

Message publié le lundi 22 février 2010 - 21h34 par archag.

coeros je viens de voir ta reponse

merci à toi aussi

a demain

(on ne peut pas éditer les post pour les modifier ??)

participer

Message publié le mardi 23 février 2010 - 10h43 par Nogard.

Bonjour à tous, je viens de m'inscrire et je suis tombé sur ce post.

Je dis peut-être une bêtise, mais un affichage de vignettes tel que tu nous le décris, moi je trouve q'un tableau est plutôt adapté (données rangées en tableau, ça se vaut), maintenant, si les dimensions de ton dis tableau sont en %, est-ce qu'il ne se redimenssionne pas directement quand tu réduis la page ? Si avec ça tu mets tes images avec les styles qu'on t'a indiqué ci-dessus, est-ce que ça ne pourrait pas marcher ? Pas de quoi tester sur mon poste du boulot, pas trop réflechis en profondeur, je dis ça instinctivement (et pas Einsteintivement ^^). Si j'ai raté un épisode, il faut me le dire ^^.

participer

Message publié le mardi 23 février 2010 - 10h59 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Si j'ai raté un épisode, il faut me le dire ^^

Bin ouais, le but est que les images passent à la ligne au redimensionnement de la page, une table, n'est pas adapté.
En plus une table est faite pour mettre en forme des données et non pour ranger des éléments ... enfin, c'est mon avis !

L'idée de "archag" de placer ses img dans des div (CSS :: float:left) permet de conserver un alignement propre.
Donc, une table n'as aucune justification !!

PS :: Bienvenue Nogard ;)

participer

Message publié le mardi 23 février 2010 - 11h55 par archag.

nogard les cellules du tableau gardent leur place... une cellule ne passe pas à la ligne puisque sa place vis à vis des autres est définie dans le code. Les images qui sont dans ces cellules se rapprochent les une des autres quand on rapetisse la fenetre, c'est le seul effet obtenu.

les div donnés plus haut fonctionnent mais pas avec le wiki. Les images s'obstinent à s'aligner verticalement (à gauche, à droite ou au centre...)

participer

Message publié le mardi 23 février 2010 - 12h16 par archag.

bon bhain j'ai trouvé la solution (qui était trop simple comme souvent)

participer

Message publié le mardi 23 février 2010 - 12h17 par archag.

résolu

participer

Message publié le mardi 23 février 2010 - 12h29 par coeos. coeos.pro

C'était du float:left comme je l'avais indiqué ou il y a une autre solution, du genre mettre les photos cote à cote tout simplement (je connais pas trop wiki)

participer

Message publié le mardi 23 février 2010 - 13h17 par archag.

en HTML quand on fait
<img src="img1.jpg" /> <img src="img2.jpg" /> ... et ainsi de suite ça ne va pas. Quand on réduit la fenetre les images ne passent pas à la ligne.

en wiki quand on fait l'équivalent de ci- dessus c'est
[[Image:01.jpg|100px]][[Image:02.jpg|100px]][[Image:03.jpg|100px]] etc...
là ça marche. Les images passent à la ligne. Il y a un rangement dynamique qui s'adapte.

J'avais commencé mes recherhches par le HTML parce que je n'imaginais pas que l'effet était différent de l'équivalent wiki au final.

J'ai bien mis noob dans le titre... ce n'est pas pour rien.

participer

Message publié le mardi 23 février 2010 - 13h35 par coeos. coeos.pro

OK, tu pourra nous donner ton URL quand ce sera fini, histoire de voir ;)
Au fait c'est sur quel sujet ?

participer

Message publié le mardi 23 février 2010 - 13h45 par archag.

voir MP

participer

Message publié le mardi 23 février 2010 - 14h17 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

en HTML quand on fait
<img src="img1.jpg" /> <img src="img2.jpg" /> ... et ainsi de suite ça ne va pas. Quand on réduit la fenetre les images ne passent pas à la ligne.

C'est curieux, chez moi ça marche bien pourtant !...


<html>
<head>
<style type="text/css"> 
.viewFrame img{
   margin:10px;
   height:200px;
   width:200px; border:1px solid; 
} 
</style> 
</head>
<body>
<div class="viewFrame">
   <img src="monImg01.png">
   <img src="monImg02.png">
   <img src="monImg03.png">
   <img src="monImg04.png">
   <img src="monImg05.png">
   <img src="monImg06.png">
 </div> 
</body>
</html>

Là, j'ai mis des dimensions et une bordure pour que l'on se rende compte vu qu'il n'y a pas d'images réelles ... fais un copier/coller de ça, enregistre le dans un .html, lances le dans ton navigateur et me dis pas que ça ne va pas à la ligne !??

@coeos :: le float est nécessaire pour des éléments de types "block", les images étant de type "inline", ça ne sert à rien, elle ont par nature un comportement de type float:left !...

Pour en revenir à notre amis Gogole, c'est un tricheur car il mettent les images dans un tableau, et au redimensionnement de la page, il vérifie en javascript le nombres de colonnes il est préférable de définir pour l'affichage des images, et en fonction, il réécrit tout son script ^^ ...

Bon, sinon, @++

participer

Message publié le mardi 23 février 2010 - 14h19 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

oups ^^... désolé pour les "/>" manquant dans les imgs, j'ai copié le code généré par ff sans le corriger :$

participer

Message publié le mardi 23 février 2010 - 16h00 par archag.

maintenant quand je reessaie ça va. Les images passent à la ligne... Je ne comprends pas. Je dois être colloqué à l'hosto parce que je ne sais même plus ce que je fais. J'av&ais la ferme conviction que ça ne marchaait pas quand je l'ai fait la 1ere x

mon probléme était un faux problème
dsl

participer

Message publié le mardi 23 février 2010 - 18h14 par boulaneige. Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche] - http://www.boulaneige.com

Salut

[[Image:04.jpg|center|100px]]

Comme l'a dit nours, l'élément img est de type inline, il devrait donc passer à la ligne. Que génère le "center" ? Ca ne mettrait pas des marges auto et/ou un changement de display par hasard qui "pousserait" donc le reste afin de prendre toute la place disponible ?

participer

Message publié le mardi 23 février 2010 - 19h39 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)

Désolé Boulaneige, mais j'ai attendu que tu vienne pour expliquer le type inline/block des éléments (étant plus dans ton domaine que dans le mien^^), mais devant ta nonchalance, j'ai du m'y résigner ...

participer

Message publié le mardi 23 février 2010 - 19h48 par coeos. coeos.pro

l'élément img est de type inline, il devrait donc passer à la ligne

C'est pas plutot le contraire boulaneige ? les éléments blocks renvoient à la ligne

participer

Message publié le jeudi 25 février 2010 - 11h47 par boulaneige. Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche] - http://www.boulaneige.com

Affreux nours : t'as bien fait, je n'ai pas l'exclu !!! Mais tu seras fouetté quand même :-)
// pis j'ai pas mal de boulot
// pis on est en guerre, on prend sévère MDR

coeos : c'est tout à fait ça, mais si le "center" génère un display:block, adieu le comportement inline.

Je ne connais pas du tout wiki, mais on retrouve cette syntaxe dans de nombreux CMS pour centrer les images : changement du type de l'élément img, rajout de marges, et hop, l'image "pousse" tout et est centrée.

participer

Message publié le dimanche 28 février 2010 - 15h08 par archag.

re bonjour
cette x le probleme est différent en ce sens que je n'arrive pas à aligner la collection d'images sur une même ligne de base. Sur les tutos et tutti quanti on montre un alignement horizontal d'images quand ELLES ONT TOUTE LA MEME HAUTEUR !!! Ce n'est pas réaliste !

Je donne à toutes mes images la même largeur, ce qui leur donne des hauteurs différentes les une apr rapport aux autres pour garder leurs proportions propres...

Les images ont naturellement tendance à s'aligner verticalement au centre (valign top ou bottom est inopérant)

Je voudrais bien que leurs lignes de base soient toutes sur la même ligne horizontale (la situation des lignes du haut des tableaux n'ont pas d'importance)

participer

Message publié le dimanche 28 février 2010 - 15h10 par archag.

hum !! dans ma derniere phrase je voulais dire

"Je voudrais bien que leurs lignes de base soient toutes sur la même ligne horizontale (la situation des lignes du haut des IMAGES n'ont pas d'importance)

participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Les 5 dernières discussions

input text écrit à la fin seulement !!!!! (2 réponses)
splash screen (2 réponses)
supprimer des dossiers sur ftp après un hack (2 réponses)
fenetre popup (10 réponses)
code javascript (1 réponse)

all html : Le portail des webmaster

Forum de discussions « XHTML - HTML - CSS »

code HTML pout un noob SVP

Les 5 dernières discussions