28172 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Salut,

Tu devrais faire un tour par le validateur pour ton code html, je pense qu'une fois les 72 erreurs corrigées tu devrais y voir plus clair Smiley cligne
@ghost

Merci pour l'idée. C'est une excellente piste.
J'ai corrigé toutes les erreurs exceptées l'imbrication des listes d'énumération.
Quelqu'un saurait me dire pourquoi je ne peut pas les imbriquer ? (ou l'ai-je mal fait ?)

J'ai mis une correction ici

J'espère vraiment que ce bug est dû à cette dernière erreur.
Salut, une structure valide est
<ul>
<li>item niveau 1</li>
<li><ul>
<li>item niveau 2</li>
</ul></li>
</ul>


Tous les éléments HTML contenus dans un <ul> doivent être des <li> si je ne me trompe pas.
Voilà, ma page est valide au point de vue xhtml 1.0 transitional et au point de vu css 2.1.

Malheureseusemt, le bug est toujours présent... Smiley decu

Je continue mes recherches....
Salut,

+1 pour les listes imbriquées, par contre tu te compliques la vie pour la structure Smiley biggol ce qui la rend peu robuste

Pourquoi ne pas partir sur une base
le contenant bloc body
à l'intérieur ton bloc gauche en float left, le droite en float right et le centre avec les margins qui vont bien occupant le reste ?

<div id="body">
  <div id="gauche">
  </div>
  <div id="droite">
  </div>
  <div id="centre">
  </div>
</div>



#body{
width: 900px;
margin: 0 auto;
overflow: auto;
}

#gauche{
float: left;
width: 150px;
border: 1px solid black;
background: lime;
}

#droite{
float: right;
width: 150px;
border: 1px solid black;
background: yellow;
}

#centre{
margin: 0 150px;
border: 1px solid black;
background: silver;
}



Bon avec ta construction essaye cette piste:
div.body {
overflow: auto;
  border: 1px solid #e0e0e0;
}

div.body_side_content {
  padding-right: 150px;
   position: relative;
}

div.body_side_content_main {
  border-right: solid 1px #e0e0e0;
}


Bonne continuation
Yepee ha !

Pour répondre dans l'ordre à tes questions :
Je me complique la vie parceque la vie est compliquée. Tu imagines bien que cette page est générée, ce n'est pas du statique. J'ai effectivement toujours le bloc de gaughe (body_main_menu) et toujours le bloc central (body_content) ... mais ceux du centre (body_side_content) et de droite (body_side_context), non. J'ai différents templates... Enfin bref.

Par contre, là où tu as vu juste, c'est que
div.body { overflow: auto; }
div.body_side_content { position: relative; }

ont résolu le problème !

Et là, j'ai besoin de toi, c'est qu'il faut que tu m'expliques !
Car ce phénomène se reproduit sur différentes pages à différents endroits.
Quelle règle faut-il respecter ? Ou quel est ce hack ?

Merci encore ghost !
Re,

Pour la structure, je ne vois pas où le "dynamisme" de la construction gène. Mais bon! Comme il me semble que ta solution est un peu limite si tu l'utilises dans ton bloc central avec des "templates" tu risques d'avoir d'autres problèmes.

Pour l'overflow: auto; voir FAQ

Ton bloc body était affubler d'un clear: both; bien inutile et il ne suivait pas le contenu de ton flottant (donc les marges non plus) FF et opera ont "su" interpréter ton code dans le bon sens mais pas les IE Smiley cligne

Le positionnement en relative de div.body_side_content est plus un emplâtre utilisé pour régler certains problèmes inhérents à IE6 (7), ça se rapporte plus à une recette de cuisine testée au fil des batailles avec IE6 qu'à un fondement logique (A mon modeste niveau des pros auront surement la réponse adéquate)

Bonne continuation mais je persiste dans le sens de simplifier ta structure (j'suis têtu Smiley biggol )
Merci,

Je prends note. J'essaierai d'alléger ma mixture au maximum.
Je sais ce qu'il me reste à faire Lundi matin... Smiley sweatdrop

Encore merci pour ton aide.
Pages :