Bonjour à tous lez zéros comme moi et à tous ceux qui sont là pour nous aider!

Comme le titre l'indique, j'ai un petit problème de design.

Je cherche à faire un site au design "extensible" mais malheureusement, ce n'est pas expliqué dans les tutos (ou alors je l'ai pas trouvé).

J'ai cru comprendre qu'il fallait jouer avec les margins en regardant quelques fichiers CSS.

Mais mon vrai problème n'est pas là.
Sur la page d'entrée, j'ai mis deux images permettant d'accéder aux deux parties du site (traitant chacune d'un jeu) et deux petit paragraphe <p></p> permettant d'expliquer que les images sont des liens (ça se devien pas tout de suite...lol).
Dans mon CSS, je les ai placé (paragraphe et image) en absolute et je les alignes en pourcentage%.

En plein écran, pas de problèmes, c'est nickel et tout est aligné comme je le souhaite.
Si maintenant je réduis la fenetre, les textes et les images se chevauchent.
Je voudrais qu'il se crée une barre de défilement comme cela se fait avec le site du zéro si on le réduit.

Can someone help me please?

Merci d'avance à tous et désolé si ce sujet a déjà été traité, je n'ai pas trouvé la fonction recherchée sur le forum (quand j'vous dis que je suis un zéro! )

mets déja le lien du site ...

Désolé pour le lien, je n'avais pas encore publié la partie du site qui était faite.

Le voila : http://site.voila.fr/gifta/index.html

Vous pourrez trouver le CSS à cette adresse : http://site.voila.fr/gifta/index.css

L'adresse du site est provisoire, j'attend mes identifiants de connexion pour mon compte free.

Pour les sites extensibles, il y a deux ou trois tutos que tu pourras trouver dans la rubrique "Vos tutos" partie xhtml/css

C'est sympas mais ça ne me dit pas pourquoi j'ai un problème de chevauchement d'image quand je réduis la fenetre avec laquelle je consulte mon site...

J'ai lu un peu les tutos sur les designs extensibles mais je n'ai toujours pas réussi à régler mon problème.

Mes images et mes paragraphes se chevauchent toujours quand je réduis la taille de la fenêtre tout en se réduisant en largeur pour prendre en longueur comme cela le fait sur tout site normal!

Mais alors pourquoi sur le mien il y a-t-il en plus un chevauchement des différentes parties?
Il y a une commande spéciale pour empêcher ça ou c'est moi qui me foire totalement?

si sa se trouve cela vient de tes images ou alors de la disposition de tes différents block.

Essaie en ne fesant pas ton desgin exentsible pour voir si sa fait pareil et vérifie avec le W3C si ton code xHTML et CSS est bon, tu trouveras peut être des erreurs.

A+

Bon bah je vais essayer tout ça alors.

Je sais pas si les liens des validateurs XHTML et CSS sont dans les cours mais je pourrais les avoir svp?

http://www.siteduzero.com/tuto-3-138-1-le-w3c-et-les-standards-du-web.html

Merci beaucoup, je vais pouvoir me mettre au boulot.

Mais pas ce soir, j'suis trop claqué!
Je verrais ça demain!


Edit : J'ai fait validé mon CSS et surprise...
Il correspond aux normes de la W3C!

C'est super de voir un site aux normes mais qui ne fonctionne pas!

j'ai regardé de plus près et en fait ton code CSS est bon mais cest les proportions que ta mises qui ne sont pas forcément bonnes, je pense que cest sa chez moi sa fonctionnait :


ce que tu as mis.

il faudrait mettre :

*nbre a modifier suivant l'espace voulu entre le texte et l'image.
cest pour l'image de gauche, l'image de droite je ne sais pas a quoi sa correspond mais le principe est la. (j'ai testé en résolution 1024*748)

j'espère t'avoir éclairé.

A+

J'ai essayé chez moi et j'ai toujours le meme problème.

En plein écran (1024*748), le site passe nickel.

Mais quand je réduis la fenetre, voila ce que ça donne : <lien>http://site.voila.fr/gifta/probleme.JPG"</lien>

Tu comprends maintenant ce que je veux dire par chevauchement?

Je me posais une question :
Si je change ces deux liens :

Citation

<a id="TA_img" href="TA_travaux.html"<img src="images/TA_versus.jpg" alt="Boitier TA" title="Entrer sur la partie consacr&eacute;e &agrave; Total Annihilation" /></a>

<a id="SupCom_img" href="SupCom_travaux.html"><img src="images/SupCom_versus.jpg" alt="SupCom_artwork" title="Entrer sur la partie consacr&eacute;e &agrave; Supreme Commander" /></a>

Je les transforme en block grâce à un display et je leur donne une taille (égale à la taille de l'image) puis je leur mets une marge extérieure de quelques pixels.

ça les empechera de se chevaucher ou pas?

oui donner une taille a l'image suivant la résolution mais il faut avoir un script trouvant les infos des utilisateurs.

Après je sais pas trop je ne suis un pro en html et CSS je me débrouille juste.

A+

Après moultes essais, j'ai enfin réussi.

En refondant totalement le fixhier XHTML et le fichier CSS, j'ai pu réussir à m'en sortir.

Première page du site présente ici : http://site.voila.fr/gifta/index.html

Je rappelle que l'hébergeur est temporaire.
Pour ceux qui ont une résolution supérieure à 1024*768, vous verrez que le site n'est pas centré.
C'est normal, je ne l'ai pas fait pour le moment car cela pose des difficultés d'alignement entre les images et la ligne blanche du background.
Je verrais donc ça plus tard.