Web design (codage)

Voilà un petit tutoriel réalisé après une demande :

Je ne sais pas trop ce qu'il vaut, ce qui est sur c'est qu'il n'est pas du tout destiné aux personne cherchant la perfection, qui ne pourra s'acquérir qu'en pratiquant, je donne ici quelques bases, conseil, à vous de faire le tri ;)

Cliquez ici !

salut,

je te remercie infiniment !!

Eli

Très sympa, je trouve que pour une "introduction" au webdesign, c'est vraiment très bien.

Merci à toi Nima :Oeil:

Moi ce que je comprend très mal, c'est comment réellement faire un design extensible, en plaçant les %, mais si on met des %, comment on défini où est la zone? Parce que, j'ai essayé plusieurs fois, mais sur les grande résolution mon design est toujours sur la gauche...

Hum, si tu veux que ton design soit centré, tu dois ajouter les balises :

Code:

<center></center>

En fait je croit que le problème vient des div, vu que je met des truc comme top: 10px etc.. le design se colle à ses pixel quelque soit la résolution, ce qui fait que sur une plus grande résolution que 1024/768 le design est collé à gauche, même si je met center...

MERCO MON AMI!"

Pour faire un design extensible, il faut en effet mettre des tailles en pourcentage plutot qu'en pixel, la valeur 100% étant la largeur de l'ecran.

Pour ce qui est de centrer, ca n'a rien a voir... il y a deux possibilité : soit faire un div id="all" comprennant toutes les autres div, en mettant un alignement a cette div, soit mettre un div aligne="center" a toutes les div...

La meilleure solution a mon gout étant la première, je la detaille un peu :

Ouais , mais si a meton mon div header, il nets pas extensible je le mets en pixels meme si tout le reste de mon deisgn est en %?

On va prendre un exemple simple :

Nous avons seulement 2 div :

#header qui doit contenir l'image de notre header

#corps qui doit contenir le corps de notre message


On fait donc la div #all qui contient tout, centrée, ensuite dedans on met #header avec une largeur en %age, avec une couleur de fond et aprés, on ajoute #corps avec l'image de fond repeat-x et -y.

Ce qui donne :

#all {
width:100%;
margin: 0 auto;
}

#header {
width:100%;
height:hauteur du header en pixel;
background-color:#000000;
}

#corps {
width:100%;
height-min:20px;
background-url:url de l'image;
}




et dans le html, ca donne :

//Fermeture de la balise corps




Voila, comme ca le header n'est pas redimmensionné ^^


A plus et reposez encore des questions si besoin est!

ALors même s'il nest aps extensible il ne repeat x pas?

Je ne comprends pas ta question...

gekko a écrit:ALors même s'il nest aps extensible il ne repeat x pas?

En fait, tu auras bien ton image, et ensuite, sur les côtés de ton image, tu auras la couleur de fond déterminée :Oeil: !

Ah c'était ca la question? Ben la réponse a été donnée :D

d'accord msi :happy: