Bonjour à tous et à toutes, au passage j'en profite pour m'incliner devant les tutos web qui sont pour moi the révélation Le codage et moi on a toujours été frère énemi jusqu'à découvrir les tutos du zéro ^!

Bon venons en à mon souci :

Je suis un grand fan de photoshop donc je me suis mis bille en tête de concevoir pour un ami, joueur invétéré de world of warcraft, un site destiné à sa "guilde". J'ai donc pour cela composé un design sous photoshop, puis découpé sous image ready.

Mais depuis que je connais les tutos du zéro j'ai cherché à intégrer moi même chaque tranche d'image pour faire seul la page sans l'aide des paramètres obtenus via image ready.

le lien vers la page

voici le résultat en ligne.

J'ai donc voulu le centrer (le design complet)et là ouch je me suis brûlé, perdu etc j'en passe...
Impossible de trouver comment et où ! Je sais comment le faire (cf tuto web xhtml et css) mais la page actuelle une fois ouverte sous notepad ressemble à tout sauf au code appris via ce site.

Donc si une âme généreuse observe le code de la page pour me dépanner pour mes futurs essais...
Je voudrais bien savoir comment y parvenir.

Seul j'ai essayé de monter mes images via le code et j'ai un peu trop de mal pour coller l'ensemble, ça part un peu dans tous les sens.

Je reussi à caser la tranche en haut à gauche et celle du bord gauche mais ensuite tout ce qui va se mettre sur le côté je coince...

shéma d'explication

pour shématiser vite fait : 1 et 2 sans soucis avec les balsies div, marge etc etc

3,4,5 et plus je coince elle ne veulent pas se mettre au bon endroit. Sur le shéma on voit des espaces blanc mais le but est de les combler comme un puzzle.

Si vous êtes en mesure de me guider... Ce sera avec plaisir !

Vive Khaz Modan...Oups desolé, mais j'y suis aussi

Si tu veux faire un design comme ca ( donc qui ne varie pas en fonction de la résolution du visteur ), c'est très facile en position absolue.

Tu fait tous les div nécessaire, a chacun tu affecte une classe, et dans le css tu fait:


Le .class1 sera tout en haut a gauche, le .class2 seras tout a gauahce à 150px du haut de la page, et tu place tout tes blocs ainsi

Citation : Yondaime

Si tu veux faire un design comme ca ( donc qui ne varie pas en fonction de la résolution du visteur ), c'est très facile en position absolue.

Tu fait tous les div nécessaire, a chacun tu affecte une classe, et dans le css tu fait:

.class1
{
position: absolute;
top: 0px;
left: 0px;
}
.class2
{
position: absolute;
top: 150px;
left: 0px;
}
...

Le .class1 sera tout en haut a gauche, le .class2 seras tout a gauahce à 150px du haut de la page, et tu place tout tes blocs ainsi

mmmmh et en fait même mes éléments comme sur le shéma : 5.6.7 et cie s'embriqueront aussi simplement ? Je veux dire pas de souci de calage une fois trouvé le réglage au px près

Et si je souhaite le centrer la formule magique sera éfficace sur l'ensemble ainsi disposé ?

POur centrer la totalité des blocs, il faut:

• Donner une taille a un bloc qui contient tout ( body par exemple )
• Faire un margin:auto; sur ce bloc

Après, oui, avec un poistionnement absolu, les blocs iront la ou tu leur diras d'aller et pas ailleurs

exact lu d'ailleurs dans le tuto : que pour centrer un design il faut une zone fixe
Erf dur pour un débutant de compiler tout ça

en clair ceci : shéma avec un body ?

Et puis je me permettre une autre question :

je voudrais faire ceci une fois mon design posé comme il faut :

hop un shéma de plus

superposer par dessus mon design du texte ! Cela est il gérable ? Et si oui faut il que je mette dans mon css des marges précises pour poser mon texte afin qu'il se loge parfaitement où je le souhaite où existe t il une astuce plus éfficace ?

mode boulet off