Comment agrandir le div en fonction du contenu

**lonyc** · 22/12/2008, 14h06

Bonjour,

Je n'arrive pas à rendre compatible mon div.
Celui-ci, sous IE ne s'agrandi pas en fonction de son contenu, le contenu ressort completement du div.
Sous FF cela fonctionne correctement.

Avez-vous une solution, je ne trouve pas.

Merci et bonne journée

**RomainVALERI** · 22/12/2008, 14h08

Il faut que tu montres un peu les codes html et css concernés si tu veux une réponse à ton problème, lonyc... ^^

**Macmillenium** · 22/12/2008, 14h19

Bonjour,

Si tu es dans le cas d'un bloc qui est censé "pousser" son conteneur, le positionnement relative de ce dernier pourrait résoudre le problème sous IE.
Mais sans vouloir précipiter les choses, un bout de ton code serait pas mal

**lonyc** · 22/12/2008, 14h36

Bon je vais essayer de faire de mon possible, c'est assez compliqué, j'ai plusieurs fichiers qui gere ma mise en page, j'aurais du faire un plan des le debut, surtout que j'ai toujours eu l'habitude de coder des tables et là je suis passé au div d'un coup.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
div#cadre{
//Englobe completement la page
	border-width: 1px;
	border-style: solid;
	border-color: #e0dfdf; 
	border-top-width:0;
	margin-left: auto;
	margin-right: auto;
	width: 830px;
	text-align: left;
	}
div#bandeau{
//1er element dans la cadre
	width:830px;
	padding-top: 1px;
	}
div#bandeau2{
//2eme element du cadre, se place en dessous de bandeau
	display:table; 
	width:830px;
	margin-bottom:10px;
	background-color:#e6e6fa; 
	padding-top: 1px;
	padding-bottom: 2px;
	color:#000;  
	border-width: 1px;
	border-style: solid;
	border-color: #ba55d3;
	border-left-width:0;
	border-bottom-width:0;
	border-right-width:0;
	}	
div#contenu {
//3 eme element se place en dessous de bandeau2
	float:left;
	width:830px;
	background-color:#ffffff;
	text-align:center;
	min-height:1200px;
	}
div#insertion {
//se place dans contenu, contient les annonces
	margin-bottom:10px;
	padding-top:10px; 
	padding-left:5px;
	float:left; 
	width:640px;
	height:900px;
	background-color:#ffffff;
	text-align:left;
	display:table; 
	clear:both;
	}
 
div#menu { 
/*à l'intérieur de cadre à coté de contenu*/
	margin-left:10px;
	margin-top:0px;
	float:left; 
	width:170px;
	min-height:1200px;
	background-color:#ffffff;
	}
div#piedpage {
//en bas de cadre en dessous de contenu
	font-family: Verdana,Arial,Tahoma,Consolas, Geneva,  Helvetica,sans-serif; 
	font-size:10px; 
	letter-spacing:0px;
	color : #000000;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	padding-left:10px;
	width:820px;
	height:20px;
	background-color:#e6e6fa; 
	color:#000;  
	border-width: 1px;
	border-style: solid;
	border-color: #ba55d3; 
	border-left-width:0;
	border-bottom-width:0; 
	border-right-width:0;	
	clear:both;
	}

Pour l'instant comme ca sa passe sous ie et je viens de m'apercevoir que le height de insertion ca doit être lui qui me gene

J'ai tout mis à height:100%
Ca fonctionne sur ma page d'accueil, mais cette fois c'est l'inverse, insertion n'est pas assez rempli cette page par exemple :http://www.otroc.fr/petite-annonce-d...table-443.html

**Erwan31** · 22/12/2008, 15h25

Bonjour,
tu veux parler d'IE6 je suppose (précise toujours la version, IE7 et IE6 ne se comportent pas de la même manière et IE8 bêta très différemment).
IE6 ne sait pas interpréter la propriété min-height et interprète height comme un min-height.

Le problème vient du height:200px de div#menuhaut qui force la hauteur des pubs à prendre 200px alors qu'IE6 qui l'interprète comme un min-height va étendre celui-ci autant que son contenu le permettra.

L'autre problème vient de #ads qui est en position:asbolute et qui est donc sorti du flux normal, autrement dit c'est comme si il n'existait pas pour son conteneur.
Essaye d'éviter autant que possible de doter tes div d'une hauteur, c'est casse gueule et souvent source d'ennuis ultérieurs.

un height:100% n'a d'effet que si un de ses conteneur est doté d'une hauteur fixe ou à défaut que les éléments body ET html aient un height fixe ou en pourcentage.

Pour info la valeur table de display n'a pas été implémenté par IE (IE7 et versions inférieures).

**lonyc** · 22/12/2008, 15h38

Je te remercie çà à l'air de fonctionner, franchement des fois ca déprime, j'était prête à repasser au tableau pour ma mise en page.

J'utilise Safari à la place d'IE6 il interprete pareil non ?

**devyan** · 22/12/2008, 15h40

Salut,

Je ne suis pas entièrement d'accord...

En fait "height" est strictement respecté avec IE6 si on ajoute "overflow:hidden"

**Erwan31** · 22/12/2008, 15h48

Envoyé par lonyc

Je te remercie çà à l'air de fonctionner, franchement des fois ca déprime, j'était prête à repasser au tableau pour ma mise en page.

Eh oui cela demande un certain temps d'adaptation et d'apprentissage avant de bien maîtriser et comprendre toutes les bases mais rassures toi tu n'est pas la seule à galérer, vous êtes très nombreux

Il faut dire que tu commences pas avec la structuration la plus simple aussi...
Je te conseil vivement de t'exercer avec des pages simples (voir les tutoriels CSS et la FAQ CSS de developpez ).

Envoyé par lonyc

J'utilise Safari à la place d'IE6 il interprete pareil non ?

Non pas du tout.
Safari est bien plus conforme aux standards en vigueur (HTML4 et CSS2.1) qu'IE6 qui est encore farci debug et qu'on va se traîner encore quelques temps malheureusement. IE6 est le pire des navigateur actuel, je te conseil sans hésiter de rester sur Safari (à ma connaissance le plus rapide qui plus est).

**lonyc** · 22/12/2008, 15h54

Envoyé par Erwan31

Il faut dire que tu commences pas avec la structuration la plus simple aussi...

Oui de plus que mon site c'est 0 tableau sur toutes les pages
C'est clair que je galère...

En tout cas merci beaucoup

**Erwan31** · 22/12/2008, 15h55

Envoyé par devyan

En fait "height" est strictement respecté avec IE6 si on ajoute "overflow:hidden"

Hello Devyan,
oui ok mais en même temps avec ce cas de figure, tu sacrifies l'accessibilité en cas de zoom texte.

**devyan** · 22/12/2008, 16h12

Envoyé par Erwan31

Hello Devyan,
oui ok mais en même temps avec ce cas de figure, tu sacrifies l'accessibilité en cas de zoom texte.

Pourrais-tu préciser ? Il n'y a pas de zoom avec IE6 il me semble

**Erwan31** · 22/12/2008, 16h44

Envoyé par devyan

Pourrais-tu préciser ? Il n'y a pas de zoom avec IE6 il me semble

Désolé pour le manque de précision, si il y a un zoom texte/typographique activable via le CTRL+molette ou le menu affichage. Pour IE7 il est activable uniquement cette fois-ci via le menu affichage.
A ne pas confondre avec le zoom graphique qui zomm l'ensemble de l'interface (implémenté maintenant sur Firefox 3).
Safari a aussi choisi de conserver le zoom texte et celui-ci perdura encore certainement longtemps sur certains navigateurs graphiques sachant que les UAAG (User Agent Accessibility Guidelines > les directives d'accessibilité pour les Agents utilisateurs) ne permettent pas de se reposer uniquement sur le zoom graphique en oubliant le zoom texte.

Lorsque tu définis une hauteur de bloc en pixel/pourcentage couplée à un overflow:hidden, cela a pour effet de masquer la partie inférieure d'un texte en cas de zoom texte.

**devyan** · 22/12/2008, 17h07

Envoyé par Erwan31

Désolé pour le manque de précision, si il y a un zoom texte/typographique activable via le CTRL+molette ou le menu affichage. Pour IE7 il est activable uniquement cette fois-ci via le menu affichage.
A ne pas confondre avec le zoom graphique qui zomm l'ensemble de l'interface (implémenté maintenant sur Firefox 3).
Safari a aussi choisi de conserver le zoom texte et celui-ci perdura encore certainement longtemps sur certains navigateurs graphiques sachant que les UAAG (User Agent Accessibility Guidelines > les directives d'accessibilité pour les Agents utilisateurs) ne permettent pas de se reposer uniquement sur le zoom graphique en oubliant le zoom texte.

Lorsque tu définis une hauteur de bloc en pixel/pourcentage couplée à un overflow:hidden, cela a pour effet de masquer la partie inférieure d'un texte en cas de zoom texte.

Ok, je comprends mieux ce que tu voulais dire.
En même temps, si tu fixes width et height d'un bloc c'est que tu n'as à priori pas envie que sa taille change

**Erwan31** · 22/12/2008, 18h02

Envoyé par devyan

En même temps, si tu fixes width et height d'un bloc c'est que tu n'as à priori pas envie que sa taille change

Oui c'est pas faux mais pour les raison citées c'est souvent problématique en terme d'accessibilité même s'il y a des cas de figure ou ça ne l'est pas sachant que les directives d'accessibilité ne contraignent pas à rendre un contenu accessible au delà d'un zoom de 150% (2 niveau d'agrandissement sous IE).
Ceci dit ce type d'"inaccessibilité" ne l'est que si on s'en tient aux WCAG (directive d'accessibilité du contenu web) et non plus à l'accessibilité de manière plus général (UAAG+WCAG+ATAG). Je veux dire par là qu'il y a toujours moyen d'accéder au contenu au niveau user agent/utilisateur, soit en désactivant CSS, soit de manière naturel via un navigateur texte ou un lecteur d'écran par exemple, soit en utilisant une CSS User dont les déclarations d'une règle de style marquées !important surclasseront celles de la CSS auteur.

**devyan** · 22/12/2008, 18h17

Encore plein de "normes"

dont je n'avais même jamais entendu parler

**Erwan31** · 22/12/2008, 18h46

Envoyé par devyan

Encore plein de "normes"

dont je n'avais même jamais entendu parler

Normal c'est pas forcément connu même de tous ceux qui font de l'accessibilité
Lire cet article pour mieux comprendre.
N'aies crainte, c'est bien de savoir à quoi correspond chaque norme et que l'accessibilité web ne se borne pas uniquement aux WCAG, mais tu n'as ni besoin de connaître les UAAG qui s'adressent aux développeurs d'agents utilisateurs et encore moins les ATAG qui s'adressent aux développeurs des outils d'édition de contenus web comme Dreamweaver, Kompozer etc.
En revanche connaître les différentes implémentations des UA (User Agents)
est utile pour faire ses choix en connaissance de cause.
Pour ma part je ne connais rien d'ATAG et juste quelques points d'UAAG (en partie grâce à un expert en accessibilité) mais ça ne me sert à rien dans la pratique.
Quant aux WCAG 2.0, leur lecture complètes exigerait d'avoir beaucoup de temps devant soi et pas mal de courage...
Si tu te contentes de suivre les points de contrôle des référentiels RGAA ou Accessiweb (qui sont des méthode d'application de la norme WCAG) c'est déjà bien.

Ceci dit il n'est pas inutile de connaître dés à présent la norme ARIA (applications Internet enrichies accessibles)

> une bonne intro au sujet

Comment agrandir le div en fonction du contenu

CSS

Discussions similaires

Partager

Partager