Empecher les retours à la ligne avant et après un Div ?

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Empecher les retours à la ligne avant et après un Div ?

Message par dj.dom »

Bonjour

J'aimerai mettre un Div entre deux images, sur la meme ligne, comme ça :

[image][Div][image]

mais un retour à la ligne automatique se créé avant et après le Div... Ce qui ressemble alors à :

[image]
[Div]
[image]


J'ai essayé d'utiliser "NoWrap" mais sans résultat.
Quelqu'un peut m'aider ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FREE; FDM)
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

De souvenir la balise "div" est du type block, et les blocks s'empilent les uns sur les autres...
img est du type in-line, s'affiche à la suite sur la même ligne:
il faut donc que tu force un changement de type pour le div en question par display:inline
Voir aussi alsacreations

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

Merci de ta réponse.

J'ai mis :

Code : Tout sélectionner

<img src="<mon image>" alt=""><div STYLE="display : inline" class="outer01"></div>
Mais j'ai toujours un retour à la ligne avant le div...

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FREE; FDM)
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Code : Tout sélectionner

    
<img style="width: 150px; height: 211px;" alt="carte" src=
    "carte-aero-2005_r.png">
<div style="display:inline;"> ...du texte dans le div... </div>
<img style="width: 111px; height: 98px;" alt="ded" src=  "carte-sia-2005_r.png">
Cela fonctionne mais attention à ce que la somme des largeurs ne soient pas supérieure au contenant général de ces 3 éléments, sinon le dernier élément doit passer à la ligne suivante.



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Le mieux à mon avis c'est d'utiliser les blocs flottants: http://www.yoyodesign.org/doc/w3c/css2/visuren.html

En tous cas, vivement le inline-block :) [/code]

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8
dj.dom
Gecko
Messages : 88
Inscription : 22 juin 2006, 02:58

Message par dj.dom »

J'ai finalement utilisé une seule grande image en fond de mon div contenant, et j'ai placé mes div par dessus avec des coordonnées absolues...
Mais merci quand-meme pour le code et l'explication, ça me sera surement utile une prochaine fois. :wink:

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; FREE; FDM)
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 9 invités