Marge, Scrollbar et probleme de background

Version imprimable

29/09/2010, 14h08
bolo

Marge, Scrollbar et probleme de background

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.
29/09/2010, 14h45
c_s_s

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. :aie:

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:

1 2 3 position: absolute; bottom:0;
mais le chevauchement est toujours la.

Citation:

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:

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

29/09/2010, 15h30
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. ;)

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).
29/09/2010, 16h09
bolo

Citation:

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 :D

Citation:

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