[XHTML 1.1] - Problème de mise en page

[Pixame]

Bonjour,

Après avoir abandonné une première tentative avec XHTML il y a quelques mois, je refais une tentative avec le projet de site suivant : http://www.cyber-collectivite.com

(CSS : http://www.cyber-collectivite.com/skins/cybercol/cc.css ).

Le code est valide XHTML 1.1. Cependant, si le site s'affiche bien sous IE 6, j'ai encore de nombreux bugs d'affichages sous Mozilla 1.5 :

- site non centré

- le fond de la colonne de gauche ne prend la hauteur totale

- bug pour le dernier bloc de la colonne de gauche (alors que le code est le même que pour les précédents bloc...)

- le fond du corps de la page ne prend la hauteur total (ex: h**p://www.cyber-collectivite.com/list.php?c=cyber )

- la petite colonne colorée à droite du corps ne s'affiche pas

Bref, le XHTML me prend la tête, j'ai encore plus de difficulté à rendre les sites cross-browser qu'avec du vieux code HTML non valide...

alors si quelqu'un y voit plus clair que moi...

Modifié 10 Novembre 2003 par Dan

[Monique]

Bonjour,

Avant d'analyser ton code plus en détail, voici quelques pistes...

- pour centrer un bloc horizontalement, il devrait suffir d'attribuer la valeur auto à ses marges latérales, mais cela ne fonctionne pas avec IE. Il faut donc placer le bloc contenu dans un bloc conteneur avec ces propriétés

.conteneur 
  {
   text-align: center;
  }

.contenu 
  {
   margin-left: auto;
   margin-right: auto;
   width: 70%;
   text-align: left;
  }

- pour IE, les largeurs des bordures s'ajoutent à la largeur d'un bloc au lieu d'y être comprises

- des exemples commentés sur les problèmes de positionnement : openweb, alsacreations

[Pixame]

Merci pour ces éléments... le pb de centrage est résolu. J'avais placé le code margin-left: auto; margin-right: auto; dans le conteneur et non dans le contenu...

[Raphael]

Salut Nico et bienvenue ici

- le fond de la colonne de gauche ne prend la hauteur totale

--> fait-il bien 100% de son conteneur? Le conteneur a-t-il bien une hauteur définie?

- bug pour le dernier bloc de la colonne de gauche (alors que le code est le même que pour les précédents bloc...)

--> je n'ai pas vu le code, mais les autres ont des listes alors que celui-ci semble avoir un paragraphe

- le fond du corps de la page ne prend la hauteur total (ex: h**p://www.cyber-collectivite.com/list.php?c=cyber )

--> là je ne vois pas ce que tu veux dire

- la petite colonne colorée à droite du corps ne s'affiche pas

--> pas de soucis sur Firebird, j'ai bien 3 colonnes

[Pixame]

Salut Nico et bienvenue ici

Salut, décidément on se suit de forum en forum...

Pour le dernier bloc de la colonne de gauche, le problème est réglé :-)

Pour le reste, dès que je change un paramètre pour corriger l'affichage sous un navigateur, cela me crée un bug sous un autre... je crois que vais faire comme d'hab. : optimiser pour IE et tant pis pour les autres...

L'accessibilité cross-browser, ce sera pour plus tard...

[Raphael]

Pour le reste, dès que je change un paramètre pour corriger l'affichage sous un navigateur, cela me crée un bug sous un autre...

C'est curieux. Pour avoir testé, je sais que ça marche : tu donnes une valeur fixe minimale au conteneur (en px), puis une hauteur en % à ton bloc gauche et il s'adapte toujours (moz, IE et Opera)

... Mais c'est toi le chef

[Pixame]

Oui, ça marche pour le remplissage du bloc ;-) Mais maintenant la hauteur du conteneur ne s'adapte plus à mon contenu :

Avec un conteneur en taille fixe (800px) et les blocs gauche et droit à 100% :

Aperçu sous IE

Aperçu sous Firebird

Aperçu sous Opéra

Modifié 11 Novembre 2003 par NT Koncept

[Fight]

Il y a un truc que je comprends pas, pour quoi mettre une hauteur (800px) à ton conteneur ???

[Raphael]

Il y a un truc que je comprends pas, pour quoi mettre une hauteur (800px) à ton conteneur ???

Si tu veux que les blocs contenus aient une hauteur en %, il faut que tu aies une référence. Si le conteneur n'a pas de hauteur définie, les sous-blocs ne savent pas à quoi se référer.

Donc si tu veux par exemple : un bloc conteneur contenant 2 blocs qui font 100% de sa hauteur, tu dois faire ça :

<div id="conteneur">
   <div id="gauche">menu</div>
   <div id="droite">contenu</div>
</div>

Avec
#conteneur {
width: 800px;
height : 100px; // une hauteur minimale est requise
}
#gauche {
width: 200px;
float: left;
height: 100%;
background-color: yellow;
}
#droite {
width: 600px;
float: left;
height: 100%;
background-color: green;
}

[Fight]

Oups j'ai fais une submit un peu rapide.

Quelques remarque pour ton code :

Je pense que tu devrais essayer d'utiliser un peu moins les balises <br />, par exemple pour tes menus en utilsant dysplay: block ou des listes et pour ton contenu, les balises p et h pour les titres.

La balise span est utilisé pour des éléments en ligne et tu l'utilise pour des contenus de type bloc.

Mais ce n'est que mon avis.

Sinon j'aime beaucoup le site, tant au niveau visuel que du code

[Fight]

Ok sibelius, mais pourquoi mettre une hauteur sur les contenus... ?