[résolu]ça marche pas sur FireFox :(

le 1 mars 2007

Bonsoir,

Alors je pige pas trop pourquoi là FireFox bloque :

voici mon code:

#conteneur{position:absolute;width:615px;}
#gauche{float:left;width:50px;height:500px;background-color:none;}
#droite{float:right;width:50px;height:500px;background-color:none;}
#centre{margin-left:50px;margin-right:50px; text-align:justify;}
.img1{position:absolute;background:url("../titre1.png") no-repeat 0px 0px;width:494px;height:100px;}
.titre{margin-left:80px;font-weight:bold;}
</style>
 </head>
 <body>
<p style="font-size:15pt;color:red;text-align:center;text-decoration:underline;">Les coups de gueule d'Isis</p><br><br>

<div id="conteneur">
<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"><span class="img1"><p class="titre" style="margin-top:40px;">Cruauté humaine contre les animaux</p></span>
<p style="margin-top:80px;">tralalalalal</p>
</div>
</div>

Le texte devrait être en bas.

Ensuite je sais qu'il y a un problème avec le span qui entoure le P Ouuh! avec c Inline

http://isis.no-ip.info/www/dossiers_isis

Voilà merci pour votre précieuse aide Messieurs

Modifié le 2 mars 2007 par Diana

KewlCat · le 2 mars 2007

je sais qu'il y a un problème avec le span qui entoure le P

Ok, alors je ne te le dis pas... ;-p

Pourquoi, d'après toi, le texte devrait-il être en bas ?

A ce que je vois, il est entouré à gauche par un bloc en float: left et à droite par un bloc en float: right. Rien ne vient faire de "clear" au milieu, donc il me semble logique que le <p> contenant "tratalaalalal" se retrouve à 80px du haut du conteneur (vu que le reste du "centre" est (enfin... devrait ! parce qu'une position absolute sur un élément inline, je ne sais plus trop ce que ça donne) sorti du flot normal du document, il n'y a théoriquement rien qui oblige ce texte à aller "en bas"...). Sans compter qu'un ensemble de trois blocs avec des float différents, je crois que ce n'est pas interprété pareil chez tout le monde et que certains "clear" implicites sont faits par certains navigateurs (souvenirs du temps où je faisais des essais de mise en page à trois colonnes)...

Au fait, c'est normal que tu mettes "conteneur" en position absolue sans lui donner de top, bottom, left ou right ?

Le site n'étant pas en ligne à cette heure-ci, je ne peux pas aller constater :-/

le 2 mars 2007

Bon pour le gabarit j'applique celui de à la création.

Donc oui ya un left:float; le milieu flux normal; right:float

à l'origine yavait un footer avec float:both. Mais là jen ai pas besoin enfin je pense. On applique un both lorsque l'on veut arrêter un flux flottant donc pour l'instant c pas mon cas non ?!

J'ai rectifié mon code, ça marche mieux:

<style type="text/css">
body {
background-color: #E6E9FF;
font-family:  Arial, Helvetica, Verdana,sans-serif;
font-size: 12pt;margin:0;padding:0;
}
p h3 {
margin: 0px;
padding: 0px;
}
#conteneur{position:absolute;width:615px;}
#gauche{float:left;width:50px;height:500px;background-color:none;}
#droite{float:right;width:50px;height:500px;background-color:none;}
#centre{margin-left:50px;margin-right:50px; text-align:justify;}
.titre{font-weight:bold;background:url("../titre1.png") no-repeat 0px 0px;width:494px;height:100px;line-height: 100px;}
</style>
 </head>
 <body>
<h2 style="color:red;text-align:center;text-decoration:underline;">Les coups de gueule d'Isis</h2><br><br>

<div id="conteneur">
<div id="gauche">x</div>
<div id="droite"></div>
<div id="centre">
<div class="titre">Cruauté humaine contre les animaux</div>
tralala
</div>
</div>

Mais le soucis, c'est que je voudrais rajouté un margin à mon text "Cruauté humaine contre les animaux" seulement.

Si je met margin-left:40px; ça me bouge l'image aussi

Alors je vois pas comment tourner ça

http://isis.no-ip.info/www/dossiers_isis

Modifié le 2 mars 2007 par Diana

KewlCat · le 2 mars 2007

float:both

Euh.... clear: both; plutôt, non ? (float: both; j'ai du mal à voir ce que ça pourrait produire) :-D

Oui effectivement on fait un clear quand on veut que le bloc se "libère" d'un float.

Mais le soucis, c'est que je voudrais rajouté un margin à mon text "Cruauté humaine contre les animaux" seulement.
Si je met margin-left:40px; ça me bouge l'image aussi

Normal puisque l'image est celle du fond de ton texte. Tu mets une marge à ton texte, l'image suit.

Solution 1 : utiliser un padding plutôt qu'un margin.

A savoir : un padding avec des blocs en float ça fait délirer IE6 donc on oublie.

Solution 2 : mettre ton texte dans un <p> qui, lui, aura un margin (décalant le <p> par rapport au conteneur qui aura l'image de fond et qui ne bougera pas)

le 2 mars 2007

Ouiii! merci mon KewlCat

ça marche ! pourtant il me semblait que j'avais essayé et que ça marchait pas à cause d'un héritage je crois

float:both
Euh.... clear: both; plutôt, non ? (float: both; j'ai du mal à voir ce que ça pourrait produire)

Oui effectivement on fait un clear quand on veut que le bloc se "libère" d'un float.

Mdr c encore une de mes inventions ça Va falloir que je revoie mes pages à la loupe

Oui aussi, comment dire Si je met P pour les titres alors que c normalement Hx ça n'a aucun soucis je suppose sur le comportement humain

Donc je remplace par des Hx , mais j'ai l'impression que les Hx font des escaliers aux polices alors que les P pas du tout

Mais peut être que cela vient de moi

ps1: escaliers= lissages

ps2: réponse obligatoire mais facultative mdr (quel paradoxe)--> puis-je prendre ton msn ?

KewlCat · le 2 mars 2007

De rien. Content pour toi si ça marche ;-) (tu mets "résolu" dans le titre du sujet ?)

Si je met P pour les titres alors que c normalement Hx ça n'a aucun soucis je suppose sur le comportement humain

Si tu n'utilises pas les balises de titre (h1 ... h6) ton document n'aura aucun "relief" niveau contenu (essaie de visualiser un site avec / sans les styles, tu devrais comprendre pourquoi il est quand même mieux de structurer son site en utilisant des balises qui signifient quelque chose).

j'ai l'impression que les Hx font des escaliers aux polices alors que les P pas du tout

Peut-être l'attribut font-family est différent ? Va savoir...

(je serais curieux de voir un comparatif de captures d'écran <p> / <hx> ...)

le 2 mars 2007

Ok donc je structure mon site :

Hx = Titre

P = Paragraphes

heu!!!

Je viens de régler mon problème de décalage des images de #menugauche.

alors que sur FF :

margin-left:1.2em;

j'ai créer une règle pour IE qui ne marchait pas, donc je me suis dit ya un truc que je pige pas.

<!--[if IE]>
  <style type="text/css">
#menugauche { margin-left:1.2em;  }
			  </style>
<![endif]-->

J'ai un copain qui me dit que ça vient de em valeur relative donc je la met en px mais rien.

Alors je sais pas pourquoi, j'ai mis 0em et ça marche ! c aligné

Je suppose que c dû à la marge par défaut rajouté par IE, mais j'en suis pas certaine.

MAis c réglé aussi,

Mille bisous

Connexion

Pas encore inscrit ?

[résolu]ça marche pas sur FireFox :(

Messages recommandés

Invité Diana

KewlCat

Invité Diana

KewlCat

Invité Diana

KewlCat

Invité Diana

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer