[résolu] - 1 question sur du html "propre"

Bonsoir


cela fait quelques temps que je parcours ici et là les différents sites/forums francophones consacrés aux standards web (xhtml, css,..) et ai décidé de ré-créer un petit site perso en suivant ces principes.

Jusque là tout va bien sauf que .....

Je souhaiterais utiliser une fonction permettant d'afficher/cacher un block et ai trouvé sur le net cet aide

sauf qu'à la place de

<ul>
    <li><a href="http://[...]" >Daifen</a></li>
    <li><a href="http://[...]" >Strategie Online</a></li>
    <li>...
</ul>

je souhaiterais mettre des images. Or si j'enleve les balises <ul>, le principe ne fonctionne plus et si je les laisse et en introduisant les images entre (pas bien ), le site n'est plus valide selon le W3C

Je me retrouve donc un peu bloqué et aimerais avoir votre avis/aide sur la question !!!


Voilà vous savez tout : toute aide, tout lien pouvant me conduire vers la satisfaction personnelle de réaliser un p'tit truc sympa est le bienvenu.

En vous remerciant d'avance pour vos réponses
Modifié par Xstof (28 Apr 2006 - 08:33)

Bonjour Xstof et bienvenue sur Alsacréations ,

Pourquoi ne pas mettre tes images dans les éléments de liste (<li>) ?

[... ]
<ul>
    <li><a href="http://[...]" ><img alt="texte alternatif" src="monimage.gif" /></a></li>
</ul>
</div>

Bonsoir Igor


et bien en fait j'y ai pensé mais au niveau de la présentation c'est plutot bof et je pensais plutot faire quelque chose qui ressemblerait à ceci

http://img137.imageshack.us/img137/3112/images4dn.gif


Une présentation un peu plus sympa, plutot qu'une liste d'images


mais s'il ne m'est pas possible de faire autrement c'est cette méthode que je prendrais
Modifié par Xstof (26 Apr 2006 - 23:02)

Dans ce cas, tu te contentes d'une seule image, ou à la rigueur une image dans un paragraphe. Et on vire la liste (ul et li).

<div id="realisations">
	<h2 onclick="toggle('realisations')">Pour visionner quelques unes de mes réalisations</h2>
	<p><img src="monimage.png" alt="exemples de réalisations" /></p>
</div>

Ensuite, la fonction JavaScript de la page que tu as indiquée attribue la classe "minimized" à la div#realisations lorsque l'on clique sur le h2. Il suffit de dire que le paragraphe doit être caché lorsque la div a pour classe "minimized".

#sidebar .minimized p, #sidebar .minimized ul { display: none; }

C'est d'ailleurs ce que fait le tutoriel ! Normalement, pour son tutoriel, il n'aurait besoin que de ça :

#sidebar .minimized ul { display: none; }

Mais il semblerait qu'il ait prévu le cas où on n'utilise pas une liste (ul) mais un paragraphe (p).

Note : les #sidebar sont là parce que dans son exemple, le tout est à l'intérieur d'un bloc ayant pour identifiant "sidebar". Si ce n'est pas ton cas, il faut faire sans :

.minimized p { display: none; }

Au fait, sympa ces créations très pixel-art

bonsoir mpop et merci pour la remarque sur mes petites réalisations (le môssieur a du gout )


effectivement l'idée de l'image unique ne m'a pas effleurée....et je me frappe pour cela (j'aurais vraiment du y penser )


mais surtout de m'avoir conseillé de transformer l'"ul" en, "div" ..... car je ne pensais pas "avoir le droit" de le faire...et effectivement cela fonctionne à la perfection


content je suis car je n'ai plus qu'a me remettre la tete dans la prog afin de terminer cela au plus vite
Modifié par Xstof (27 Apr 2006 - 22:01)