28173 sujets

CSS et mise en forme, CSS3

Probleme avec un float right(ou pas?) sous ie et mise en page foireuse

bonjour à tous,

en farfouillant un peu sur le site j'ai trouvé comment faire des cadres arrondis.
Cette methode marche tres bien sous firefox, mais sous IE7 ça ne marche qu'a certain endroits:

demonstration :
http://www.hiboox.com/vignettes/1207/eafbf6f.jpg 


#cadrearrondi {    /*le grand cadre*/
  width: 626px;
  border: solid 2px #2f6199;
  padding :20px;
}

#hautgauche, #hautdroit, #basgauche, #basdroit {
  height: 16px; width: 17px;
  background-repeat: no-repeat;
  font-size:1px; 
}

#hautgauche {
  background: url(corner_hg2.jpg);
  margin-left:-22px;
  margin-top:-22px;
}
#hautdroit {
  float: right;
  background: url(corner_hd2.jpg);
  margin-right:-22px;
  margin-top:-22px;


la seule chose differentes que je vois c'est bien le float right. Pourtant lorsque j'essaye de mettre un right avec une valeur pour le deplacer plus sur le coté, rien ne bouge au dela de l'endroit où il est positionné!

Vous constaterez qu'en dessous, sur un coin d'un autre type de cadre, le probleme ne se pose pas :


#fcadre { /* conteneur forum*/
width: 670px;

}

#fdrep{   /* le cadre le plus a droite, donc celui qui nous concerne! */
border: 2px #2f6199 solid;
width:100px;
height:35px;
float:left;
margin:1px;
text-align:center;
}

#fhautgauche, #fhautdroit, #fbasgauche, #fbasdroit {
  height: 16px; width: 17px;
  background-repeat: no-repeat;
  font-size:1px; /* correction d'un bug IE */
}
/* propriétés spécifiques à chaque coin */
#fhautgauche {
  background: url(corner_hg2.jpg);
  margin-left:-2px;
  margin-top:-2px;
}
#fhautdroit {
  float: right;
  background: url(corner_hd2.jpg);
  margin-right:-2px;
  margin-top:-2px;
}


les style sont differents car le padding sur les cadre n'est pas le meme, d'ou les margins differents pour placer les angles!

Je precise que le probleme intervient sous ie7. Sous ie6 c'est la catastrophe aussi. C'est là mon deuxieme probleme.
Voici le code :


        <div id="cadrearrondi">
	<div id="hautdroit"></div><div id="hautgauche"></div>
	<div id="contenu">
	<p>Forum
	</p>
	</div>
	<div id="basdroit"></div><div id="basgauche"></div>
	</div><br>
	
	<div id="fcadre">
	
	<div id="contenu">
		
			<div id="ftitre"><div id="fhautgauche"></div>Titre</div>
			<div id="fauteur"><br>Auteur</div>
			<div id="fdate"><br>Date</div>
			<div id="frep"><br>R&eacute;ponses</div>
			<div id="fdrep"><div id="fhautdroit"></div>Dernière r&eacute;ponse &nbsp;&nbsp;</div>

/***le css des fxxx: ce qui change c'est la taille des zones**/

#fxxx{
border: 2px #2f6199 solid;
float:left;
width:240px;
height:35px;
margin:1px;
}

illustration sour FF (et ie7 si ce n'est le le coin qui n'est pas bon):
http://www.hiboox.com/vignettes/1207/5dce3d84.gif
sous ie 6 :
http://www.hiboox.com/vignettes/1207/721462ce.gif

je me doute que mon code necessite plusieurs optimisation, vu que c'est mon premier site depuis quelques années, donc le css et les incompatibilités sont tres obscures dans ma tete!


merci d'avance pour ceux qui porteront un interet a mes questions Smiley smile
Modifié par eriatarka (22 Mar 2007 - 12:26)
Bonjour,

Le positionnement relatif sera peut-être plus efficace pour placer tes images de coin, plutôt que les marges négatives.

Pour le rendu sous IE 6 : c'est un tableau qui a cette tête là ? Parce que si tu as simulé un rendu de type tableau avec des div à tout va, tu t'es fatigué pour rien : utiliser un tableau HTML en bonne et due forme.
Pourquoi mettre un tableau en div ? Smiley sweatdrop

Sinon peut-on avoir une URL, car comme ça, c'est pas évident de se rendre compte Smiley cligne

ps : j'ai eut un problème similaire il y a une semaine, avec le même code ... vivement CSS3 et border-radius Smiley murf
Modifié par Gunner4902 (22 Mar 2007 - 12:57)
malheureusement je ne peux pas mettre de lien c'est sur une section privé qui demande un enregistrement oO

bah pour le tableau en div c'est passé tout seul..je vois pas ça comme une contrainte par rapport a un tableau html.

qu'entends tu, Florent, pour le positionnement relatif là?
eriatarka a écrit :
bah pour le tableau en div c'est passé tout seul..je vois pas ça comme une contrainte par rapport a un tableau html.

Le fait que tout foute le camp sous IE6, c'est une contrainte.
Si c'est un tableau, c'est un tableau, pas une série de divs. Tu gagneras du temps et tes visiteurs ne perdront rien (surtout pas en accessibilité).

eriatarka a écrit :
qu'entends tu, Florent, pour le positionnement relatif là?

http://openweb.eu.org/articles/initiation_flux/

Pas sûr que l'utilisation du positionnement relatif soit intéressante ici, mais c'est à explorer.
bon je vais repasser en tableau donc..c'etait deja fait avant. merci bien ,)

Mais il reste le probleme de la marge bizarre pour l'angle du haut de page. Comme c'est le cadre qui revient dans chaques sections du sites c'est assez derangeant 8/
eriatarka a écrit :
Mais il reste le probleme de la marge bizarre pour l'angle du haut de page. Comme c'est le cadre qui revient dans chaques sections du sites c'est assez derangeant 8/

Tu as étudié un peu le positionnement relatif ?
Théoriquement c'est la meilleure solution. Le problème qui peut se poser, c'est que l'on dépace juste «visuellement» l'élément : pour les autres éléments, c'est comme s'il était resté à sa place, et ça peut faire comme un élément «fantôme», invisible, mais créant un espace ou un retrait.

Du coup, si c'est un style pour un élément seulement sur la page, on aura peut-être intérêt à utiliser le positionnement absolu. Le conteneur -- celui qui a la bordure -- sera alors positionné en relatif (position: relative), pour servir de référent au positionnement absolu.

Voir là encore Openweb à propos du positionnement absolu, si besoin de précisions dans ce domaine.
eriatarka a écrit :
je ne vois pas comment le placer avec du relatif dans les angles comme ça en sachant qu'il y a une marge.

#moncoin {
	float: right;
	position: relative;
	right: -22px;
	top: -22px;
}
Salut,
ah yes, merci Florent, ça fait du bien de lire ça, de temps en temps, on a beau dire et faire, un tableau sauve la peau (perso, je n'ai encore jamais vu un gros formulaire complexe beau et solid fait autrement qu'avec des tableaux, tout ça parce qu'on ne peut pas utiliser display: table-cell; d'ailleurs, c'est marrant, les tableaux c'est tellement utile qu'on rêve de demander aux div de faire comme eux Smiley smile )

Bref, juste un mot sur les coins arrondis, perso, j'utilise curvycorners ben oui, je sais, c'est du javascript mais ça marche du feu de dieu, ça permet de mettre un image de fond plein pôt par-dessus un fond de couleur sans problèmes ni découpages acrobatiques et, j'ai essayé pour voir, si on vient sans javascript, on a tout simplement son div bien propre et bien positionné, un seul et pas tout un tas de bidouilles qui essayent de ressembler à un div Smiley smile , simplement il est carré et comme à mon avis les ceusses qui viennent sans javascript ne le font pas spécialement pour la beauté du design...

Have swing
ok merci a tous..j'etait pas dans le coin la semaine precedente mais là je m'y remet et je vais tester tout ça.
merci encore

EDIT:
bon, meme en precisant le relative ça ne change rien à la marge sous ie.j'ai bien l'impression que le padding 20 embette sur la droite et non sur la gauche.
C'est vraiment stressant surtout que mes delais deviennent tres tres court.
Je precise que quand je change le margin-right en une valeur superieure a 22px, l'image de droite reste a la meme position et ne sort pas du cadre ni rien. Elle reste bloquée a quelques pixels de la marge

EDIT2:
Bon je pars pour faire un commentaire conditionnel sur mon site dans le cas ou ça serait IE. J'ai farfouillé un peu et donc en mettant

 <link href="styles.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 7]> 
	<link rel='stylesheet' href='stylesie.css' type='text/css' />
 <![endif]-->

tout devrait aller.
Mais non, sous firefox, tout est ok!
Dans une page test, j'ai juste mis l'inclusion du css ie et j'ai regardé le comportement, le tableau passe bien avec les angles bien placés sans probleme.
Sauf que avec le commentaire il me fait un truc un qui ne ressemble a rien. Je ne sais pas quel css il prend en compte mais ça ne ressemble ni a celui pour les autres navigateurs,ni celui qui lui est dedié!
vais je devenir fou?
Modifié par eriatarka (02 Apr 2007 - 12:35)
Bonjour,
je crois que IE7 ne gère pas le no-repeat sur les background.

Je te dis cela car en refaisant les pages de notre site, j'ai eu ce pb lorsque je mettai un no-repeat accolé à un background-image.
Bonjour,

L'image n'apparaissait pas.

en enlevant le no-repeat, elle réapparaissait.

Pas contre en IE6, je n'ai pas eu le pb.
ninerd a écrit :
je crois que IE7 ne gère pas le no-repeat sur les background.

IE7 gère très correctement le background-repeat: no-repeat.

ninerd a écrit :
Je te dis cela car en refaisant les pages de notre site, j'ai eu ce pb lorsque je mettai un no-repeat accolé à un background-image.

Disons que si l'on commet une affreuse erreur de syntaxe en utilisant la valeur "no-repeat" avec une propriété CSS qui ne l'accepte pas, on s'expose à quelques petits problèmes.

Pour mémoire, on peut écrire :
background-repeat: no-repeat;

ou bien :
background: url(monimage.jpg) no-repeat;

(par exemple).
Modifié par Florent V. (02 Apr 2007 - 22:21)
Bon et bien j'ai refait tout en tableau comme dit precedement mais une chose etrange intervient:
normalement :
http://www.hiboox.com/vignettes/1407/7dee1932.jpg
apres quelques surf :
http://www.hiboox.com/vignettes/1407/47761b6.jpg

et quand j'actualise ça passe bien. Et celà sous firefox et non sous ie7

  <table width=670>
    <tr>
      <td id='ftitre' ><div id='fhautgauche'></div>Titre</td>
      <td id='fauteur'>Auteur</td>
      <td id='fdate'>Date</td>
      <td id='frep'>R&eacute;ponses</td>
      <td id='fdrep'><div id='fhautdroit'></div>Dernière réponse</td>
    </tr>
";
 while($ligne=mysql_fetch_array($result)) {

 [...]
	
print "
    <tr>
      <td id='ftitre'><a href="">$ligne[titre]</a></td>
      <td id='fauteur'>$ligne[membre]</td>
      <td id='fdate'>$FinalDate</td>
      <td id='frep'>$reponse $ligne[nbrep]</td>
      <td id='fdrep'>$FinalDate1</td>
    </tr>
	";}
 mysql_close();
print"
</table>";

mon css est de ce type..seule la largeur change selon les cases
#ftitre{
border: 2px #2f6199 solid;
float:left;
width:244px;
height:35px;
margin:1px;
}



EDIT: j'ai trouvé avec un ami, en enlevant le float left ça passe tout le temps. si quelqu'un pouvait me dire pourquoi de temps en temps ça passait et d'autres fois non ça serait sympa pour ma culture G ^^
Modifié par eriatarka (03 Apr 2007 - 12:44)
Sujet clos
Aller à