28173 sujets

CSS et mise en forme, CSS3

[résolu] Site extensible avec marges

Bonsoir,

j'ai commencé un site que je voulais centrer à la manière d'alsacréations mais en appliquant des marges qui restent fixes.

j'ai procédé comme suit :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Page extensible avec marges fixes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
<!--
*{
padding: 0px;
margin: 0px;
border: 0px;
}
body{
text-align: center;
font: 62.5% arial, helvetica, sans-serif;
width: 100%;
height: 100%;
color: #000;
background: #CCC;
}
#centrage{
text-align: left;
width: auto;
margin: 10px 0px 10px 0px;
position: relative;
}
#contenu{
position: absolute;
left: 20px;
right: 20px;
background: #FFF;
}
-->
</style>
</head>
<body id="centrage">
	<div id="contenu">
	page centrée
	</div>
</body>
</html>


ça marche très bien, avec ie6 et firefox 1,2 mais, n'ayant jamais vu cette technique nul part, même ici, ça me met quand même un gros doute quand à la compatibilité avec certain navigateur Smiley sweatdrop .

Merci de me dire ce que vous en pensez.
Modifié par bzh (15 Feb 2007 - 23:14)
en fait j'ai appliqué un position absolue par rapport à la gauche et à la droite de l'écran a un div contenu, le #contenu étant dans un div prenant toute la largeur de la page


#contenu{
position: absolute;
left: 20px;
right: 20px;
background: #FFF;
}


est ce que c'est correct?
Bonjour,

Curieux effectivement, j'aurais quant à moi appliqué:
<style type="text/css">

<!--

*{
padding: 0px;
margin: 0px;
border: 0px;
}

body{
text-align: center;
font: 62.5% arial, helvetica, sans-serif;
background: #CCC;
}


#contenu{
width: 90%;
position: absolute;
left: 50%;
margin-left: -45%;
background: #FFF;
}

-->

</style>
</head>
<body>
<div id="contenu">
	page centrée
</div>
</body>
bzh a écrit :

ça marche très bien, avec ie6 et firefox 1,2 mais, n'ayant jamais vu cette technique nul part

Cette manière de dimensionner un élément est assez peu utilisée car ne fonctionne pas Internet Explorer sauf depuis la version 7. C'est pourquoi je m'étonne que tu affirmes que cela marche très bien avec IE6, tu n'aurais pas plutôt testé avec la version 7 ?.

Toujours est-il que dans ce cas c'est assez inutile : il suffit juste de donner des marges sans positionnement absolu ni largeur (ou avec largeur + marges auto)
Modifié par Alan (11 Jan 2007 - 00:32)
Ben pour tant, ça marche chez moi avec IE6

J'ai mis une page test ici

c'est vrai que dans mon exemple, c'est vraiment inutile. Mon but étant d'appliquer une marge à toute une partie du site ( dans l'exemple en ligne, sous l'entête).

Je n'arrive pas à appliquer de marge autrement avec IE6 sans que tout fiche le camps ou que ça me rajoute un scroll horizontal.
Modifié par bzh (11 Jan 2007 - 14:44)
Je confirme que ça fonctionne !
J'utilise IE.6 et la page d'exemple proposée par bzh prend bel et bien toute la largeur en plein écran, et s'adapte aussi au redimentionnement de la fenêtre...
Sujet clos
Aller à