Elements de type bloc

Bonjour,

J’aimerai savoir comment faire pour mettre 2 éléments de type bloc l’un à côté de l’autre sur une page s’il vous plaît ?

Plus précisément, j’ai un bloc <div></div> et à sa droite j’aimerai ajouter un autre bloc.

Mes connaissances en CSS sont encore trop limité pour le moment, c’est pour cette raison que je fais appel à vous

Hello,

Il existe plusieurs solution et il est difficile de les détailler en un simple message :

1- afficher les éléments en display: inline
2- afficher les éléments en display: inline-block
3- afficher les éléments en display: table-cell
4- utiliser le positionnement flottant
5- utiliser le positionnement absolu
6- utiliser des techniques plus ancestrales telles que tableaux HTML ou frames (cadres).

Il existe de nombreux tutoriels (ici ou sur Openweb) pour te permettre de te dépatouiller.

Bon week-end

Bonjour Raphael,


Je vais exposer plus précisément mon problème parce que je ne sais vraiment comment prendre le truc....

Je dois afficher une image avec une largeur variable en fonction de certaines données du site. Par largeur variable, j'entends par la que mon image a une largeur fixe, mais on va afficher seulement les x premiers pixels. Pour pouvoir donc faire cela, j'ai mis l'image dans un bloc div en utilisant overflow:hidden pour que ce qui dépasse du bloc soit caché.

<div style="border-style:inset;overflow:hidden;width:50px;">
       <img width="<?php echo $img_width;?>" src="jauge.jpg">
</div>

Je voudrais afficher à la suite de ce bloc du texte, mais je ne sais pas comment faire ça

Pouvez-vous me donner un petit coup de main ou m'orienter vers un tuto ?

Merci d'avance
Modifié par yinyin76 (02 May 2010 - 11:38)

Techniquement, il faudrait que le bloc contenant ta div soit de type inline pour pouvoir accepter d'autres élément de type inline à côté de lui (comme du texte, par exemple). Le problème des éléments de ce type c'est qu'il est plus difficile de les modifier via du CSS (problème avec la taille, les marges, etc.). Une solution à ce problème est la propriété display: inline-block, qui permet de faire reconnaître un élément comme étant de type inline, mais également de lui appliquer des styles comme un élément de type block. En procédant ainsi, tu pourras donc appliquer différents styles à ton bloc contenant l'image (une largeur, etc.), sans qu'il ne force un retour à la ligne juste après, t'empêchant d'écrire du texte à côté.

Cela dit, cette propriété n'est évidemment pas reconnue par IE6 (c'eut été trop beau), mais il existe des moyens de contourner le problème, et tu peux les trouver dans cet article.

Il existe aussi d'autres méthodes, comme jouer avec la propriété float dont a parlé Raphael, mais je pense que ce serait sans doute plus contraignant ici à cause de la sortie du flux normal qu'elle entraîne.

Bonjour,

J'ai utilisé la propriété display:inline-block pour mon div, ça fonctionne très bien sur firefox 3 mais pas sur internet explorer 8 (le bloc suivant se place en dessous du bloc)

Je me suis tourné du côté des HasLayout mais ce n'est plus compatible avec la version 8.

Je suis coincé encore

Est-ce que tu peux me donner un petit coup de main pour que ça fonctionne sous ie 8?

Le

float:left;

peut t'aider, avec une feuille de style conditionnelle à IE

La propriété display: inline-block doit être ajoutée à chaque bloc que l'on veut aligner. S'il y a deux blocs à mettre côte à côté, les deux doivent avoir cette propriété.
Ca n'est pas normal que ça ne marche pas sous IE8. Je l'ai déjà implémentée (je peux même te montrer si tu veux voir le code), et ça ne doit pas poser de problème.

Pour ce qui est de float, ça marche mais c'est quand même plus "difficile" à gérer à cause de la sortie du flux.
Modifié par phpdoesnotcare (02 May 2010 - 19:16)

Merci de vos réponses...

Je n'avais pas songé du tout à utiliser le float:left, mais ça fonctionne bien sur ie et firefox. Pour ce qui est de la sortie de flux a gérer, justement ça m'arrange par rapport à ce que je fais donc c'est cool, il fallait que l'élément sorte du flux normal.

Pour ce qui est de display:inline-block phpdoesnotcare, j'ai dû faire mal faire les choses, j'y reviendrais quand j'aurai un petit peu de temps.

En tout cas ça marche à merveille, c'est super merci beaucoup tout le monde.