brocexco Posté 13 Juin 2008 Partager Posté 13 Juin 2008 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? Lien vers le commentaire Partager sur d’autres sites More sharing options...
KnockedMaster Posté 13 Juin 2008 Partager Posté 13 Juin 2008 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
buh Posté 13 Juin 2008 Partager Posté 13 Juin 2008 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/ 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
brocexco Posté 13 Juin 2008 Auteur Partager Posté 13 Juin 2008 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
ghost Posté 13 Juin 2008 Partager Posté 13 Juin 2008 Salut, 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; } CODE <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" Lien vers le commentaire Partager sur d’autres sites More sharing options...
buh Posté 13 Juin 2008 Partager Posté 13 Juin 2008 [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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 13 Juin 2008 Partager Posté 13 Juin 2008 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. 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
ghost Posté 13 Juin 2008 Partager Posté 13 Juin 2008 (modifié) 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 Modifié 13 Juin 2008 par ghost Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 13 Juin 2008 Partager Posté 13 Juin 2008 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant