[AIDE] Intégrer des Cadres Html, CSS !

Salut a tous,Je suis débutant et j'aimerais savoir comment intégrer des cadres comme sur la pièce jointe:

une capture d'écran d'un site au hasard.

Merci

PS: en html ou CSS (pour CSS expliquer moi la manip svp ) =)

C'est une page bien complexe à intégrer pour un débutant :)

Tu vise peut être un peu trop gros :D

Les cadres peuvent être matérialisés à partir de

<div></div>

Dans lesquelles tu places le contenu.

Chacun de tes cadres rouge sera une div.

Comme il est très difficile en css de faire 3 colonnes (et ta page est architecturée en 3 colonne)

Je te conseille de poser d'autre div pour structurer la page.

Une seule div pour toute la colonne de gauche, que tu pose en float:left;

Et une div pour les deux colonnes du centre et de droite.

À l'intérieur de ce regroupement, tu peux réutiliser le procédé et re-poser deux div.

<div>
toute la colonne de gauche.
</div>


<div> Les deux colonnes au centre de la page
    <div> la colonne centrale </div>
    <div> la colonne de gauche </div>
</div>

Si tes contenus sont de taille fixe, je te conseille de déclarer ces div "structurante" en position:absolute;

tu pourra beaucoup plus facilement déclarer leur taille ( height pour la hauteur, et weight pour la largeur )

et leur position respectives en posant des contraintes sur leur top / left / right / bottom.

Par exemple la colonne centrale un top:0 et left:0

et la colonne de gauche un top:0 et right:0;

Puis tu gère leur largeur respective pour qu'elles se touchent "presque" (laisse toi une marge, même de 1% ça t'évitera des déboires. )

Évite de poser trop de contraintes, seulement celles nécessaires, laisse le plus possible la définition de la largeur et de la hauteur faire le reste du travail. 

Voir même ne pas les définir et laisser le contenu étendre la taille automatiquement au fur et a mesure du remplissage, c'est encore mieux !

Un bon design est un design évolutif :)

Attention : tout élément déclaré en position:absolute doit se trouver dans un élément lui aussi positionné.

Sois absolute, soit "relative"

En fait absolute signifie qu'il est positionné par rapport à cet élément contenant déclaré, et pas forcément par rapport à son container direct.

Le position : absolute; est très utile, mais résiste autant que possible à la tentation de tout fixer avec.

ça ralenti l'affichage et ça risque surtout de te créer des problèmes si les contenus changent de tailles. (par exemple si tu remplace un texte par un autre un peu plus long)

Le trèèès gros défaut des positions absolues, c'est que les tailles des éléments ne peuvent plus varier en fonction de leur contenu.

Pire, les éléments parent ne "voient" plus le contenu posé en absolute. Et se retrouvent avec une taille "à vide", alors qu'ils ont quelque chose dedans.

Donc ne l'utilise que pour les div structurantes, (et seulement si c'est nécessaire) pas pour les éléments qui sont posé dedans. ça te simplifiera beaucoup de travail.

PS : N'hésite pas non plus à utiliser d'autres balise que les div pour tes positions, en fonction de ce que tu mes dedans. Comme des balises <article> (va regarder le site du 0 sur la liste des balises HTML, c'est très bien expliqué)

ça peut sembler inutile, mais c'est très utile pour le référencement, ça aide les robots à comprendre ta page.

Et professionnellement, ça fait la différence entre un "pro" et un "amateur".

Souvent un cadre menu est en réalité une balise <ul> et les éléments du menu des <li>

Pour les traiter comme si c'était des div, accroche leur une propriété css : display:block;

Sinon tu risque d'avoir des comportements un peu étrange sur tes éléments.

Pour faire des alignements d'élément successif, comme pour un menu horizontal par exemple, (les <li> ) ils sont souvent posé en

ul#menu li{
display:block;
float:left;
} 

Le float permet de faire se coller les uns à côté des autres les éléments. et le display block de leur fixer une largeur et une hauteur. (pour centrer un texte dedans, utilise la propriété line-height à la même valeur que la hauteur de l'élément de menu)

Il existe aussi la propriété CSS3 "display:inline-block" mais tous les navigateurs ne la comprennent pas très bien.

vala.

PS :

Commence par faire une page avec seulement tes div, et une propriété css border: 1px solid red; pour voir les bordures.

Quand tout ça sera à ton goût tu repliera avec les contenus, mais comme ça tu ne sera pas perturbé par les éléments à l'intérieur.

PPS :

Je te conseille le plus possible d'utiliser les em ou les % pour définir la largeur et la hauteur. (ou les marges...)

les em c'est grosso modo la taille d'un caractère.

le % c'est par rapport à la taille du parent (utile si le parent change de taille. par exemple si ta page s'agrandie)

ça permet de changer la taille des éléments, (beaucoup de gens zoom sur les pages... encore plus depuis la sortie des smartphones )

Et surtout c'est beaucoup plus facile à modifier si on veux changer telle ou telle taille.

Ou pour s'adapter à la taille de l'écran (qui peut varier)

Merci infiniment pour ton aide, ça va m'aider grandement. Je vais également aller regarder la où tu m'as dit !

De rien

Hésite pas à poser des questions si tu as besoin d'aide :)

ça peut être parfois très galère de comprendre comment positionner ses éléments.

C'est une science très subtile :)

Et qui demande souvent beaucoup d'astuces et de petites techniques pratiques.