Problème de CSS...

ortolojf · 9 Novembre 2004

Bonjour
J'ai besoin d'afficher, sur ma page d'accueil, la configuration suivante:

--------------------------------<Titre au milieu>

-----<Bloc à gauche>-----------------------------<Bloc à droite>

-----<Bloc 1 à gauche en dessous>

------<Bloc 2 à gauche en dessous>

--------------------------------<Bloc au milieu>

Le "Bloc à droite" se prolonge en profondeur jusqu'à droite du "Bloc 2 à gauche en dessous", mais le "Bloc au milieu" doit être au milieu de la page, et en dessous de tous les autres blocs.

J'ai essayé pour les 3 blocs à gauche, de mettre dans la css:

body {
text-align : center; En effet, j'ai besoin que les texte s'affichent
text-family : etc... au milieu de leurs emplacements.

}
div.lefttext {
margin-left : auto;
margin-right: auto;
float : left;
width : 45%;
padding : 0;
border : 0;
}

Et pour le bloc à droite:

div.righttext {
margin-left : auto;
margin-right : auto;
float : right;
width : 45%;
padding : 2em;
border : 0;
}

Le premier bloc à gauche est du texte, les autres blocs à gauche sont deux images.

Que je mette les autres blocs à gauche, dans index.html, avant ou après le libellé du bloc à droite, le "Bloc au milieu" s'obstine à se positionner en fonction du bloc de droite, c'est à dire qu'il est centré par rapport à ce bloc à droite, alors que je voudrais qu'il soit centré par rapport à la page entière.

Pour "Bloc au milieu", j'ai tout essayé:

div.text {
text-align : center;
padding : 0;
border : 0;
}

L'un des problèmes est que je veux positionner deux blocs l'un à côté de l'autre ( bloc de gauche et bloc de droite ), alors que les blocs de gauche doivent être superposés.

De plus, le dernier bloc au milieu devrait se positionner par rapport au container body ( l'ancêtre le plus éloigné ), alors qu'il se positionne, bizarrement, non pas par rapport au dernier bloc affiché, mais par rapport au bloc de droite.

Merci beaucoup pour vos suggestions, je veux passer tout mon site en XHTML 1.0 Strict, et j'ai bien mis la DTD en tête du document index.html

Excusez-moi pour les tirets séparant les blocs, c'est pour le formattage de ce message.

Merci à vous pour vos réponses.

Jean Francois Ortolo

Grantome · 9 Novembre 2004

...

Tu devrais réussir avec ça:
http://www.alsacreations.com/articles/modeles/

Ertai · 9 Novembre 2004

En fait, le mieux dans ton cas est de créer un autre bloc qui englobe l'ensemble des blocs de gauche.
Ca donnerait quelque chose comme ceci :

Code:

<div id="blocgauche">
  <div id="bloc1">...</div>
  <div id="bloc2">...</div>
  <div id="bloc3">...</div>
</div>
<div id="blocmilieu">
</div>
<div id="blocdroite">
</div>

Ainsi tu ne devrais plus avoir de problème de positionnement. Et sinon, dans le cas ou ton site est en taille fixe (qui ne s'affiche pas sur la totalité de la page mais dans un cadre défini à l'avance) tu as aussi la posibilité de placer tes bloc en position:absolute et de définir les positions précisémment

ortolojf · 10 Novembre 2004

Ertai a dit:
En fait, le mieux dans ton cas est de créer un autre bloc qui englobe l'ensemble des blocs de gauche.
Ca donnerait quelque chose comme ceci :

Code:

<div id="blocgauche"> <div id="bloc1">...</div> <div id="bloc2">...</div> <div id="bloc3">...</div> </div> <div id="blocmilieu"> </div> <div id="blocdroite"> </div>

Bonjour Ertai
J'ai essayé avec ces blocs de gauche, du milieu, et de droite, comme indiqué, en mettant le bloc du milieu après celui de gauche, et avant celui de droite, mais... Le bloc du milieu s'affiche au dessus du bloc de droite.

Voici le code css des blocs:

Code:

div.blocgauche {
  margin-left : auto;
  margin-right : auto;
  float : left;
  width : 45%;
  padding : 0;
  border : 0;
  }

div.blocmilieu {
  margin-left : auto;
  margin-right : auto;
  float : center;
  width : 100%;
  padding : 0;
  border : 0;
  }

div.blocdroite {
  margin-left : auto;
  margin-right : auto;
  float : right;
  width : 45%;
  padding : 2em;
  border : 0;
  }

( Je n'indique pas les couleurs dans l'exemple. )

Le bloc de gauche englobe deux autres blocs déclarés avec seulement le padding et le border, et ils se superposent bien dans le bloc de gauche.

Le bloc du milieu, comprend quelques liens avec des balises <a> , <href> , et <img>, et tout celà se superpose bien dans le bloc du milieu.

Logiquement, le problème devrait venir d'une mauvaise déclaration d'un ou plusieurs des blocs milieu, droite, ou gauche, mais je ne sais pas où chercher.

J'ai vu dans le site h**p://www.alsacreation.org , que l'instruction css float , mettait le bloc qui la contenait en flottant, et que le container englobant prenait la place qui restait pour la laisser à la disposition des autres blocs contenus dans le container.

Mais je ne sais pas comment forcer le bloc du milieu à s'afficher au milieu, au dessous des deux autres blocs.

Merci beaucoup de votre aide.

Jean Francois Ortolo

Ertai · 11 Novembre 2004

bon, j'ai essayé rapidement de faire un truc.
-http://www.halflifedesign.net/perso/ertai/test.html

Je ne suis pas sur que ce soit ce que tu cherche a faire.
Et puis comme dis sur le site alsacreation, le source n'est composé que de div, ce qui est pas très propre. mais comme c'est juste pour l'exmple, libre a toi ensuite d'appliquer les paramètres a d'autres balises que tu utilises pour les blocs de gauche et de droite par exemple (img par exemple puisque tu utilise des images pour 2 blocs a gauche)
Concernant la hauteur des blocs, je les ai aussi fixé pour une meilleure visibilité de mon exemple de même que pour les bordures...

J'espère que c'est ce que tu recherches.

ortolojf · 12 Novembre 2004

Bonsoir Ertai
Aux dernières nouvelles...

Je n'ai pas pu accéder à l'url que tu m'as indiqué.

Le navigateur indique en même temps: "Page non trouvée", et "erreur 404".

Ensuite, bien que sous Linux et Mozilla 1.6, ma dernière mouture de ma page d'accueil passait assez bien, ( bien que les deux liens en haut du bloc du milieu en bas, se positionnaient au choix sous le bloc de gauche, ou sous le bloc de droite, en fonction de la hauteur de ces blocs...

...Je viens de tester sous Windows98 SE, avec Mozilla 1.7 le bloc du milieu se positionne à droite au dessus du bloc du droite, et avec IE6, c'est le même problème qu'avec Linux et Mozilla 1.6.

Je commence à être un peu découragé, et bien que j'ais réussi à porter tout mon site à la norme XHTML 1.0 ( dixit le validateur du W3C ), je commence à penser qu'adapter des feuilles de style compréhensibles par tous les navigateurs, relève de l'exploit du programmeur fou.

Le problème est pourtant simple, le site alsacreation.org le dit bien: Le bon moyen pour reobtenir un flux positionné par rapport au premier ancêtre positionné, après des blocs float, est d'utiliser la balise postion: relative dans la feuille de style.

Je positionne cette balise, à la fois dans l'ancêtre global positionné par rapport au body, et dans le bloc du milieu. Mais celà ne me sert à rien, car je n'ai pas la distance entre le haut de l'ancêtre global, et le haut théorique du bloc du milieu, qui devrait être en bas de la page.

De plus, je ne peux pas faire de positionnement "absolute", car je désire faire une page d'accueil pour toutes les résolutions d'écran.

Comme XHTML 1.0 accepte les tableaux, je commence à me demander si je ne vais pas refaire d'horribles tableaux, pour le postionnement. La honte, quoi...

Enfin, il faudrait que je fouille un peu plus dans les spécifications du W3C, on va voir ça...

Merci beaucoup de tes conseils.

Jean Francois Ortolo

Ertai · 12 Novembre 2004

Oui, j'en suis désolé, tu es tombé au mauvais moment, nous avons changé d'hébergeur et les transfert de DNS se font depuis ce matin...normalement, demain c'est bon.

ortolojf · 13 Novembre 2004

Bonjour Ertai
En fait, c'était très simple.

Il suffisait de rajouter dans la feuille de style:

margin-top : 800px;

pour la déclaration de #blocmilieu

Maintenant, mon site est ok.

Le seul petit problème est que j'utilise un tout petit peu les tableaux pour mes deux pages "Méthode d'Utilisation des Statistiques", mais ce n'est pas grave, un de ces jours, je supprimerai les balises <table> et autre <th> et <td> , pour les endroits qui ne le nécéssitent pas.

En fait, ce que j'ai appris de tout celà, c'est que la seule et unique manière de pouvoir recentrer un flux en largeur par rapport à la page entière après des blocs flottants, consiste à déclarer un conteneur global en "position : relative;" , puis de déclarer le bloc que l'on veut repositionner après, également en "position : relative;" , ces deux déclarations ont pour effet de pouvoir positionner ce bloc par rapport au conteneur, avec une balise margin-top fixe.

Hé bé, je commence à m'y connaître, en feuilles de style...

Merci à toi pour ton aide.

Jean Francois Ortolo

Ertai · 13 Novembre 2004

Hmm, content que tu ai résolu ton problème mais il y a un truc qui est dommage ici. Ca signifie que tu dois connaitre la hauteur occupée par les blocs du haut. car si ces derniers n'occupent que 400px, il faudrait que tu change ton margin-top en conséquence.
La solution de l'exemple consiste a avoir des blocs globaux qui s'empilent les un sous les autres. Cela te permet de ne pas te soucier de la taille en hauteur du bloc du haut, le bloc du bas venant automatiquement se placer en dessous.

Enfin bref, l'important c'est que ça marche et que ça te convienne

Et moi aussi, ça m'a permis de mieux cerner certains détails liés aux positionnements avec les CSS. Je ne m'en était pas trop préoccupé jusqu'a présent car je réalise tous mes sites en "fixé" ou tous les éléments sont séparés les un des autres et positionnés précisemment.

ortolojf · 13 Novembre 2004

Bonjour Ertai
J'irai voir ton site dès demain.

Bien à toi.

Merci beaucoup de ton aide.

Jean Francois Ortolo

ortolojf · 13 Novembre 2004

Bonsoir Ertai
J'ai bien vu ton site.

Pas de problème, tu met le bloc de gauche et le bloc de droite en "float : left" et "float : right", dans un container global, et tu met le bloc du bas, théoriquement en dessous du bloc global.

...Avec trois blocs dans le blocs de gauche, comme pour moi.

Le seul problème, sur Mozilla 1.6 sous Linux, le bloc du bas, est situé en bas, effectivement, mais entre le 3ème bloc situé dans le bloc de gauche, et le bloc de droite.

Donc, comme pour moi, il y a des problèmes de calage en vertical.

En ce qui concerne mon site, ça marche, le seul problème est en résolution 640x480, où la distance 800px que je met entre le haut du bloc du milieu, et le haut du container global, est trop petite, celà donne un petit mélange, mais ce n'est pas grave: Qui, de nos jours, a encore la résolution 640x480 ?

J'ai environ 200 visites/jour, sur lesquelles il y a au maximum deux ou trois en 640x480 journellement.

Sinon... Je pourrais mettre ma police de caractères en relatif ( en multiple réel de em ), celà adapterait la hauteur des caractères de mon texte dans le bloc de droite, et ajusterait probablement ce problème.

Je n'ai plus qu'une chose à demander: Que penses-tu de la police de caractères dans ma page d'accueil ?

Verdana, Arial, Helvetica, sans serif

Celà te paraît-il une bonne police pour ce type de site ?

Quelle police pourrais-je utiliser sinon ?

Merci beaucoup de tes conseils.

Jean Francois Ortolo

ortolojf · 14 Novembre 2004

...Encore un détail
Le fait que tu spécifie la hauteur du container ( 400px ), ainsi que le positionnement vertical du bloc du bas ( 350px ), est la cause du fait que le bloc du bas se positionne entre le troisième bloc du bloc de gauche, et le bloc de droite. Mea culpa.

Cependant, pour pouvoir positionner en vertical un bloc du bas, tu as la possibilité: - soit d'indiquer la hauteur du container au dessus du bloc du bas, - soit d'indiquer le positionnement vertical du bloc du bas, par rapport au container global. Celà à supposer que le bloc du bas soit contenu dans le container.

Moralité: Dans tous les cas il faut des positionnements absolus en vertical, ce qui présuppose que les dimensions verticales des différents blocs soient connues, ce qui présuppose qu'il n'y aura pas de problèmes avec des encombrements de textes dans les blocs, suivant les résolutions de l'affichage, et les dimensions de l'écran ( 15 pouces, ou 17 pouces, ou 19 pouces ou + ).

En ce qui me concerne, j'utilise comme unité: le pixel ( px ), et effectivement, sous IE6 en 640x480 sous Windows98 SE avec un écran 17 pouces, le texte dans mon bloc de droite, dépasse en vertical les dimensions permises, ce qui fait que mon bloc du bas ( que j'appelle le bloc du milieu dans mon site ), commence à s'afficher dans ce cas, sous les images du bloc de gauche, et non pas au milieu de l'écran.

Ce qui me pose problème, compte tenu du fait qu'il faut savoir les dimensions des blocs, est de choisir l'unité de mesure, de façon à ce qu'elle décrive les dimensions réelles, quelle que soient la résolution et les dimensions de l'écran. Et là, bernique: Aucune unité de mesure ne permet celà.

Merci beaucoup à toi de ton aide.

Jean Francois Ortolo

Ertai · 14 Novembre 2004

Pour la police de caractère, ce sont celles choisies par a peu-près tout le monde. Des polices qui ne poseront jamais de soucis particuliers. Personnellement, je ne me pose même plus la question quand je fais un site. Et si un graphiste veux mettre autre chose car il trouve ça plus joli ben tu l'ajoute devant, ceux qui ont ladite police, tant mieux pour eux, les autres (soit tout le monde quasimment, y'a que les graphistes qui ont une collection complète de polices exotiques

) resteront sur du verdana.

Quand au décalage de ton bloc du bas en 640x480, le peu d'images de ton site fait que ça ne choque pas...donc tes 2 visiteurs qui ont surement cassé leur écran

ne devrait pas t'en vouloir pour si peu

ortolojf · 15 Novembre 2004

Bonjour Ertai
J'aime beaucoup ton avatar...

Jean Francois Ortolo