Discussion :

[stever34]

Salut je suis sur des tuto XHTML CSS

ou l'on indique que pour mettre du texte a coté et du texte en dessous il faut faire cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p><img src="../images/flash.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.imageflottante
{
   float: left;
}
.dessous
{
   clear: both;
}

séparation du contenu et du contenant vous avez dis ????

ben si je suis obligé dans mon code html de savoir ce qui va etre a coté et ce qui va etre en dessous, c'est deja faire la mise en page dans le code html ?

[MasterOfChakhaL]

il s'agit de bien utiliser les balises pour leur sens, ce qui n'est pas forcément évident dans l'exemple que tu as récupéré

Si sémantiquement parlant, il est normal que ton image soit accompagné d'un texte, je ne vois pas le soucis de faire ceci avec une liste de définition

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<dl class="photo" >
  <dt>
    <img src="truc.gif" alt="la photo machin" title="nous voyons machin qui... />
  </dt>
  <dd>
    la photo de machin qui..
  </dd>
</dl>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.photo dt{
  float: left;
}
.photo dl {
  clear:both;
}

Ou encore plus fort (mais malheureusement, ce n'est pas implémenté dans IE):
HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="machin.gif" alt="machin" title="observons machin qui blabla" />

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
img {
  float: left;
}
img:after {
  clear:both;
  content: attr(title);
}

perso, je trouve que ces exemples sont plus parlant concernant la séparation du contenu et de la présentation de celui-ci...

EDIT:
toujours pour la séparation contenu/présentation...
c'est une très mauvaise idée de donner un nom de classe qui a rapport avec la présentation.
Des classes telles que blue big left et cie n'ont aucune portée sémantique