28234 sujets

CSS et mise en forme, CSS3

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

Bonjour,
je suis en train de faire une structure et j'ai un souci, vous vous en doutez Smiley decu

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 Smiley confused

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)
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 Smiley cligne

PS : tu as essayé un clear sur #maincontent-bottom ?
Modifié par Riku Asakura (17 Mar 2010 - 17:24)
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 Smiley sweatdrop
Sujet clos
Aller à