28173 sujets

CSS et mise en forme, CSS3

Max-width, centrage et marge

bonjour,

Je travaille sur un site avec un design fluid que je voudrais limiter en largeur (pour les résolutions de portable par exemple). Disons que le site s'adapte tant que la largeur du navigateur ne dépasse pas 1000px, j'ai donc utilisé la propriété max-width et width:expression() (pour IE).

Cela fonctionne !

De plus le site est centré à l'aide de margin-left/right : auto.

Maintenant la question est : comment je peut mettre des marges (2-3%) quand la taille est inférieure à 1000px ?

voici le css du div qui continent le site :

#global {
	position : relative;
	margin-left : auto;
	margin-right : auto;
	text-align : left;
	max-width : 1000px;
	width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}


merci
Salut,

à Mikachu,

Ah ben là je crois que tu n'as pas compris le post de dhalsim Smiley cligne


à dhalsim,

C'est assez facile à réaliser, il suffit de mettre un padding de la valeur choisie (2/3%) au conteneur de l'élément qui a la propriété max-width.

Soit par exemple :
html

<body>
<div id="global">

</div>
</body>


css

body {
padding:0 3%;
text-align:center;/* pour IE less than IE6 */
}

div#global {
text-align:left;/* pour IE less than IE6 (suite) */
max-width:1000px;
margin-left:auto;
margin-right:auto;
}


+ ce qu'il faut en commentaire conditionnel pour émuler max-width pour IE en javascript comme tu l'as prévu.

<edit>
Au passage c'est vraiment un point à noter que la souplesse d'utilisation des design fluides repose beaucoup sur le fait que les largeur ne sont pas déterminées comme telles mais bien déduites soit de marges externes de l'élément concerné, solution efficace mais encore un peu faible, soit de marges internes de l'élément parent direct, solution la plus solide en fait.

Quand ce point est maitrisé, l'idée même d'inadaptation des design fluides pour des constructions de hautes précisions/complexités graphiques peut vraiment être relativisée...

Pour autant bien sur qu'on soit capable de faire des constructions de haute complexité graphique ... Smiley rolleyes ... Hein l'artichaut !!! Smiley biggol
</edit>

<edit2>
Ah c'est vrai que j'avais mis un de mes petits tests en ligne sur cette affaire.
C'est ici :
http://clb56.freezee.org/fluide_et_padding/exemple8.php
</edit>
Modifié par clb56 (02 Oct 2006 - 18:01)
genial merci clb56, ça fonctionne à merveille Smiley biggrin

sinon à propos des commentaires conditionnels, est-il vraiment nécessaire de les utilisés dans ce cas sachant que expression() n'est compris (et utilisé) que par IE.

Je demande cela car j'ai mis en place un style switcher et cette histoire de max-width n'est utilisé que dans une des nombreuses feuilles de style utilisées.
Sujet clos
Aller à