Emplacement de l'ascenseur sur un DIV avec Firefox [Résolu]

legentil · 02/06/2011, 16h52

Bonjour à tous !

J'ai un problème, j'ai une page dans laquelle j'ai une zone DIV.
Je voudrais que cette zone affiche un ascenseur quand le contenu est trop grand.

J' ai donc rajouté dans mon CSS la ligne overflow:auto;

ça fonctionne bien sous chrome, l'ascenseur est placé au niveau du div, par contre sous firefox 4.0.1 la zone DIV est allongée et l'ascenseur se met donc directement sur le bord de la page quand mon div dépasse.

Quelqu'un saurait il comment changer ce comportement sous firefox?

voilà mon code HTML :

Code html :

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
 
<div class="tableau">
	<table WIDTH="100%" HEIGHT="100%" CELLSPACING="0" BORDER="0" CELLPADDING="0">
		<tr HEIGHT=10>
			<td class="tableau_hg"WIDTH=10/>
			<td class="tableau_fond"/>
			<td class="tableau_hd" WIDTH=10/>
		</tr>
		<tr>
			<td class="tableau_fond" WIDTH=10 />
			<td>
				<div class="contenu" id="contenu"/>	
			</td>
			<td class="tableau_fond" WIDTH=10/>
		</tr>
		<tr HEIGHT=10>
			<td class="tableau_bg" WIDTH=10/>
			<td class="tableau_fond"/>
			<td class="tableau_bd" WIDTH=10/>
		</tr>
	</table>
</div>

et mon CSS :

Code :

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

1
2
3
4
5
6
7
 
.contenu {
  height:100%;
  width:100%;
  background-image: url("images/jaune.png");
  overflow:auto;
}

Merci d'avance pour votre aide !

12monkeys · 02/06/2011, 19h21

Bonsoir

Ta div 'contenu' n'est pas fermée ? Dans ton exemple elle n'a pas de balise fermante </div>; Si c'est le cas, c'est surement çà qui crée le bug.

legentil · 03/06/2011, 09h47

Merci pour ta réponse, en fait ma balise est vide :

Code :

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

1
2
<div class="contenu" id="contenu"/>

C'est ensuite du code javascript qui va dynamiquement charger un contenu dans ce div :

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
 
function charger(adresse, titre)
 {
  // Nous créons un objet XMLHttpRequest
  get_Xhr();
  xhr.onreadystatechange = function()
   {
    //Si la requete est terminée est qu'elle ne remonte pas d'erreur ( voir *1* ci dessous )
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      document.getElementById('contenu').innerHTML = xhr.responseText;
	  document.title = titre;
     }
   }
  // Mais c'est ici que l'on indique les valeurs à transmettre
  // On ouvre la page "lapage.php" en mode asynchrone ( true ) 
  xhr.open("POST", adresse, true);
  // Obligatoire si l'on passe en POST   
  xhr.setRequestHeader('Content-Type','x-www-form-urlencoded');
  //Envoie de la requete
  //xhr.send("nserie="+nserie);
  xhr.send();
 }

J'ai essayé de mettre un contenu statique dans cette balise DIV, mais le comportement reste le même

12monkeys · 03/06/2011, 10h05

Bonjour

Ton code n'est pas bon :

Code html :

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

<div class="contenu" id="contenu"/>

il faut obligatoirement une balise fermante :

Code html :

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

<div class="contenu" id="contenu"></div>

Pour éviter ce genre d'erreur tu peux analyser ton code avec les outils du W3C : http://validator.w3.org/

legentil · 03/06/2011, 12h47

Merci pour ta réponse, j'ai corrigé et passé le reste du code au vérificateur w3c.
ça m'a permis de corriger toutes les imperfections de mon code, par contre j'ai un warning me disant que mon document n'avait pas de doctype.
J' ai rajouté :

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tant que je laisse cette balise au début de mon document, mon css n'est plus pris en compte, je l'ai donc enlevé en attendant de trouver une solution au problème.

Par contre, bien que le controle w3c se termine par un success, firefox continue de me placer l'ascenseur sur la page et pas sur mon DIV

Une autre idée?

Mon site dans son état actuel peut être vu à l'adresse :http://lesbourrachos.free.fr/2011/

Merci encore !

NoSmoking · 03/06/2011, 13h02

bonjour,
commences par mettre des unités aux valeurs dans ta feuille de style, c'est IMPERATIF, si la valeur est significative, différente de 0.

Code css :

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

1
2
top : 160;   /* pas BIEN */
top : 160px; /* BIEN */

12monkeys · 03/06/2011, 13h07

Le problème est lié à l'association de ton height:100% sur ton .contenu {} avec un tableau : ton div .contenu {} se trouve dans un div.

Si tu mets une valeur fixe sur .contenu {} genre 500px alors cela fonctionne. De même que si tu supprimes ton tableau height:100% va reprendre ses effets.

Je me demande aussi pourquoi utiliser le positionnement absolu pour positionner le corps de ta page. Ce positionnement doit être utilisé avec parcimonie, regarde ici pour d'autres conseils : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

legentil · 03/06/2011, 13h31

Merci pour vos réponses !

J'ai mis à jours mon css pour ce qui est des unités.
Pour le problème d'ascenseur, j'ai modifié le css, le contenu est maintenant définit comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.contenu {
  position:absolute;
  top:10;
  bottom:10;
  left:10;
  right:10;
  background-image: url("images/jaune.png");
  overflow:auto;
}

Du coup, j'utilise une fois de plus la position absolue.

12monkeys, tu dis

Citation:

Ce positionnement doit être utilisé avec parcimonie

J'ai utilisé ce type de positionement car il me semblait être le plus simple à mettre en place (je suis pas un pro du html/css

), j'ai jeté un oeil à ton lien effectivement ça m'a pas l'air très compliqué non plus avec la solution proposée !
Par contre pourquoi utiliser celle là plutôt que la position absolue? et dans quel cas la position absolue doit être utilisée?

Merci en tout cas mon problème est résolu !

NoSmoking · 03/06/2011, 13h56

EUH!!!

Citation:

Code css :

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

1
2
3
4
5
6
7
8
9
.contenu {
  position:absolute;
  top:10;
  bottom:10;
  left:10;
  right:10;
  background-image: url("images/jaune.png");
  overflow:auto;
}

elles sont ou les unités sur cette partie du CSS ?

legentil · 03/06/2011, 13h57

oups, c'est du rajouté après coup ça : )
comme quoi c'est pas encore un réflexe !

12monkeys · 03/06/2011, 14h34

Le positionnement absolu n'est pas interdit, mais bon il faut l'utiliser à bon escient en sachant ce qu'on fait. On peut avoir des soucis par exemple lors du redimensionnement du navigateur dans certaines circonstances.

Dans ton cas par exemple tu affiches chaque élément du menu en le positionnant en absolu, mais quel intérêt. Si tu utilises le positionnement absolu les éléments sortent du flux naturel (l'écoulement naturel des éléments) or tu affiches les éléments les uns sous les autres donc dans le flux naturel, alors dans ce cas le positionnement absolu n'est pas utile.

Pour ton problème un peu plus haut : un doctype est strictement nécessaire http://xhtml.developpez.com/faq/?pag...octype_utilite. Sans tu vas avoir de vieux navigateurs (IE6) qui se mettrons en mode Quirks et qui ne s'afficheront plus comme les autres, bref plein de soucis...

Si le CSS ne s'affiche plus c'est que tu as un autre souci. Rajoute le DOCTYPE sur ton exemple et on pourra aller voir ce qui se passe...

02/06/2011, 19h21	#2
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonsoir Ta div 'contenu' n'est pas fermée ? Dans ton exemple elle n'a pas de balise fermante </div>; Si c'est le cas, c'est surement çà qui crée le bug. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

03/06/2011, 10h05	#4
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonjour Ton code n'est pas bon : Code html : Sélectionner tout - Visualiser dans une fenêtre à part <div class="contenu" id="contenu"/> il faut obligatoirement une balise fermante : Code html : Sélectionner tout - Visualiser dans une fenêtre à part <div class="contenu" id="contenu"></div> Pour éviter ce genre d'erreur tu peux analyser ton code avec les outils du W3C : http://validator.w3.org/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

03/06/2011, 12h47	#5
legentil Membre du Club Inscription : novembre 2007 Messages : 171 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 171 Points : 69 Points : 69	Merci pour ta réponse, j'ai corrigé et passé le reste du code au vérificateur w3c. ça m'a permis de corriger toutes les imperfections de mon code, par contre j'ai un warning me disant que mon document n'avait pas de doctype. J' ai rajouté : Code : Sélectionner tout - Visualiser dans une fenêtre à part <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Tant que je laisse cette balise au début de mon document, mon css n'est plus pris en compte, je l'ai donc enlevé en attendant de trouver une solution au problème. Par contre, bien que le controle w3c se termine par un success, firefox continue de me placer l'ascenseur sur la page et pas sur mon DIV Une autre idée? Mon site dans son état actuel peut être vu à l'adresse :http://lesbourrachos.free.fr/2011/ Merci encore !
	00

03/06/2011, 13h07	#7
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Le problème est lié à l'association de ton height:100% sur ton .contenu {} avec un tableau : ton div .contenu {} se trouve dans un div. Si tu mets une valeur fixe sur .contenu {} genre 500px alors cela fonctionne. De même que si tu supprimes ton tableau height:100% va reprendre ses effets. Je me demande aussi pourquoi utiliser le positionnement absolu pour positionner le corps de ta page. Ce positionnement doit être utilisé avec parcimonie, regarde ici pour d'autres conseils : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

03/06/2011, 14h34	#11
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Le positionnement absolu n'est pas interdit, mais bon il faut l'utiliser à bon escient en sachant ce qu'on fait. On peut avoir des soucis par exemple lors du redimensionnement du navigateur dans certaines circonstances. Dans ton cas par exemple tu affiches chaque élément du menu en le positionnant en absolu, mais quel intérêt. Si tu utilises le positionnement absolu les éléments sortent du flux naturel (l'écoulement naturel des éléments) or tu affiches les éléments les uns sous les autres donc dans le flux naturel, alors dans ce cas le positionnement absolu n'est pas utile. Pour ton problème un peu plus haut : un doctype est strictement nécessaire http://xhtml.developpez.com/faq/?pag...octype_utilite. Sans tu vas avoir de vieux navigateurs (IE6) qui se mettrons en mode Quirks et qui ne s'afficheront plus comme les autres, bref plein de soucis... Si le CSS ne s'affiche plus c'est que tu as un autre souci. Rajoute le DOCTYPE sur ton exemple et on pourra aller voir ce qui se passe... __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

03/06/2011, 13h57	#10
legentil Membre du Club Inscription : novembre 2007 Messages : 171 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 171 Points : 69 Points : 69	oups, c'est du rajouté après coup ça : ) comme quoi c'est pas encore un réflexe !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email