Marge, Scrollbar et probleme de background

**bolo** · 29/09/2010, 14h08

Salut à tous.

J'ai 3 problème avec un projet et j'arrache mes cheveux !!!

voici le site web.

http://www.lukeblezard.com/testing/

Safari et Firefox

1 ) Quand je clique sur Hire Me mon bouton SEND touche le footer. J'ai ajouté une marge-bottom mais rien ne fait. Il touche le footer

2) l'option background-url arrête de se répeter quand la résolution est plus grande que 1600.

FireFox,

Une scrollbar apparait tout le temps

IE 7

Le footer droite n'est pas tout en bas

Voila si une bonne pouvait m'aider ca serait cool

B.

**c_s_s** · 29/09/2010, 14h45

Bonjour,

La scrollbar est dûe au bloc <div class="table"> qui est en display:table; avec une hauteur de 100%.
Cette modification du rendu semble modifier la hauteur réelle du bloc qui fait légèrement plus de 100%.
Si tu mets height:99%; au lieu de height:100%; la scrollbar devrait disparaître.

Je ne reproduis ton problème n°1 que si la fenêtre du navigateur est réduite.
Le problème est dûe à la marge basse négative que tu as mis sur rightContent . Ca fait remonter le bloc rightFooter et ils se chevauchent.

Pour le background je ne peux pas tester, 1600 est une résolution trop élevée pour mon écran.

**bolo** · 29/09/2010, 15h00

La scrollbar est dûe au bloc <div class="table"> qui est en display:table; avec une hauteur de 100%.
Cette modification du rendu semble modifier la hauteur réelle du bloc qui fait légèrement plus de 100%.
Si tu mets height:99%; au lieu de height:100%; la scrollbar devrait disparaître

Ca marche nickel

Je ne reproduis ton problème n°1 que si la fenêtre du navigateur est réduite.
Le problème est dûe à la marge basse négative que tu as mis sur rightContent . Ca fait remonter le bloc rightFooter et ils se chevauchent.

ok j'ai enlevé la marge négative dans mon footer du bas coté droit j'ai remplacé par

Code :

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

1
2
3
 
	position: absolute;
	bottom:0;

mais le chevauchement est toujours la.

Pour le background je ne peux pas tester, 1600 est une résolution trop élevée pour mon écran

.

Si tu testes ce code

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
	<title>Luke Blezard</title>
	<style type="text/css" media="screen">
		/* --------------------------------------------------------------------- */
		/* --------------------------- SHARED CSS -------------------------------- */
		/* --------------------------------------------------------------------- */
		html,body {
			margin:0;
			padding:0;
			height: 100%;
		}
		body {
			background-image:url('http://www.lukeblezard.com/testing/images/background_y.gif');
			background-repeat:repeat-y;
			font-family:arialRoundedMTBold, Arial, Helvetica, sans-serif;
			width:1600px;
		}
	</style>	
</head>
  <body>
 
  </body>
</html>

Boom

MERCI bc pour ton aide

**c_s_s** · 29/09/2010, 15h30

background_y.gif fait 1300px de large et tu la répètes seulement en hauteur. Normal qu'elle ne se voit pas si la résolution dépasse 1300px de large.

Pour le problème de chevauchement avec le pied de page, il faudrait que tu donnes une hauteur minimale (min-height) à ton bloc .table (720px, par exemple).

**bolo** · 29/09/2010, 16h09

Envoyé par c_s_s

background_y.gif fait 1300px de large et tu la répètes seulement en hauteur. Normal qu'elle ne se voit pas si la résolution dépasse 1300px de large.

Je suis a la masse ce matin

Envoyé par c_s_s;5498220
Pour le problème de chevauchement avec le pied de page, il faudrait que tu donnes une hauteur minimale ([B

min-height[/B]) à ton bloc .table (720px, par exemple).

J'ai mis un min-heigth ca fonctionne

Merci