Mon footer montre un grand espace blanc

Salut,

Avec Firefox, le footer de mon site montre un grand vide blanc : http://dubinfo.be/jamesservices/

Je n'ai ce problème qu'avec firefox.

Voici le code CSS de mon footer :

#footer{
	width: 798px;
	height: 328px;
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	position: relative;
	bottom: 856px;
	left: 0px;
}

Merci d'avance pour votre aide.
bee

salut,
c'est plutôt un problème d'ordre général. Le positionnement est très mal fait et donc pas maîtrisé. Il faut que tu saches que les positions relatives ne sortent pas du flux et donc lorsque tu décales tes éléments avec "top/left", ils occupent toujours leur place dans le flux et ne changent de position que visuellement. Si tu ajoutes

* {position:static !important}

dans ton CSS, tu te rendras compte de comment sont placés véritablement tes éléments.
Ce n'est pas très compliqué comme mise en page donc je pense qu'il vaudrait mieux tout refaire d'une manière plus propre.

Effectivement ! Tous tes blocs ont des tailles fixées et sont positionnés en relatif !! Tu ne viendrais pas du monde du print par hasard ? On dirait une mise-en-page sous X Press…

Au point où tu en es (ce n’est pas un jugement de valeur, on a tous débuté un jour), tu as 2 options :
1. tu revois complètement ta façon de penser une page HTML, tu lis des tutos et tu recommences…
2. tu n’as pas le courage et tu laisses tomber : après tout, visuellement le résultat semble correcte excepté ton problème (pas testé sous IE toutefois).

Bien sûr, je te conseille chaudement le choix 1, beaucoup plus enrichissant pour l’avenir. Et sache aussi que si tu pars sur le choix 2, la maintenance de ton site sera un calvaire : pour chaque modification de texte ou d’image, il te faudra revoir les tailles et les positions de tes blocs en CSS…

Bon courage si tu choisi le 1.

Bonjour à vous deux,

En fait, c'est un étudiant stagiaire qui a développé le code CSS.

Il est très bon en design (Photoshop...), mais a commencé depuis peu le CSS.

Sauriez-vous s.v.p. nous donner des conseils ? Nous sommes prêt à recommencer.

Connaissez-vous des tutos qui pourraient nous aider ?

Merci d'avance.

Le problème c'est que l'intégration est un vrai métier... Il y a beacoup à dire. Vous trouverez nombre de tutoriels ici même, sur Alsacreations. Ils sont très pertinents.

Bonjour Olivier, bonjour à toutes et à tous,

J'ai pris mon courage à deux mains et j'ai retapé le code CSS (je précise que je suis développeur et très peu habiuté au CSS).

Mes notions m'ont permises d’obtenir ce résultat : http://dubinfo.be/jamesservices/

Sans l'utilisation de position:relative, je n'ai plus le problème du footer avec Firefox (ni avec aucun autre navigateur).

Il y a plusieurs soucis que je dois encore régler :

1) le menu est plus grand que la bannière
2) James services - tout droits réservés devrait se trouver en-dessous de l'image et non au-dessus (voir footer)
3) Je voudrais un bord autour du site en relief, me conseillez-vous ?


Plusieurs questions aussi :

A) J'ai une div qui contient deux drapeaux, est-ce que je peux placer cette div en position absolue ? C'est une pratique courante ?
B) Je recherche un diaporama tout simple en jquery, que me conseillez-vous ?

Voici mon nouveau code CSS :

body
{	
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, "Times New Roman", Times, sans-serif;
}

h1
{
	color:#b3c200;
}

#fr
{
	width: 33px;
	height: 34px;
	background-image: url(../images/drapeau_francais.png);
	background-repeat: no-repeat;
}
#ang
{
	width: 29px;
	height: 29px;
	background-image: url(../images/drapeau_anglais.png);
	background-repeat: no-repeat;
}

#header
{
	width: 826px;
	height: 228px;
	background: url(../images/Banniere3.jpg) no-repeat;
}
#nav
{
	width: 826px;
}

/*Début du menu*/
#menu
{
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #111111;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0 2px 1px rgb(156, 156, 156);
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 10px 0 0 0;
    width: 100%;
}
#menu li {
    float: left;
    line-height: 0;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
}
li{
	margin-left: 0px;
	margin-right: -30px;
}
#menu a {
    float: left;
	height: 25px;
	padding: 0 25px;
	color: white;
	text-transform: uppercase;
	font: bold 11px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
    color: rgb(250, 250, 250);
}
#menu li:hover > ul {
    display: block;
}
#menu ul { 
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(rgb(68, 68, 68), rgb(17, 17, 17));
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    display: none;
    left: 17px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: absolute;
    top: 35px;
    z-index: 99999;
}
#menu ul ul {
    left: 150px;
    top: 0;
}
#menu ul li {
    box-shadow: 0 1px 0 rgb(17, 17, 17), 0 2px 0 rgb(119, 119, 119);
    display: block;
    float: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#menu ul li:last-child {
    box-shadow: none;
}
#menu ul a {
    display: block;
    float: none;
    height: auto;
    line-height: 1;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-transform: none;
    white-space: nowrap;
    width: 130px;
}
:first-child + html #menu ul a {
    height: 10px;
}  
#menu ul a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(#DF4449, #ba0101);
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
#menu ul li:first-child > a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 24px;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
    left: -7px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
    border-bottom-color: #DF4449;
}
#menu ul ul li:first-child a:hover:after
{
    border-right-color: #DF4449; 
    border-bottom-color: transparent; 	
}
#menu ul li:last-child > a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#menu:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
* html #menu {
}
:first-child + html #menu {
}


#map
{
	width: 30%;
	height:130px;
	background-color: red;
	border: 20px;
	float: left;
}

#diaporama
{
	
	width: 70%;
	height:130px;
	background-color: blue;
	border: 20px;
	float: right;
	
}
.loupe{
	/*position: relative;
	top: -3px;
	left: 210px;*/
}
#contactez
{
	/*width: 245px;
	height: 46px;
	background-image: url(../images/contactez.png);
	background-repeat: no-repeat;
	position: relative;
	top: 30px;
	left: 5px;*/
}
#telephone
{
	width: 234px;
	height: 32px;
	background-image: url(../images/telephone.jpg);
	background-repeat: no-repeat;
	position: absolute;
	top: 180px;
	left: 500px;
}
#TS {
	/*position: relative;
	top: 37.5px;
	left: 165px;
	color: white;
	font-family: 'Century Gothic', sans-serif;
	font-size: 15px;
	letter-spacing: 3.5px;*/
}
#arrobase{
	/*width: 234px;
	height: 46px;
	position: relative;
	top: -16px;
	left: 20px;*/
}
.arrobase {
	/*position: relative;
	top: 9px;
	left: -10px;*/
}
.plan
{
	/*
	color: white;
	font-family: "Comic Sans MS", sans-serif;
	font-size: 15px;*/
	width: 50%;
	height: 150px;
	background-color: green;
	float: left;
}
#jquiry
{
	width: 50%;
	
	/*width: 531px;
	height: 223px;
	position: relative;
	left: 267px;
	top: -349px;*/
}
#texte
{
	/*width: 556px;
	height: 539px;
	background-color: white;
	position: relative;
	left: 15px;
	top: -299px;*/
	clear: both;
	
	
}
#photo
{
	width: 202px;
	height: 485px;
	background-image: url(../images/Femme.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 1100px;
	top: 500px;
	
	
}
#footer{
	/*
	
	position: relative;
	bottom: 856px;
	left: 0px;*/
	float: left;
	width: 798px;
	height: 328px;
	
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
}

a.mail{
	/*color: white;
	font-family: "Comic Sans MS", sans-serif;
	font-size: 15px;
	text-decoration: none;
	text-align: center;*/
}



/*===================*/
/*=== Main Styles ===*/
/*===================*/


.theme-default #slider {
    margin:99px auto 0 auto;
    width:530px; /* Make sure your images are the same size */
    height:222px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
    margin-top:150px;
}

Tous conseils seront les bienvenus, merci d'avance.
Modifié par beegees (07 Dec 2013 - 11:28)

Salut.

Tout d’abord, comme dit Olivier C, integrateur HTML/CSS est un métier, cela ne s’improvise pas. De plus, c’est un métier basé sur l’expérience car c’est elle qui va déterminer la solution aux problèmes rencontrés. Je ne dis pas ça pour te décourager, au contraire, c’est pour t’encourager à prendre le temps nécessaire à la formation. On en apprends tous les jours…

En attendant, pour le site qui te préoccupe aujourd’hui, je ne pense pas que qui que ce soit prenne tout le temps nécessaire à une analyse de ton code : trop long et fastidieux… Donc pas la peine de le coller en entier dans ce forum : cela pollue et si on veux le voir il suffit d’aller à l’adresse que tu as eu la bonne idée de donner.
A première vue, le résultat ne semble pas trop mal, tout du moins sur Safari (pas regardé ailleurs). Pour le point 1) et le point 2) tu sembles t’en être sorti et pour le point 3) c’est du design cela ne nous regarde pas vraiment et c’est très personnel. Une ombre portée au bloc extérieur ?

Pour le point A), oui la position absolute est possible (sinon elle n’existerait pas . Après, comme pour presque toutes les problématiques en webdesign, la réponse est « ça dépends »…

Enfin, je suis tombé sur 2 erreurs (à mon avis) dans ton code HTML :
- tu utilises la balise <hgroup>. Il me semble qu’elle est devenu obsolète… A vérifier en validant ton code sur le validateur…
- à droite, tu as une image (femme.jpg) qui est appelée dans le code et qui est dans une balise <aside>. Tout d’abord, cette balise est sémantique, c'est-à-dire qu’elle donne du sens. Une image sans texte, sans légende et sans même attribut alt n’a aucun sens. Ta balise <aside> n’apporte donc rien. Elle devrait donc être un <div>. Au-delà de ça, ton image me semble être purement décorative et non sémantique. Ce genre d’image est à afficher via CSS en fond de bloc et non dans le flux HTML.
Si, au contraire, tu penses qu’elle mérite d’être dans le HTML, mets-lui au moins un alt (qui soit dit en passant est obligatoire) pour qu’elle apporte de l’information : http://www.alsacreations.com/astuce/lire/1166-alt-title-images-liens.html

D’ailleurs ce problème de gestion des images me semble être général sur la page…

Bonne continuation.
Modifié par Derwoed (08 Dec 2013 - 20:06)

Salut Derwoed et merci pour ta réponse.

J'ai un problème qui me résiste, c'est la vision du site sous IE8 :

http://dubinfo.be/jamesservices4/

Le bloc du map se met en-dessous du bloc du slider.

Je pense que c'est dû aux margins négatives.

Si quelqu'un a une idée...

Merci d'avance et bonne soirée.

bee

Pour commencer, ne pas réinventer la roue...

Parmis toutes les pistes possibles (framework Bootstrap et cie) jutiliserais une feuille de style de base, style "normalize", pour mettre tous les navigateurs d'accord, et une "grille css", en prévision de l'architecture du site.

Je personnaliserais ensuite tous les styles de base. Puis viens le moment de styler les éléments plus spécifiques. Ceux là il faut les coder de manière modulaire, par l'appel d'une classe.

Personnellement c'est ainsi que je procède.

Edit. : la balise hgroup est effectivement deprecated.
Modifié par Olivier C (09 Dec 2013 - 10:19)

Bonjour Olivier,

Merci pour ta réponse.

Voici la dernière version http://dubinfo.be/jamesservices5/

J'ai toujours un souci avec IE8 et les deux blocs (ils se trouvent l'un en-dessous de l'autre chez moi).

Auriez-vous une idée svp ?

Merci d'avance.

Je suis désolé mais là je suis sur mon smartphone: je n'ai donc pas accès à IE8...

Olivier C a écrit :
Je suis désolé mais là je suis sur mon smartphone: je n'ai donc pas accès à IE8...

ça donne quoi sur ton smartphone ?

La map est à-côté du slider ?