Positionnement d'image en blocs

Bonjour a tous et a toutes !

Voila, je veux me mettre a jour et contruire mon site a l'aide de css. Je vous explique:
j'ai decouper l'interface de mon site web en photoshop en plusieurs images, j'aimerais les les coller dans ma page web mais je n'y arrive pas... j'ai lus quelques tuto mais n'ayant pas de pratique en css c'est asse difficile pour moi.

Quelques precisions: mon interface est compose d'un cadre et d'un "fond" qui est une texture, j'aurais trois boutons au dessu qui se change au passage de la souris et l'affichage se ferra au centre. Est-ce possible de faire ca a la maniere d'une iframe ? c-a-d quand je clique sur un bouton seulment le centre va se rafraichir.

Encore une chose mes boutons serront dans la "frame" comme ca il reste "clique" pour chaque page, si vous avez une autre solution je suis tout a fait preneur

Voici le decoupage approximatif:



La ligne rouge rapparait quand la souris passe au dessus de l'image est quand elle est clique


Merci beaucoup d'avance
Modifié par CyBerdoG (26 Feb 2010 - 14:17)

Bonjour,

Tu devrais t'orienter vers du PHP, il te permettra de simuler le comportement d'une frame. Sinon il y a le javascript mais là je peux pas t'aider, je viens juste de m'y mettre.

Après tu peux utiliser le CSS et sa propriété "hover" pour les effets aux survols. Si tu as des soucis avec ton CSS pour ton menu, montres-nous ton code pour qu'on puisse t'aider.

Avec un background comme celui-ci je te conseillerai d'éviter de le découper sinon tu risques d'avoir beaucoup de mal à placer correctement tes images ainsi qu'avoir le même affichage sur plusieurs navigateurs.

Merci beaucoup pour t'as reponse, j'ai finalement reussi a faire ce que je voulais en utilisant des div

 <div class="contenu" style="float:left"> </div>    /* pour les afficher l'un a cote de lautre */

#noutati { background:url(../images/interfata/noutati.jpg) top center; text-indent: -9999px; display:block; width: 213px; height: 115px;}

#noutati:hover { background-position: bottom center;} /* pour faire mon rollover */

Et sinon pour iframe j'ai abandonner car j'ai lu que ce n'est pas trop apprecier par w3c

CyBerdoG a écrit :
Et sinon pour iframe j'ai abandonner car j'ai lu que ce n'est pas trop apprecier par w3c

Tu as mal lu alors. L'élément IFRAME est valide en HTML4 (Transitional uniquement, certes) et en HTML5.
Les bonnes raisons de ne pas utiliser IFRAME quand on peut s'en passer tiennent à l'ergonomie (possibilité d'ajouter la page en cours aux favoris, comportement lors du rafraichissement de la page, hauteur figée des éléments IFRAME...) et au référencement (contenu de l'IFRAME indexé et accessible directement depuis les pages de résultats des moteurs).

En passant, j'ai croisé un text-indent: -9999px dans l'extrait de code ci-dessus. Je suppose que c'est pour cacher un texte HTML et pour n'afficher qu'une image de fond? Si oui, il faut noter que cette méthode n'est pas accessible. Si jamais l'image ne s'affiche pas (plusieurs raisons possibles à cela, du problème technique côté serveur à un blocage volontaire des images par l'utilisateur...), le texte du lien ne sera pas visible car on l'a masqué.

La technique de référence pour un bouton en image accessible est d'utiliser une image dans le code HTML avec un texte alternatif correct:

<a href="/contact/">
  <img alt="bouton-contact.png" alt="Nous contacter" />
</a>

Alors bien sûr on ne peut plus utiliser :hover pour faire le changement d'image, et il faut passer par JavaScript. Ce qui n'est pas bien compliqué, mais demande d'avoir au moins quelques notions en JavaScript.

Je suppose que c'est pas complique pour le faire en javascript mais je croyais que c'etais mieux pour la validation... Et puis pour avoir une annimation plus fluide avec le java script peut ont pre-charger les images au chargement de la page ?

Merci c'est conseils

Salut,

CyBerdoG a écrit :
Je suppose que c'est pas complique pour le faire en javascript mais je croyais que c'etais mieux pour la validation...

Ce n'est pas tant la validation que l'accessibilité qui peut poser problème.
Veille à ce que ton JavaScript ne soit pas intrusif !
Un peu de lecture à ce sujet...

CyBerdoG a écrit :
Et puis pour avoir une annimation plus fluide avec le java script peut ont pre-charger les images au chargement de la page ?

Bien sûr, de l'attribut "onload" pour le body à la gestion événementielle via un "addEvent" (addEventListener/attachEvent), tu n'as que l'embarras du choix.
Et avec un peu de jQuery, tu pourras même gérer des effets de transition au survol...

++
tm

ok je vais me documenter sur le sujet, mais j'ai une autre question si je peux me le permetre pour avoir ce genre de script jQuery faut il avoir une biblioteque ou autre chose d'installer ? Pour etre plus clair, mes futurs visiteurs vont ils devoir installer des plug in pour pouvoir avoir tous c'est effets ? Ceci tout navigateurs confondu.

Merci

edit: je vient de lire que le javascript est bon uniquement pour ameliorer certaines fonctions
Modifié par CyBerdoG (02 Mar 2010 - 22:53)