[Resolu]Div qui disparait lors d'une augmentation de ma police

Bonjour à tous,
je travaille actuellement sur mon site perso et je me trouve face à un problème qui est apparut dès lors que je me suis mis à utiliser des positionnement absolu.

En fait le problème se matérialise de la sorte :
- Au chargement de ma page, les blocs concernés ne se charge pas comme les autres (plus long à arriver)
- Dès que j'essaye de modifier ma police (l'augmenter ou la diminuer) ces blocs disparaissent.

Le mieux est de regarder par vous même (il s'agit du bloc à droite de l'écran) :

http://www.pusse-webdesign.fr/v2/

Si ce problème vous est déjà arriver, j'attends vos conseils ou remarques.

Merci d'avance à tous
Modifié par pusse (19 Aug 2007 - 15:21)

Bonjour,

Chez moi, le bloc textuel de droite ne s'affiche même pas.
Reste cohérent et place les .bloc_droite et .bloc_gauche de la même manière.
C'est un peu pénible à lire, mais en cherchant…
Je te propose http://cjoint.com/data/itaxf4zZVc_v2.html ce .css

html, h1 {
  font-size:100%;
  }
body, div, h1, img {
  padding:0px;
  margin:0px;
  }
body {
  font-family:arial, verdana, sans-serif;
  background:url("http://www.pusse-webdesign.fr/v2/images/fond_ciel.gif");
  }

.contener_principal {
  position : relative;
  width:800px;
  padding:10px;
  margin-left:auto;
  margin-right:auto;
  
  border : 2px dashed #f00;
  }
.contener_blocs {
  position:absolute;
  top:100px;
  width:800px;
  
  border : 2px dotted #00f;
  }

.partie_gauche {
  float:left;
  width:300px;

  border : 1px solid #fc0;
  }

.bloc_gauche {
  width:258px;
  margin-left:auto;
  margin-right:auto;
  }
.bloc_gauche_fond_haut {
  background:url("http://www.pusse-webdesign.fr/v2/images/bloc_gauche_fond_haut.gif");
  height:14px;
  }
.bloc_gauche_fond_milieu {
  background:url("http://www.pusse-webdesign.fr/v2/images/bloc_gauche_fond_milieu.gif");
  }
.bloc_gauche_fond_bas {
  background:url("http://www.pusse-webdesign.fr/v2/images/bloc_gauche_fond_bas.gif");
  height:14px;
  }
.plateforme_gauche_fond {
  background:url("http://www.pusse-webdesign.fr/v2/images/plateforme_gauche_fond.gif");
  height:50px;
  }

.partie_droite {
  float:right;
  width:416px;

  border : 1px solid #ff0;
  }
.bloc_et_images_droite {
  overflow:auto;
  }
.image_gauche_bloc_droite {
  position:absolute;
  bottom:0px;
  }

.bloc_droite {
  width:295px;
  [#brown]/*position:absolute;
  left:80px;*/      /*  si tu veux ça, il faut que le bloc qui le contient soit en relative
                        sinon il se place par rapport au 1er parent en relative  */[/#]
  margin-left:auto;
  margin-right:auto;
  }
.bloc_droite_fond_haut {
  background:url("http://www.pusse-webdesign.fr/v2/images/bloc_droite_fond_haut.gif");
  height:14px;
  }
.bloc_droite_fond_milieu {
  background:url("http://www.pusse-webdesign.fr/v2/images/bloc_droite_fond_milieu.gif");
  }
.bloc_droite_fond_bas {
  background:url("http://www.pusse-webdesign.fr/v2/images/bloc_droite_fond_bas.gif");
  height:14px;
  }
.plateforme_droite_fond {
  background:url("http://www.pusse-webdesign.fr/v2/images/plateforme_droite_fond.gif");
  height:50px;
  }


.pictos {
  height:60px;
  position:absolute;
  top:10px;
  }
.pictos_arrondi_gauche {
  float:left;
  width:10px;
  height:58px;
  background:url("http://www.pusse-webdesign.fr/v2/images/pictos_arrondi_gauche.png");
  margin-left:2px;
  }
.pictos_arrondi_gauche_logo {
  float:left;
  width:10px;
  height:58px;
  background:url("http://www.pusse-webdesign.fr/v2/images/pictos_arrondi_gauche.png");
  }
.pictos_arrondi_droite {
  float:left;
  width:10px;
  height:58px;
  background:url("http://www.pusse-webdesign.fr/v2/images/pictos_arrondi_droite.png");
  }
.pictos_arrondi_droite_logo {
  float:left;
  width:10px;
  height:58px;
  background:url("http://www.pusse-webdesign.fr/v2/images/pictos_arrondi_droite.png");
  margin-right:126px;
  }
.pictos_titre {
  float:left;
  height:52px;
  background:url("http://www.pusse-webdesign.fr/v2/images/pictos_fond.gif");
  border-style:solid;
  border-width:3px 0px;
  border-color:blue;
  text-align:center;
  }
.pictos_autres {
  float:left;
  border-style:solid;
  border-width:3px 0px;
  border-color:blue;
  height:52px;
  width:48px;
  background:url("http://www.pusse-webdesign.fr/v2/images/pictos_fond.gif");
  }

+ Tu mets tout en class. Même .contener_principal.
Tu penses utiliser chaque élément plusieurs fois ?

Déjà merci à toi Gihef, je commençais à croire que personne aller me répondre.

a écrit :
Reste cohérent et place les .bloc_droite et .bloc_gauche de la même manière.

Qu'entends tu par là ? La manière de les positionner doit être la même ?

a écrit :
C'est un peu pénible à lire

Que trouves tu pénible à lire ? Mon code en général ? Si c'est le cas qu'est ce qui pourrait le rendre plus visible à ton avis ?

a écrit :
Je te propose http://cjoint.com/data/itaxf4zZVc_v2.html ce .css

Je viens de jeter un coup d'oeil à ta page de test. C'est quasiment ce qu'il me fallait sauf que le picto avec le point d'interrogation doit être posé sur la plateforme en herbe (comme le bloc gris). Est ce toi qui n'a pas voulu le mettre en place ou est ce impossible ? (Je préviens que je n'ai pas encore eu le temps de me pencher sur le code et que je le ferai dès que j'aurais un peu de temps).

En tout cas merci a toi Gihef.

Après quelques modifications dans le code, j'ai réussi à obtenir ce que je cherchais.

Merci à toi Gihef pour les pistes données.

Je reprends quand même.

a écrit :
pénible à lire

parce que les choix que tu as faits de tout découper oblige à parcourir un tas de code qui n'est pas forcément utile.
Pour tes pictos par exemple.
Quelle est l'utilité d'avoir toutes ces parties ?
Ils sont petits. Ils n'auront pas besoin de s'adapter au contenu. Ils suffirait d'en faire une seule image pour chacun.
Ou alors, un fond, unique, groupé, commun avec chaque image unique par dessus.

a écrit :
La manière de les positionner doit être la même

Dans la mesure où une manière de faire fonctionne pour un élément et qu'on doit en utiliser un autre exactement identique (sauf la largeur), alors pourquoi s'en priver ?
Si je me souviens bien

.bloc_gauche {
  width:258px;
  margin-left:auto;
  margin-right:auto;
  }

et

.bloc_droite {
  width:295px;
  position:absolute;
  left:80px
  }

a écrit :
Est ce toi qui n'a pas voulu le mettre en place

Il n'en était pas question, rien ne disait où ça devait se placer.
 
Modifié par Gihef (19 Aug 2007 - 22:50)

Je comprend un peu mieux ce que tu entend par là et tout ce que tu as voulu dire.

Je continu de travailler dessus et je le soumettrais à la critique du forum une fois plus avancé.

En tout cas merci bien à toi Gihef.