Problèmes d'affichage avec FF

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problèmes d'affichage avec FF

sanpellegrino

Bonjour !

Quelques problèmes d'affichage avec Firefox 1.0.1 et 1.0:

Les <hr> ne s'affichent pas: FF laisse l'espace mais n'affiche pas le trait, tandis que sous IE ça passe très bien...
Sur une page j'ai un div conteneur, dans lequel j'ai un div texte, précédé d'un div pres (qui est un FIR). Pour ce dernier j'ai mis clear: right, pour éviter que mon texte ne s'affiche à le droite de celui-ci si la fenêtre est trop large. Sous IE ça passe impec, tandis que sous FF mon image se retrouve en dehors des div texte et conteneur

Mon code CSS:

.conteneur{
width:100%;
margin:0px;
}

.centre{
padding:10px 10px 20px 10px;
text-decoration:none;
border:1px solid #FFCC66;
margin:3px 210px 5px 1px;
text-align:justify;
}

.pres{
display:block;
float:left;
background:transparent url('pres.gif') no-repeat;
background-position:0px 25px;
width:100%;
height:150px;
clear:right;
}

Merci d'avance de vos idées !

---------------
Got spyware ? | HFR HijackThis Tutorial

Publicité

FlorentG

Envoi aussi un bout d'HTML

rompi

- <hr/> fonctionne très bien sous Firefox, la vérité est ailleurs...

- c'est pas très claire ton explication, tu parle soudainement d'une image mais de quoi parle tu ? pres.gif ?

tu veux pas mettre un bout de code html en plus ?

sanpellegrino

Hello

Code :

<body>
<div class="header"></div>
<div id="navcontainer">
<div class="newsdroit">
<div class="news">
<div class="newshead"></div>
<div class="barrenews"></div>
<div class="titrenews">Mardi 1 mars 2005</div>
</div>
</div>
<div class="conteneur">
<div class="centre">
<img src="afrique.jpg" width="192px" height="192px" style="float:left; margin:10px 10px 10px 10px;" alt="Le Tchad au coeur de l'Afrique Saharienne !">
<div class="pres"><span>Bienvenue</span></div>
<p align="justify"><em> Bla bla bla...</em></p>
<p style="font-style:italic ">Bla bla bla... </p>
<p align="justify"><em>Bla bla bla...</em></p>
<h2 align="right" style="font-size:16px;">Eglantine</h2>
<div class="horizontalrule"></div>
</div>
</div>

---------------
Got spyware ? | HFR HijackThis Tutorial

FlorentG

Y'a pas de <hr> dans ton code :??:

sanpellegrino

rompi a écrit :

Concernant le <hr> j'ai essayé en remplaçant par <hr/>, même résultat
Pour l'image il s'agit d'une image de fond (contenant le texte que je veux afficher, mais en plus beau ) de mon div pres, au-dessus duquel j'écris en span display:none. Du FIR, en somme

Le code HTML est ci-dessus.

---------------
Got spyware ? | HFR HijackThis Tutorial

sanpellegrino

FlorentG a écrit :

Y'a pas de <hr> dans ton code :??:

C'est sur une autre page mais je t'assure que le résultat est le même

Ce code-ci est pour le second point (clear: right).

---------------
Got spyware ? | HFR HijackThis Tutorial

rompi

Le plus gros problème est que dans .pres tu met width à 100%,
ce qui fait que bienvenue passe à la ligne...
Je ne suis pas très doué pour les float, mais voila un truc qui ressemble a ce que tu veux....

je te conseille de ne pas te servir du paramètre style dans les balise (sauf pour la compo de mail mais la ca n'est pas le cas je pense)

Code :

<html>
<head>
<style>
.conteneur{
width:100%;
margin:0px;
}
.centre{
padding:10px 10px 55px 10px;
text-decoration:none;
border:1px solid #FFCC66;
margin:3px 210px 5px 1px;
text-align:justify;
}
.pres {
background:transparent url('pres.gif') no-repeat;
background-position:0px 25px;
height: 125px;
}
h2 {
float: right;
style:font-size:16px;
}
img {
display: block;
float: left;
width: 192px;
height: 192px;
margin:10px;
}
</style>
</head>
<body>
<div class="titrenews">Mardi 1 mars 2005</div>
<div class="conteneur">
<div class="centre">
<img src="afrique.jpg" alt="Le Tchad au coeur de l'Afrique Saharienne !" />
<div class="pres">
<span>Bienvenue</span>
</div>
<p><em> Bla bla bla...</em></p>
<p>Bla bla bla... </p>
<p><em>Bla bla bla...</em></p>
<h2>Eglantine</h2>
</div>
</div>
</body>
</html>

sanpellegrino

rompi a écrit :

J'ai procédé autrement, vu que la propriété clear:right ne passe pas bien sous FF (ils préviennent de ce problème sur http://www.w3schools.com/css/default.asp quand on combine clear et float pour un même div.

J'ai fixé la taille de pres et donné dans le html une margin-top de 150px pour le premier paragraphe

---------------
Got spyware ? | HFR HijackThis Tutorial

rompi

sanpellegrino a écrit :

(ils préviennent de ce problème sur http://www.w3schools.com/css/default.asp quand on combine clear et float pour un même div.

Où Ca ?

Je voulais te préciser que quand tu a des problème de ce genre,
tu peu ajouter une règle (temporaireà qui ajoute une border a tous les blos qui n'en n'ont pas.

Code :

* {
border: 1px solid gray;
}

Publicité

sanpellegrino

rompi a écrit :

Où Ca ?

Très précisément ici: http://www.w3schools.com/css/pr_class_clear.asp

Citation :

Note: This property does not always work as expected if it is used along with the "float" property.

rompi a écrit :

Je voulais te préciser que quand tu a des problème de ce genre,
tu peu ajouter une règle (temporaireà qui ajoute une border a tous les blos qui n'en n'ont pas.

Code :

* {
border: 1px solid gray;
}

Je risque dans mon cas de me retrouver avec des borders partout alors que je n'en ai pas besoin, mais merci du conseil

---------------
Got spyware ? | HFR HijackThis Tutorial

juju2k

bonjour,
je découvre depuis peu le HTML ainsi que les CSS
En fait, je pense que rompi te proposait d'appliquer une bordure à tous les blocs pour que tu te rendes compte de l'emplacement de chaque bloc.
C'est une très bonne idée. Merci du conseil

Message édité par juju2k le 02-03-2005 à 14:32:50

FORUM HardWare.fr

Programmation

HTML/CSS

Problèmes d'affichage avec FF

Sujets relatifs
affichage d'un typedef enum	Problème d'affichage
pb de taille d'affichage	Problème d'affichage en PERL sous UNIX
Access 2000 :Mémoire libre insuffisante pour mettre à jour l'affichage	[php/javascript] clic bouton et affichage dans une zone de texte
Affichage dans une zone de texte	pd d'affichage d'image sous ie
Affichage d'un thumbnail en survolant un lien	rafraichir affichage
Plus de sujets relatifs à : Problèmes d'affichage avec FF

Page générée en 0.066 secondes