28172 sujets

CSS et mise en forme, CSS3

IE7 float va à la ligne

Bonjour,

J'utilise le CMS Drupal pour générer du contenu, et je retrouve avec un soucis. Malgré mes recherches sur internet je n'ai pas trouvé la solution.

Voilà mon code simplifié qui affiche normalement :
icone Fichier PDF : nom du fichier

mais sous IE7 mon icone passe sur la ligne inférieure.


<div class="field field-type-filefield field-field-presse-pdf">
      <div>
             <div>Fichier PDF :</div>
             <div>nom du fichier </div>
             <div class="filefield-icon"><img scr="..." alt="mon icone PDF" />
     </div>
</div>

Nota:Je n'ai pas la possibilité de mettre ma div.filefield-icon en premier


et ma CSS

.field-field-presse-pdf div {
display:inline;
}

.filefield-icon {
float:left;
margin-right:0.4em;
}


J'ai entendu parler de position:relative mais sans succès...

Comment puis-je corriger ceci?

Merci de votre aide.
Bonsoir,

Quelques petites remarques, votre code xhtml contient des erreurs qui sont à corriger.
- Vous oubliez de fermer un div.
- Pour insérer une image quelconque, on utilise l'attribut src et non scr.

Une petite question, pourquoi attribuer des noms de classes aussi longs ?

En ce qui concerne votre problème, comme l'a fait remarquer masseuro, j'utiliserai un bloc conteneur que je positionnerai en position relative puis je me servirai des flottants right et left.

Essayez, vous devriez y arriver comme ça Smiley cligne .
Modifié par jQz (23 Dec 2009 - 21:08)
bonjour,

Eh oui, je sais la syntaxe utilisée n'est pas la plus simple, mais c'est du code généré automatiquement par Drupal et je ne peux pas le modifier.

Au début ça fait peur, il y a des div partout et des quantités de classes astronomiques.

Je vais essayer de mettre le conteneur en position relative, je vous tiens au courant.

MErci de votre aide.
Hum, je ne me suis jamais servi du CMS Drupal Smiley confus .

selinav2 a écrit :
Eh oui, je sais la syntaxe utilisée n'est pas la plus simple, mais c'est du code généré automatiquement par Drupal et je ne peux pas le modifier.


C'est dommage que vous ne puissiez pas le modifier, cela risque d'être un petit peu handicapant pour la suite.

Sinon, voilà comment je procéderai pour arriver au résultat attendu :


<body>

	<div id="conteneur"> 
		<div class="contenu"> 
            <div>Fichier PDF :</div> 
            <div>nom du fichier </div> 
            <div class="icone"><img src="..." alt="mon icone PDF" /></div> 
		</div>
	</div>
	
</body>


Et le code css :


#conteneur {
	position: relative;	
	width: 300px;
	height: 50px;
}

.contenu div {
	float: right;
}

.contenu div.icone {
	float: left;
}


Si d'autres personnes ont une autre méthode, qu'il l'a propose Smiley cligne .
Modifié par jQz (24 Dec 2009 - 13:49)
Si ton 2ème élément (le 1er élément étant le 1er float: left;) va à la ligne sous IE7 et pas les autres navigateurs, c'est parce qu'il te faut préciser les width de ces éléments que tu fais flotter.
Bonjour,

Il est totalement possible de redéfinir le code produit par Drupal (via le fichier template.php de ton thème).
Sujet clos
Aller à