Sous FF, le scroll continue après la fin du contenu

Question

kadajjj

28 Apr 2010 à 11:43

Bonjour à toutes et à tous,

Sous Firefox, j'ai un souci de structuration de ma page d'index (http://eep.euroentent.net/artefact/test/index.htm) :

Le scroll continu bien après la fin du contenu... Smiley decu

Voici le CSS (bon c'est un peu le bordel mais c'est pas le sujet! Smiley lol

:


a:link {text-decoration: none; color: #525151;}
a:visited {text-decoration: none; color: #525151;}
a:hover {text-decoration: none; color: #525151;}
a:active {text-decoration: none; color: #525151;}

body {
        padding-top: 32px;
		background-image:url(../images/background.jpg);
        background-repeat:no-repeat;
		margin-bottom: 0px;
		height: 1050px;
		overflow-x: hidden;		
    }
	
.HP {
		margin-left: auto;
		margin-right: auto;
        width: 950px;
		height: 1020px;
		background-color: rgba(255, 255, 255, 0.35);
		-moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF,endColorstr=#55FFFFFF); 
        zoom: 1; 
      }

.desquestions {
        width: 166px;
		height: 210px;
		background-color: rgba(255, 255, 255, 0.35);
		-moz-box-shadow: -2px 2px 5px #c4ac78; 
	    -webkit-box-shadow: -2px 2px 4px #c4ac78; 
		box-shadow: -2px 2px 4px #c4ac78; 
      	position: relative;
		top: -363px;
		left: 12px;
		float: left;
}

#questions
{
	color: #525151;
	font-size: 15px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;
	background: white;
	padding: 4px 20px;
	position: relative;
	top: 5px;
	left: 26px;
}
  
.newsletter {
        width: 166px;
		height: 210px;
		background-color: rgba(255, 255, 255, 0.35);
		-moz-box-shadow: -2px 2px 5px #c4ac78; 
	    -webkit-box-shadow: -2px 2px 4px #c4ac78; 
		box-shadow: -2px 2px 4px #c4ac78; 
		position: relative;
		top: -145px;
		left: -155px;
		float: left;
}
	
#news
{
	color: #525151;
	font-size: 15px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;
	background: white;
	padding: 4px 20px;
	position: relative;
	top: 58px;
	left: 26px;
}
	
.header_gauche {
position: relative;
top: 10px;
left: 23px;
}

.header_centre {
position: relative;
top: -38px;
left: 410px;
}  

.header_droite {
position: relative;
top: -131px;
left: 784px;
}  
	
.menu_horizontal {
position: relative;
top: -110px;
left: 10px;
}  

.milieu_HP {
	width: 900px;
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;"
	font-size: 12;
	background: white;
	padding: 6px 15px;
	position: relative;
	left: 12px;
	top: -95px;
}

.separateur {
	width: 900px;
	height: 15px;
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;
	font-size: 12;
	background: white;
	padding: 6px 15px;
	position: relative;
	left: 12px;
	top: -373px;
	float: center;
}


.encart1 {
	width: 245px;
	height: 427px;
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;
	font-size: 12;
	background: white;
	position: relative;
	left: 190px;
	top: -572px;
	float: left;
	clear: both;
	
}

.footer {
	width: 900px;
	height: 15px;
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;"
	font-size: 12;
	background:white;
	padding: 6px 15px;
	position: relative;
	left: 12px;
	top: 76px;
	float: center;
	
}

#acces-panier
{
	color: #525151;
	font-size: 12px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;"
	font-size: 12;
	background:white;
	padding: 6px 15px;
	position: relative;
	top: -75px;
}
	
#connexion
{
	color: #525151;
	font-size: 12px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 4px #383838; 
	box-shadow: -2px 2px 4px #383838;
	font-size: 12;
	background:white;
	padding: 6px 30px;
	position: relative;
	top: -20px;
}

#fil
{
	color: white;
	font-size: 12px;
	font-family: arial, verdana, sans-serif;
	position: relative;
	top: -100px;
	left: 10px;
	
}

#menu_vertical td
{
border-width: 1px;
border-style: solid;
border-color: #d2d0d0;
width: 155px;
background-image: -moz-linear-gradient(top, #ffffff, #d7d7d6, #ffffff);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff), color-stop(0.5, #d7d7d6));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#d8d8d6,endColorstr=#f5f5f5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#d8d8d6,endColorstr=#f5f5f5)";
font-size: 14px;
font-family: verdana;
font-weight: bold;
color: #525151;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
}

#onglet td
{
border-collapse: collapse;
border-width: 1px;
border-style: solid;
border-color: #d2d0d0;
width: 237px;
background-image: -moz-linear-gradient(left, #5e130a, #d25613);
background-image: -webkit-gradient(linear, left top, right bottom, from(#5e130a), to(#d25613));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#5e130a,endColorstr=#d25613);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#5e130a,endColorstr=#d25613)";
font-size: 14px;
font-family: verdana;
font-weight: bold;
color: #FFFFFF;
padding-left: 5px;
padding-top: 4px;
padding-bottom: 4px;
text-decoration: none;
text-align: center;
}

#mh1
{
	color: #525151;
	font-size: 14px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: -2px 2px 5px #383838; 
	-webkit-box-shadow: -2px 2px 5px #383838; 
	box-shadow: -2px 2px 5px #383838;
	background:white;
	padding: 6px 40px;
}

#mh2
{
	color: #525151;
	font-size: 14px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: 0px 2px 5px #383838; 
	-webkit-box-shadow: 0px 2px 5px #383838; 
	box-shadow: 0px 2px 5px #383838;
	font-size: 12;
	background:white;
	padding: 6px 40px;
	position: relative;
	left: -3px;
}

#mh3
{
	color: #525151;
	font-size: 14px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: 0px 2px 5px #383838; 
	-webkit-box-shadow: 0px 2px 5px #383838; 
	box-shadow: 0px 2px 5px #383838;
	font-size: 12;
	background:white;
	padding: 6px 40px;
	position: relative;
	left: -6px;
}

#mh4
{
	color: #525151;
	font-size: 14px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: 0px 2px 5px #383838; 
	-webkit-box-shadow: 0px 2px 5px #383838; 
	box-shadow: 0px 2px 5px #383838;
	font-size: 12;
	background:white;
	padding: 6px 40px;
	position: relative;
	left: -9px;
}

#mh5
{
	color: #525151;
	font-size: 14px;
	font-family: arial, verdana, sans-serif; 
	border: 1px solid #ddd; 
	-moz-box-shadow: 0px 2px 5px #383838; 
	-webkit-box-shadow: 0px 2px 5px #383838; 
	box-shadow: 0px 2px 5px #383838;
	font-size: 12;
	background:white;
	padding: 6px 40px;
	position: relative;
	left: -12px;
}

#nb_art {
	color: #ffffff;
	font-size: 12px;
	font-family: arial, verdana, sans-serif; 
	position: relative;
	top: -30px;
	left: -210px;
}

#num_tel
{
	position: relative;
	top: 66px;
	left: -147px;
}

#panier {
	
	position: relative;
	top: 30px;
	left: -57px;
}



#regler {
	color: #ffffff;
	font-size: 14px;
	font-family: arial, verdana, sans-serif; 
	position: relative;
	left: -278px;
	text-decoration: none;
}

#tel
{
	position: relative;
	top: 62px;
	left: -138px;
	}

Modifié par kadajjj (28 Apr 2010 - 11:45)

phpdoesnotcare

28 Apr 2010 à 12:16

Bonjour.
Commence par enlever toutes les hauteurs que tu as fixées, notamment celle du body, etc. Il est déconseillé de fixer une hauteur ne serait-ce que dans un soucis d'accessibilité. Essaye plutôt min-height, dans ce cas.

Ensuite, je me permets une petite remarque, tant que j'y suis. Voilà ce que je vois, sur un écran assez large :

http://img197.imageshack.us/img197/763/58096286.png
Modifié par phpdoesnotcare (28 Apr 2010 - 12:16)

kadajjj

28 Apr 2010 à 12:52

Bonjour phpdoesnotcare et merci de ta réponse,

j'ai remplacé les height par des min-height mais çe ne résolve pas mon souci ^^

En ce qui concerne le décalage du menu horizontal : oui, c'est un autre de mes problèmes (j'ai essayé un display:inline mais ça change rien)

phpdoesnotcare

28 Apr 2010 à 13:16

J'avoue ne rien y comprendre. Tout semble trop grand, que ce soit en largeur ou en hauteur. C'est vraiment bizarre. J'essaierai de me pencher dessus ce soir si j'ai le temps, et si personne n'a trouvé la source du problème d'ici là.

Pour le background, c'est assez simple. Soit :
- tu le fais se répéter
- tu fais en sorte que les bords aient un effet de fondu vers une couleur unie, et tu ajoutes une couleur de fond.

fvsch

28 Apr 2010 à 13:27

Bonjour,

Le problème vient de l'utilisation abusive du positionnement relatif, qui n'est pas fait pour mettre deux blocs côte-à-côte.
Solution: refaire complètement tout le positionnement des blocs.
À lire: Guide de survie du positionnement CSS.

Le tuto en question a écrit :
Pour l'essentiel, le positionnement relatif a deux usages concrets: 1) créer un nouveau référent pour les éléments enfants et descendants positionnés en absolu et 2) décaler légèrement (de quelques pixels, pas plus) un élément par rapport à sa position normale, pour réaliser un effet visuel. Toute autre utilisation, sans être impossible ou forcément incorrecte, est risquée.

Voir aussi les gabarits:
http://www.alsacreations.com/static/gabarits/

Et éviter autant que possible de figer la hauteur des conteneurs. Si tu te retrouves à déclarer un height:200px ou un height:1050px quelque part, il y a une erreur.
Modifié par Florent V. (28 Apr 2010 - 13:28)

octopus984

28 Apr 2010 à 14:28

Florent V. a écrit :
Le problème vient de l'utilisation abusive du positionnement relatif, qui n'est pas fait pour mettre deux blocs côte-à-côte.

Effectivement, le problème vient du positionnement relatif, car si tu désactives ce positionnement sur l'ensemble de tes éléments, tu te rendra compte que la hauteur de la page correspond bien à celle de son contenu.

Comme le propose Florent, il te faut revoir le positionnement de tes éléments.

NB : revoir le positionnement n'implique pas forcément l'utilisation de la propriété CSS position.

kadajjj

28 Apr 2010 à 15:00

Merci à tous pour vos réponses, je retravaille tout ça Smiley smile

Sujet clos

Sémantique web et HTML

Sous FF, le scroll continue après la fin du contenu