Salut,

Ce sont des notions que je n'ai pas encore compris, comment et à quoi servent les attributs Clear, Float, position etc ? Je sais qu'on peut mettre left/right/both/relative/absolute etc, mais je ne sais pas du tout quand et pourquoi le faire, pourtant il me semble que c'est extrêmement important comme notion à avoir pour le CSS

Quelqu'un aurait des explications claires ou un tuto simple svp ?

Ils existent plusieurs façons pour positionner tes éléments en CSS.

Float left, right, none
Position relative, absolute, fixed, static
Display block, inline-block, table, table-cell, none

J'ai pas mis toutes les propriétés disponibles, mais avec ça déjà tu à de quoi faire.

Tu peux voir les différents types ici : http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

Si tu utilises un float sur une image suivie d'un texte, ça permettra que ce texte s'adapte au contour de l'image. Grâce à un clear:left ou clear:right ou both, tu annuleras l'effet du float et le texte se directement placera en dessous au lieu de la contourner.

position relative et absolute c'est autre chose.

Dans le cas de la position absolue, tu pourras positionner ton élément à un endroit spécifique de la page. Un peu comme si tu spécifiais des coordonnées. Celui là se retirera du flux, c'est à dire qu'en positionnant en absolute, les éléments qui le suivent agiront comme s'il n'existait pas.

Pour le relative, tu décales la position de l'élément par rapport à sa position normale dans le flux.

Donc on utilise l'attribut absolute pour le footer ? Ou comment on fait pour que le footer se "colle" en bas de page ?

Oui tu peux. Y'a d'autres méthodes aussi.

Look ce lien :
http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/

Ce qui est important à retenir c'est le "min-height" de "page" et son positionnement relatif.

"Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre."

A lire : http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html

MErci pour les liens,

Sinon, j'ai une autre question qui n'a pas de rapport mais je ne veux pas spammer les topics :

http://i.imgur.com/z0tghAv.png
A gauche = comme c'est actuellement sur mon site
A droite = comme j'aimerais que ce soit.

En gros que ça aille à la ligne quand ça atteint un certain width.

Voici le code :

<div id="frontpagetext1">FishHunter's channel - Watch my channel ! $200 MTT</div>
<p id="frontpagetext2">Welcome to my channel ! Today I will bla bla bla bla bla bla lba bla bla bla bla bla bla bla bla bla bla bla bla</p>

1. frontpagetext1 {

clear:both;
float:right;
width:37%;
margin-top: 15px;
font-family: Bebas;
font-size: 18px;
}

1. frontpagetext2 {

clear:both;
float:right;
width:37%;
margin-top: 15px;
font-size: 14px;
font-family: 'PT Sans', sans-serif;
}

Voilà. C'est sûrement de la grosse merde, du coup je ne serais pas contre des explications concernant mes erreurs. Déjà, je ne sais pas vraiment quand choisir le tag <div> ou le tag <p>...

Merci

Donc, comment faire pour que ça aille à la ligne comme sur le screenshot ?

C'est parce que tu as mis une largeur en pourcentage.

Si tu essaies de réduire celle de ta fenêtre, tu verras que ça se mettra à la ligne.

Pour régler cela, tu peux par exemple fixer la largeur des deux blocs en px.

<p> c'est pour les paragraphes (balise de type block)
<div> est une balise universelle, de type block aussi. Tu peux l'utiliser comme tu le souhaites, mais l'idée est d'utiliser ces balises le plus efficacement possible et sans fioritures. Ca passe déjà par ne pas créer d'identifiants plus que tu en as besoin.

Hop : http://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/