28172 sujets

CSS et mise en forme, CSS3

[RESOLU] IE7 ignore mon top,left,right,bottom à 0

salut,

Mon précédent message étant resté sans réponse, je simplifie en espérant obtenir une réponse cette fois-ci. Smiley cligne

FF et safari utilise toute la surface disponible (moins les 2px de chaque bord) pour ma zone centrale, alors que IE se contente de la surface "juste suffisante" ?

Pourquoi ? (Parce que c'est un navigateur en carton ?)
Comment je reformule le tout pour me faire comprendre du navigateur de Redmond ?

D'avance merci.

<html >
<head >
<style type="text/css">
 body{
  margin:0;  padding:0;
}
 
 div#centre{
  position:absolute;
  display:block;
  left:2px;  right:2px;  top:2px;  bottom:2px;
  overflow:auto;
 }
</style>	
	

</head>
<body style="background-color:#fff;">

    <div id="centre" style="background-color:red">
 du contenu
    </div>

</body>
</html>

Modifié par 20100 (21 Jan 2010 - 18:42)
Salut 20100,

Essaies de rajouter

width:100%;
height:100%;

pour ton div#centre

est-ce bien là ce que tu cherches ?
Euh, en fait, non, je ne cherche pas à occuper 100% de la surface dispo (par la suite je compte ajouter un header et un footer de hauteur fixe (mettons 200px et 100px)).

div#centre{
position:absolute;
display:block;
left:2px; right:2px; top:200px; bottom:100px;
overflow:auto;
}
Salut,

Je ne vois pas l'utilité de mettre ton conteneur principal en absolute, t'es sûr que tu as besoin de ça ?
Le problème c'est que tu ne peux spécifier que top ou bottom et right ou left, sinon son uniquement pris en compte top et left.
kursus a écrit :
Salut,

Je ne vois pas l'utilité de mettre ton conteneur principal en absolute, t'es sûr que tu as besoin de ça ?


En fait je veux que la zone centrale commence à 200px du haut (ou je rajouterai un header) et s'arrête à 100px du bas du navigateur. Et que si le contenu de la zone centrale est "trop grand" un ascenseur apparaisse.
Cela focntionne avec FF et Safari
Laurie-Anne a écrit :
Le problème c'est que tu ne peux spécifier que top ou bottom et right ou left, sinon son uniquement pris en compte top et left.


Dans les specs ou dans l'interprétation d'IE ?
parce que cela fonctionne sans souci sur FF et Safari.
Attention ! les propriétés left et right, d'une part, et top et bottom, d'autre part, sont mutuellement antagonistes. Autrement dit, si tu utilises la propriété left, tu ne peux pas utiliser right (sauf pour lui donner la valeur par défaut auto, lorsqu'il s'agit d'annuler une valeur de la propriété en question acquise par héritage), et inversement ; même motif, même punition pour top et bottom.

Édition : grillé par Laurie-Anne (ça m'apprendra à lire en diagonale Smiley langue ).
Modifié par Victor BRITO (20 Jan 2010 - 17:54)
Victor BRITO a écrit :
Attention ! les propriétés left et right, d'une part, et top et bottom, d'autre part, sont mutuellement antagonistes. Autrement dit, si tu utilises la propriété left, tu ne peux pas utiliser right (sauf pour lui donner la valeur par défaut auto, lorsqu'il s'agit d'annuler une valeur de la propriété en question acquise par héritage), et inversement ; même motif, même punition pour top et bottom.


Tant que tu ne fais pas intervenir une width en même temps je ne vois pas de problème d'antagonisme.

exemple extrait de http://www.w3.org/TR/CSS21/visuren.html#position-props

top: 15%;
right: 0;
bottom: 100px;
left: 10em;

(bon c'est pour du fixed mais le fixed c'est juste un cas particulier de l'absolute, non ?)
20100 a écrit :
(bon c'est pour du fixed mais le fixed c'est juste un cas particulier de l'absolute, non ?)

Non, c'est un type de positionnement différent (même s'il a comme point commun la sortie de l'élément hors du flux).
Victor BRITO a écrit :

Non, c'est un type de positionnement différent (même s'il a comme point commun la sortie de l'élément hors du flux).


Si tu peux positionner l'élément par la droite (right:...) c'est qu'il y a une frontière droite définie par une box de plus niveau.
Si tu peux positionner l'élément par la gauche (left:...) c'est qu'il y a une frontière gauche définie par une box de plus niveau.

Donc tant que tu ne donnes que 2 contraintes dans le triplet (left,right,width) je ne vois pas ce qui bloquerait le calcul.
largeur de la box parente : 1000
=> left:10px right:10px alors largeur = 980px
=> right:20px width = 500px alors left = 480px
=> left:10px right:10px largeur:500px => contraintes impossibles à satisfaire.
Personne pour remarquer qu'il n'y avait pas de Doctype au code HTML indiqué?
On est où ici, sur le Site du Zéro? Smiley lol

Laurie-Anne et Victor BRITO a écrit :
Le problème c'est que tu ne peux spécifier que top ou bottom et right ou left, sinon son uniquement pris en compte top et left.

(...)

Attention ! les propriétés left et right, d'une part, et top et bottom, d'autre part, sont mutuellement antagonistes.

Faux. L'utilisation conjointe de left et right ou top et bottom n'est pas décrite en détail dans CSS 2.1, mais la définition du positionnement absolu l'évoque (passage important en italiques):
CSS 2.1 a écrit :
absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties.

Par ailleurs les définitions des propriétés top, bottom, left et right ne dit pas qu'elles sont mutuellement exclusives, et un exemple illustrant le positionnement fixe a le code suivant:
#sidebar {
  position: fixed;
  width: 10em;
  height: auto;
  top: 15%;
  right: auto;
  bottom: 100px;
  left: 0;
}

Enfin, c'est implémenté depuis des lustres dans Opera, Webkit et Gecko, et implémenté dans Internet Explorer depuis la version 7 (ou la 8 seulement, mais il me semble que non).

Si le code donné par 20100 ne fonctionne pas dans IE 7 et 8, ça vient sans doute du mode Quirks.
Florent V. a écrit :

Par ailleurs les définitions des propriétés top, bottom, left et right ne dit pas qu'elles sont mutuellement exclusives, et un exemple illustrant le positionnement fixe a le code suivant:
#sidebar {
  position: fixed;
  width: 10em;
  height: auto;
  top: 15%;
  right: auto;
  bottom: 100px;
  left: 0;
}

Enfin, c'est implémenté depuis des lustres dans Opera, Webkit et Gecko, et implémenté dans Internet Explorer depuis la version 7 (ou la 8 seulement, mais il me semble que non).

Si le code donné par 20100 ne fonctionne pas dans IE 7 et 8, ça vient sans doute du mode Quirks.


ah le doctype Smiley smile ...

IE7 n'implementais pas ce fonctionnement du positionement absolu lors de mes test sur une de ses premieres versions.

j'ajouterais :

en gros , mettre les 4 coordonné a 0 d'un conteneur positionné en absolu et dimensionné en largeur et hauteur a pour effet de centré celui-ci dans son parent de référence (positionné en relatif ou body) .

On peut y retrouvé les défauts des marges négatives si le conteneur est plus grand que son parent ( Opera entre autre ) et bien sur voir un scroll aussi apparaitre dans ce conteneur "centré" , en final rien de bien joli ni fluide.

http://yidille.free.fr/plux/valign/uploads/centre-position-absolute.html (l'un des 5 exemples de yidille.free.fr/plux/valign/?10-5-pistes-pour-centrer-en-xy-vos-pages)

Une fois de plus le centrage vertical est une question qui revient en permanence et la seule et unique méthode passe partout est l'usage d'un tableau sans que l'on ai a se soucier d'effets de bords.

Les display: inline-block ou table , les position relative/absolute avec marge négatives ou automatique (h/v) induite via le positionnement absolu , le jeux sur des éléments flottant ,

... ont toutes en communs le fait de forcer les contextes de formatages et/ou haslayout sans être compatible avec tout les navigateurs . Seul un vrai tableau sait le faire et ce dans n'importe lequel des navigateurs .

Si les comportements et résultats sont intéressant a connaitre , il faut de temps en temps , savoir se rabattre sur ce qui marche a coup sur Smiley smile

GC
Modifié par gc-nomade (21 Jan 2010 - 18:50)
Avec le doctype suivant cela va beaucoup mieux Smiley biggrin 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
j'avais un problème similaire ..

en fait, un div se trouvant dans un div drag&drop (donc difficile de prévoir une taille ou position fixe de son parent)



et j'essayais de définir du left et right en même temps... mon left se mettait bien en place par contre il ne tenait pas compte de mon right et mon petit div se retrouvait avec le même width que son parent ... donc si je le positionnais à 100px left, il dépassait de l'autre coté de 100px .. sans tenir compte de mon right.


la solution toute simple (que j'ai passé 3h à chercher) c'était simplement de rajouter un : width:auto; (dans le petit div) Smiley lol


ps: désolé de répondre à un vieux sujet, mais quand je cherche qqe chose sur google, une fois que j'ai trouvé ma solution j'ai tendance à la poster dans le premier sujet sur lequel je suis tombé en me disant que d'autres tomberont aussi ici en tapant les même mots clés que moi. Smiley cligne
Florent V. a écrit :

On est où ici, sur le Site du Zéro? Smiley lol

Non, non, Alsacréations et, avec un "S" SVP !
Sujet clos
Aller à