probleme cadre et float - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  probleme cadre et float

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: probleme cadre et float (Lu 567 fois)

probleme cadre et float
« sur: le 03-01-2004 a 09:56:12 »

giius
Membre récent

Hors-Ligne

Messages: 1

Je suis un lama!

salut tout le monde

j'ai un petit soucis, j'aimerais aligner un texte a droite d'une image mais si te texte est trop court le cadre passe derriere l'image sous mozilla! mais pas sous ie, auriez vous une astuce svp?

/* html */

<div style="border: 1px solid #CCCCCC; width: 500px; display:block">
<img src="http://www.google.fr/intl/fr_fr/images/logo.gif" style="float: left" alt="" />
ici je veut mon texte :-)
</div>

[le PB si je met un height au div, sous mozilla meme si le texte est plus grand le cadre restera avec la hauteur donné, alors que sous ie le cadre s'adaptera]

merci d'avance

« Dernière Édition: le 03-01-2004 a 11:44:55 par giius »

Rapporter au modérateur

Re:probleme cadre et float
« Répondre #1 sur: le 04-01-2004 a 11:44:39 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

en fait mozilla respecte la norme CSS dc tu doit régler ton problème pour que ca marche ss mozilla. J'aitrouvé un article d'un membre du forum-webmater.Essai le tuto...
http://www.alsacreations.com/articles/div/

Rapporter au modérateur

Re:probleme cadre et float
« Répondre #2 sur: le 04-01-2004 a 12:59:24 »

TinMar
Habitué

Hors-Ligne

Sexe: Male

Messages: 268

Yo !

bon j'ai bossé un peu pour toi giius. En m'aidant du tuto de openweb :
http://openweb.eu.org/articles/initiation_float/

voici le code à mettre :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<style type="text/css">
.image {
float: left;
margin: 0;
}
.conteneur {
border : solid 1px #ccc;
width: 500px;
}
.spacer {
clear: both;
height: 1px;
}
</style>
</head>

<body>
<div class="conteneur">
<p class="image">
<img src="http://www.google.fr/intl/fr_fr/images/logo.gif" style="float: left" alt="" />
</p>
<p>
ton texte
</p>
<div class="spacer"> </div>
</div>
</body>
</html>