J'essaie de mettre mon site aux normes CSS. cependant il me reste un pb que je n'ai pas encore résolu, celui de l'entête: trois boites, l'une de longueur fixe contenant le logo, et les deux autres occupant à parts égales le reste de la longueur.
l'en tëte à traduire en css:
Pour exemple de l'en-tête voir la page suivante
quelqu'un aurait il une idée?
Version complète: sur le forum Webmaster Hub : Ah! Ces petites boites qui "float"ent mal!
Salut,
Je pense que le mieux c'est de faire de l'extensible ou du fixe pour toutes tes boites, mais pas les deux, sinon tu auras toujours des problèmes de redimensionnement .
Dans ton cas, en trois colonnes, le mieux c'est de mettre les deux premières en float left et right, la troisième au milieu des deux. Chaque boîte avec une largeur de 33%.
C'est du moins comme ça que je ferais.
Je pense que le mieux c'est de faire de l'extensible ou du fixe pour toutes tes boites, mais pas les deux, sinon tu auras toujours des problèmes de redimensionnement .
Dans ton cas, en trois colonnes, le mieux c'est de mettre les deux premières en float left et right, la troisième au milieu des deux. Chaque boîte avec une largeur de 33%.
C'est du moins comme ça que je ferais.
CITATION(brocexco @ vendredi 13 juin 2008 à 14:49) 
J'essaie de mettre mon site aux normes CSS. quelqu'un aurait il une idée?
Aie aie alors va y avoir du boulot (voir liens ci-dessous)
http://openweb.eu.org/articles/finir_cadres/
http://www.projetweb.com/labalise/frames_1.php
http://openweb.eu.org/articles/problemes_tableaux/
CITATION(brocexco @ vendredi 13 juin 2008 à 14:49)
quelqu'un aurait il une idée?
Oui et vu ce qui est dit dans les posts ci-dessus ce serait de tout refaire.
Bon courage.
Merci à tous!
[Pour Buh] La page en référence n'a pour seul but que de montrer l'agencement des trois boites (Logo, nom, adresse) à construire en en-tête. Cette page est encore au format ancien avec usage de tableaux. Tout est en effet à reconstruire, et tout est déjà prêt pour cette reconstitution .... sauf l'en-tête.
[Pour Buh] La page en référence n'a pour seul but que de montrer l'agencement des trois boites (Logo, nom, adresse) à construire en en-tête. Cette page est encore au format ancien avec usage de tableaux. Tout est en effet à reconstruire, et tout est déjà prêt pour cette reconstitution .... sauf l'en-tête.
Salut,
Si j'ai bien compris, un truc comme ça:
Alors le 49.9% car ie a du mal dans le calcul des % (les valeurs arrondies de 50% + 50% font plus de 100% et ton bloc "passe dessous") et l'espace entre les 2 blocs (0.2%) en trichant avec un background de même couleur pour le bloc #reste ça devrait le faire.
Bon courage
ps: le *{margin: 0; padding: 0;} c'est pour le test, a éviter son utilisation généralisées sauf si on en connait les "retombées"
Si j'ai bien compris, un truc comme ça:
CODE
*{margin: 0; padding: 0;}
#head{
border: 1px solid lime;
overflow: auto;
}
#logo{
width: 200px;
height: 200px;
float: left;
background: red;
}
#reste{
margin-left: 200px;
height: 200px;
background: green;
}
#gauche{
width: 49.9%;
float: left;
height: 200px;
background: silver;
}
#droite{
width: 49.9%;
float: right;
height: 200px;
background: orange;
}
#head{
border: 1px solid lime;
overflow: auto;
}
#logo{
width: 200px;
height: 200px;
float: left;
background: red;
}
#reste{
margin-left: 200px;
height: 200px;
background: green;
}
#gauche{
width: 49.9%;
float: left;
height: 200px;
background: silver;
}
#droite{
width: 49.9%;
float: right;
height: 200px;
background: orange;
}
CODE
<body>
<div id="head">
<div id="logo">
</div>
<div id="reste">
<div id="gauche"></div>
<div id="droite"></div>
</div>
</div>
</body>
<div id="head">
<div id="logo">
</div>
<div id="reste">
<div id="gauche"></div>
<div id="droite"></div>
</div>
</div>
</body>
Alors le 49.9% car ie a du mal dans le calcul des % (les valeurs arrondies de 50% + 50% font plus de 100% et ton bloc "passe dessous") et l'espace entre les 2 blocs (0.2%) en trichant avec un background de même couleur pour le bloc #reste ça devrait le faire.
Bon courage
ps: le *{margin: 0; padding: 0;} c'est pour le test, a éviter son utilisation généralisées sauf si on en connait les "retombées"
CITATION(brocexco @ vendredi 13 juin 2008 à 16:20)
[Pour Buh] La page en référence n'a pour seul but que de montrer l'agencement des trois boites (Logo, nom, adresse) à construire en en-tête. Cette page est encore au format ancien avec usage de tableaux. Tout est en effet à reconstruire, et tout est déjà prêt pour cette reconstitution .... sauf l'en-tête.
Ah bon alors bien sûr dans ce cas là je n'ai rien dit, c'est OK !
Mais s'il est vrai que pour le demandeur cela va sans dire, c'est parfois mieux en le disant
Inutile de faire un exemple car je vois que celui de ghost semble être très bien.
CITATION(ghost @ vendredi 13 juin 2008 à 19:21)
Alors le 49.9% car ie a du mal dans le calcul des % (les valeurs arrondies de 50% + 50% font plus de 100% et ton bloc "passe dessous") et l'espace entre les 2 blocs (0.2%) en trichant avec un background de même couleur pour le bloc #reste ça devrait le faire.
Il me semble que les soucis d'Internet explorer sont dûs à sa gestion différente du modèle de boîte en mode quirks (brouillon). Avec un doctype valide, il ne devrait plus y avoir de soucis.
CITATION(ghost @ vendredi 13 juin 2008 à 19:21)
ps: le *{margin: 0; padding: 0;} c'est pour le test, a éviter son utilisation généralisées sauf si on en connait les "retombées"
Personnellement, je l'utilise en production, et il correspond parfaitement à mes attentes (réinitialiser les marges par défaut de tous les éléments).
Je ne comprends pas pourquoi il faudrait l'utiliser en test et pas en prod.
Salut captain,
Moi aussi je l'utilise en production avec les avantages et inconvénients mais je connais les dommages "collatéraux" qui y sont associés...
Je ne suis pas sûr qu'un non habitué des css y soit vraiment sensible de prime abord car ce peut être à double tranchant... avec des prises de tête potentielles assez intéressantes
Moi aussi je l'utilise en production avec les avantages et inconvénients mais je connais les dommages "collatéraux" qui y sont associés...
Je ne suis pas sûr qu'un non habitué des css y soit vraiment sensible de prime abord car ce peut être à double tranchant... avec des prises de tête potentielles assez intéressantes
Dans ce cas, il ne vaut mieux pas le mettre en développement non plus, la différence sans/avec étant trop importante pour espérer garder le même rendu.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.