28172 sujets

CSS et mise en forme, CSS3

Hauteur et largeur 100% + marges

Bonjour,

Mon problème est le suivant:

Je voudrais avoir un margin de tous les côtés d'une div fluide
...de manière à ce qu'elle occupe toute la page mais sans jamais en toucher les bords.

Si ça ne pause aucun problème pour le margin-top et le margin-left, il en va différemment pour le margin-right et margin-bottom qui ne sont pas appliqués (logique puisque "100% moins un certain nombre de pixels" ne veut rien dire).

J'ai trouvé une solution pour la majorité des navigateurs de classe A tels que:
-Firefox Mac/PC
-Safari Mac/PC
-Google Mac/PC
-Opera Mac/PC

Or ça ne fonctionne sous aucune version de IE (IE8/IE7/IE6)...

Le code:

<!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="en" lang="en" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv= "Content-Language" content="en,fr,nl"/>
        <title>xxx</title>

		<style type="text/css">  
                body 
                {	
             	    margin: 0px;
             	    padding:0px;
             	    background-color:#888;
                }

                #header
                {
             	    width:100%;
             	    height:100px;
             	    margin-left:auto;
             	    margin-right:auto;
             	    background-color:#222;
                }

                #cadre 
                {
             	    display: block;
             	    position:absolute;
             	    min-height:50px;
             	    min-width:100px;
             	    top:0px;
             	    left:0px;
             	    right:0px;
             	    bottom:0px;
             	    margin-top:125px;
             	    margin-left:25px;
             	    margin-right:35px;
             	    margin-bottom:35px;
                 }

                 #corps
                 {
             	    height:100%;
             	    position:absolute;
             	    width:100%;
             	    height:100%;				
             	    top:0px;
             	    left:0px;
             	    right:0px;
             	    bottom:0px;
             	    background-color:#444;
             	    border:6px solid #eee;	
                  }
        </style>
	</head>
	<body>
		<div id="header"></div>    
		<div id="cadre">
		     <div id="corps"></div>
		</div>
	</body>
</html>


Jusqu'ici j'ai eu beau essayer, je n'ai trouvé aucune méthode qui me permette d'y arriver sur absolument tous les navigateurs (à vrai dire, je n'ai même pas trouvé une solution pour IE tout seul).

Si vous aviez une solution à mon problème, cela me dépannerait grandement.

Merci!
Modifié par bayl0ck (18 Feb 2011 - 10:53)
Salut,
je ne suis pas certain d'avoir compris à 100% ton problème. En fait tu veux un corps centré sous ton en-tête mais plus petit que celle-ci c'est bien ça ?

Dans ce cas; définit la largeur de ton corps (en px ou en %; avec les min et les max, etc) et ensuite: Margin-left: auto; margin-right: auto;

Si ta question correspond bien à ce que j'ai cru comprendre, ça devrait marcher !

A+
Philippe
Non, tu n'as en effet pas compris (j'ai du mal m'expliquer).
J'aimerais une div fluide qui occupe toute la place disponible (100% en hauteur et largeur) tout en étant éloignée des bords de page d'un certain nombre de pixels (marges).

Je vous propose d'ouvrir le lien ci-dessous sur n'importe quel navigateur autre que IE et de changer dynamiquement la taille de votre fenêtre pour voir comment réagit la page.
Maintenant le but est d'avoir le même résultat sur IE.

http://www.phenotype.be/sushi5/test.php
Modifié par bayl0ck (18 Feb 2011 - 10:48)
Excuse moi, je ne comprends toujours pas, comment occuper 100% de la fenêtre en laissant des marges ???
Bonjour,

j'ai quelques remarques, déjà sur ton css : une div, étant de type bloc, prendra par défaut toute la largeur disponible ( cf cet article, milieu de page ). Pas besoin de spécifier width:100%.
De plus, pense à utiliser les syntaxes abrégées pour les propriétés telles que les marges.

Pour en revenir à ton problème, as-tu essayé de laisser ton cadre sans aucune contrainte, (il occuperait donc toute la largeur) et d'appliquer tes marges à ton corps (situé à l'intérieur du cadre, il se reférerait donc à celui-ci).

Je ne suis pas certain que cela fonctionne mieux, mais ça me paraît plus logique.

Autrement, je n'ai jamais fait ça mais serait-il possible d'attribuer une largeur de 90% à ton corps, et des marges de 5%, par exemple..? Le total ferait bien, 100%, mais je ne sais pas si cela fonctionne..

Bon courage!!
Le lien le montre bien pourtant, non?
Tu n'arrives pas à voir la page?

Je veux (sur IE) une div qui occupe toute la page tout en étant éloignée des bords d'un certain nombre de pixels.
bayl0ck a écrit :
Je voudrais avoir un margin de tous les côtés d'une div fluide
...de manière à ce qu'elle occupe toute la page mais sans jamais en toucher les bords.


Bonjour, tu pourrais appliquer un padding à body.
Merci à tous pour vos réponses!

Je ne veux apppliquer la marge qu'à la div de corps et non au header.
Et en ce qui concerne l'utilisation des pourcents pour les margin: je cherche à appliquer un nombre de pixels précis aux marges. Le résultat est radicalement différent et la problématique aussi.

Cela dit, je ne sais pourquoi, le code posté semble fonctionner sur tous les navigateurs, IE y compris, alors que hier, je n'y arrivais tout simplement pas.
Dans la foulée, j'ai du faire une modification au code qui a été salutaire.

Problème résolu donc.

Mon seul regret est que dans tout ça, avec un lien qui montre pourtant le résultat que je cherchais à obtenir, je ne semble pas avoir réussi à me faire totalement comprendre par tous.
Avant d'apprendre le CSS je ferais bien d'apprendre tout d'abord à m'exprimer Smiley cligne .

Merci pour toute votre aide, c'était très sympa de votre part d'avoir essayé de m'aider!

PS: j'ai abrégé les margins et ai retiré les "100%" là où ils n'étaient pas nécessaires. Merci de m'avoir corrigé sur ce point.
Modifié par bayl0ck (18 Feb 2011 - 12:08)
Sujet clos
Aller à