[résolu] Structure de site / positionnement de la colonne de droite

Auteur
swool	# 17 Mar 2010 - 16:49:43
2 Posts	Bonjour, je suis en train de faire une structure et j'ai un souci, vous vous en doutez sur un schéma ça donne ça et en ligne ça. ça peut sembler simple mais en fait, je veux garder le fond qui fait toute la largeur de la page, donc j'ai besoin d'une coupe en sandwich horizontal mais je veux aussi que la colonne de droite "pousse" le pied de page, il faut donc qu'elle passe par dessus la zone medium. Je ne suis pas très clair peut-être mon css : html, body { font-size: 100%; border: 0; margin: 0; padding: 0; margin: 0; } .clearbreak { clear: both; } /TOP***************************************/ #master-top{ padding: 0px; margin: 0px; background-color:#FFFFFF; width: 100%; } #contener-top { color: #000; width: 1240px; background:url(images/ombre-contener.png) repeat-y center top; margin-left: auto; margin-right: auto; } #col-top-left { float: left; width: 197px; background-color:#CCCCCC; margin-left:17px; } #maincontent-top { width: 1017px; background-color:#999999; margin-left:17px; } #col-right { float: right; width: 189px; background:url(images/fond-col-right.png) repeat-y top left; margin-right:17px; } /BOTTOM****************************************/ #master-bottom{ padding: 0px; margin: 0px; background:url(images/fond-master-bottom.png) repeat-x right top; width: 100%; } #contener-bottom { color: #000; width: 1240px; background:url(images/ombre-contener.png) repeat-y center top; margin-left: auto; margin-right: auto; } #col-bottom-left { float: left; width: 197px; background:url(images/fond-col-bottom-left.png) repeat; margin-left:17px; } #maincontent-bottom { width: 1017px; background:url(images/fond-content-bottom.png) repeat; margin-left:17px; } /BASE*****************************************/ #master-base{ padding: 0px; margin: 0px; background:url(images/fond-master-base.png) repeat-x left bottom; width: 100%; } #contener-base { color: #000; width: 1240px; background:url(images/fond-contener-base.png) no-repeat center bottom; margin-left: auto; margin-right: auto; } et ma structure : <div id="master-top"> <div id="contener-top"> <div id="col-top-left"><br /><br />col-top-left<br /><br /><br /><br /></div> <div id="col-right"><br /><br /><br /><br /><br />col-right<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div> <div id="maincontent-top"><br /><br />maincontent-top<br /><br /><br /><br /></div> </div> </div> <div id="master-bottom"> <div id="contener-bottom"> <div id="col-bottom-left"><br /><br />col-bottom-left<br /><br /><br /><br /></div> <div id="maincontent-bottom"><br /><br />maincontent-bottom<br /><br /><br /><br /></div> </div> </div> <div id="master-base"> <div id="contener-base"><br /><br />contener-base<br /></div> </div> Modifié par swool (17 Mar 2010 - 20:07)
2 Posts
Geoffrey C.	# 17 Mar 2010 - 17:19:20
Je ne sais pas, gzip... Modérateur 77 Posts	Bonjour, J'ai un doute concernant l'utilisation des tirets comme séparateur de mots pour l'attribut id. Pour les classes je crois que ça ne gêne pas, mais pour les identificateurs j'ai un doute. A vérifier. Si je peux me permettre pour continuer, l'utilisation de < br / > pour placer le texte, même si ce n'est que temporaire, c'est un peu "sale". Je pense qu'en nettoyant un peu tout ça et en jouant avec des padding tu y verras peut-être un peu mieux. Quelles sont tes contraintes en terme de compatibilité ? Sinon il faudrait voir du côté de la propriété CSS display, et les valeurs table, table-row et table-cell. Bon courage PS : tu as essayé un clear sur #maincontent-bottom ? Modifié par Riku Asakura (17 Mar 2010 - 17:24) Schnapsum - Le Lorem Ipsum Alsacien, démarquez-vous dans vos mises en page ! Astuces, tutoriels et ressources en CSS3, jQuery et pour WordPress.
Je ne sais pas, gzip... Modérateur 77 Posts
swool	# 17 Mar 2010 - 17:43:24
2 Posts	ohhhh, le clear à solutionné mon souci... je l'avais mal positionné quand j'avais testé, quel boulet. merci Riku! je vais modifier pour les tirets, je n'en suis qu'au début autant ne pas prendre de risque et pour la compatibilité, j'ai bien peur que leur parc soit encore en IE6
2 Posts
Heyoan	# 17 Mar 2010 - 18:17:53
Modérateur 8101 Posts	Salut, les tirets ne posent aucun problème dans un nom d'id. Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
Geoffrey C.	# 17 Mar 2010 - 18:36:32
Je ne sais pas, gzip... Modérateur 77 Posts	@swool : pas de souci @Heyoan : merci Schnapsum - Le Lorem Ipsum Alsacien, démarquez-vous dans vos mises en page ! Astuces, tutoriels et ressources en CSS3, jQuery et pour WordPress.
Je ne sais pas, gzip... Modérateur 77 Posts